Mobilny widżet

Postanowiłam ożywić ZI, bo wakacje, dorosłość itd.. Nie wiem, czy ktoś widział, że Disqus po zainstalowaniu wyświetla się na początku jedynie w wersji na komputery. Niedawno tłumaczyłam komuś, jak wstawić Disqus mobilny, więc może taka instrukcja się przyda.

<b:widget id='HTML2' locked='false'  title='Disqus for adres-bloga.blogspot.com' type='HTML' visible='true'>

Tak wygląda HTML Disqusa jedynie dla komputerów. Znajdź ten fragment w kodzie HTML bloga. By wyświetlał się mobilnie trzeba to zmienić na:

<b:widget id='HTML2' locked='false' mobile='yes' title='Disqus for adres-bloga.blogspot.com' type='HTML' visible='true'>

Można tak postępować z każdym gadżetem. Np. jeśli zrobisz skomplikowane, fajne menu, które dobrze wygląda jedynie na komputerze możesz sprawić, by było jedynie na komputerze, a do wersji mobilnej dodać zwykły gadżet stron. Mamy aż trzy ustawienia.

• mobile='yes' - widżet pojawia się zarówno na komputerze jak i na telefonie
• mobile='no' - widżet nie wyświetla się mobilnie
• mobile='only' - widżet wyświetla się się tylko w wersji mobilnej

Właściwość transform

Nie mam coś weny na instrukcje. Prezentacja ładnego efektu transform. Możemy nim sprawić, że dowolny element się obróci w dowolnej płaszczyźnie lub przesunie. Warto spojrzeć na układ współrzędnych. Kod wstawiamy w nawiasie klamrowym po dowolnym selektorze, of course, tu jest dodany po najechaniu myszką (:hover). Jeśli nie dodasz do niego transition: 5s (s = sekundy, oczywiście dowolna wartość) to element wykona swój ruch od razu i nie będzie można popatrzeć. Miłego myszkowania.

Gradienty

Gradienty to fajny efekt i w dodatku do zrobienia CSSem, a nie graficznie. Ja wolę właśnie kody, więc to dla mnie najprostszy sposób na ciekawsze tło. Do ich tworzenia używamy właściwości background-image:.

background-image: linear-gradient(ghostwhite, lightskyblue ) Zwykły gradient z domyślnymi ustawieniami kierunku i procentów

background-image: linear-gradient(ghostwhite 20%, lightskyblue 70%) Poprawiony procent dla obu kolorów

background-image: linear-gradient(to left, ghostwhite 20%, lightskyblue 70%) Zmieniony kolorek

background-image: repeating-linear-gradient(ghostwhite 10%, cyan 30%) Powtarzający się gradient w sytuacji, gdy procenty nie sięgają stu.

background-image: radial-gradient(ghostwhite , lightskyblue) Okrągły, ustawienia domyślne

background-image: radial-gradient(ghostwhite 20%, lightskyblue 60%) Znów, dodane procenty

background-image: radial-gradient(ellipse, ghostwhite 10%, lightskyblue 70%) Zmieniony na elipsę się trochę rozciągnął

background-image: radial-gradient(ellipse 60px 30px, ghostwhite 10%, lightskyblue 70%) Wielkość elipsy ustawiamy dwoma wartościami

background-image: radial-gradient(circle, ghostwhite 10%, lightskyblue 70%) Koło jest ładne proporcjonalne

background-image: radial-gradient(circle 50px, ghostwhite 10%, lightskyblue 70%) A wielkość koła jedną