środa, 10 sierpnia 2016

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

niedziela, 10 kwietnia 2016

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.

poniedziałek, 25 stycznia 2016

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ą