css

W poprzednim wpisie przedstawiłem obsługę zdarzeń oraz selektory. W tym wpisie pokażę gotowy przykład, który wykorzystuje animacje. Do zrozumienia tego przykładu będzie potrzebna podstawowa wiedza z CSS, JavyScript oraz HTML.

Potrzebne nam będą 3 warstwy html, jako obiekt warstwy możemy użyć znacznika DIV
<div class="pudelko"></div>
<div class="pudelko zaaograglone"></div>
<div class="pudelko wypasione"></div>
Warstwy te zawierają 3 pudelka, które posłużą nam do zaprezentowania animacji JQuery.

Aby te „pudełka” nabrały wyglądu należy je odpowiednio wystylować, użyję do tego CSS
div.pudelko{width:100px; height:100px; margin:5px; float:left; background-color:red;}
div.pudelko.zaaograglone{border-radius:25px;}
div.pudelko.wypasione{border: 4px solid black;}
Ogólnie każde pudełko ma rozmiar 100×100 px w ogół margines 5px. Pudełka układane są od lewej strony oraz mają czerwony kolor tła. Pudełko zaaokrąglone posiada zaokrąglenie 25px a pudełko wypasione posiada obramowanie o szerokości 4px w kolorze czarnym.

Czas na JQuery.  […]