Efekty CSS: miniaturki obrazków (bez użycia JS)

Potęga CSS jest ogromna. Efekty i animacje, które jeszcze kilka lat temu nie były możliwe do wykonania bez pomocy JavaScriptu, dzisiaj osiągamy bez większego trudu wyłącznie przy użyciu HTML+CSS. Niniejszym wpisem chciałbym rozpocząć serię wpisów o alternatywach dla popularnych JavaScriptowych efektów, które beztrosko i zupełnie niepotrzebnie stosujemy na swoich stronach. Na pierwszy ogień idą miniaturki obrazków.

Demo

HTML+CSS

Za wszystkie efekty odpowiada wyłącznie CSS, więc podstawowy kod HTML to tylko 2 elementy: odnośnik i obrazek. Dzięki temu nie jest konieczna głębsza ingerencja w źródło strony.

W arkuszu stylów definiujemy bazowy wygląd miniaturek i przygotowujemy pseudoelementy :before i :after wykorzystywane w efektach.

Efekt #1: Fade

Pierwszy efekt jest bardzo prosty. Polega na przesłonięciu obrazka półprzezroczystą warstwą i wyświetleniu na jego środku ikonki odnośnika.

Demo: efekt 1

Efekt #2: Slide

Drugi efekt polega na wjechaniu warstwy przesłaniającej i ikonki z dowolnej strony obrazka. Dla przykładu przedstawię 3 warianty wjeżdżania: z lewej, z góry oraz z lewego górnego narożnika, a pozostałe możliwości pozostawiam wam do samodzielnego wykonania 🙂

Demo: efekt 2

Elekt #3: Slide+Fade

Połączmy oba poprzednie efekty. Niech przesłona pojawia się zmieniając przezroczystość, a ikonka w wyjeżdża z dowolnej strony obrazka. Tu również przygotujmy 3 warianty.

Demo: efekt 3

Efekt #4: Zoom

Tym razem zajmijmy się wjeżdżaniem sprzed i zza ekranu. Łącząc wszystkie możliwe kombinacje otrzymamy 4 ciekawe efekty.

Demo: efekt 4

Efekt #5: Move

Kolejny efekt nieco bardziej wykorzystuje możliwości CSS3. Używana własność transform nie jest jeszcze w pełni dostępna w niektórych przeglądarkach, więc będziemy posiłkować się prefiksami. Niech ikonka zasłania tylko część obrazka, a on sam niech przesunie się tak, by jego środek wciąż pozostawał widoczny.

Demo: efekt 5

Efekt #6: Rotate

Własność transform daje nam również efekt obracania elementów – wykorzystajmy to. Sprawmy, by przesłona z ikonką obracały się przy wjeżdżaniu na obrazek.

Demo: efekt 6

Podsumowanie

Jak widzicie tworzenie efektów przy pomocy CSS nie jest takie trudne – moim zdaniem jest dużo łatwiejsze niż w jQuery, zwłaszcza dla początkujących webmastahów 😉

Programista (PHP/MySQL, Node.js/MongoDB), koder (HTML/CSS/JS), ale od biedy nawet layout machnie ;)

Send this to a friend