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

26 komentarzy

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.

[button url=’/tutorial/csseffects/index.html’ size=’large’ style=’blue’]Demo[/button]

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.

[button url=’/tutorial/csseffects/index.html#effect-1′ size=’large’ style=’blue’]Demo: efekt 1[/button]

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 🙂

[button url=’/tutorial/csseffects/index.html#effect-2′ size=’large’ style=’blue’]Demo: efekt 2[/button]

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.

[button url=’/tutorial/csseffects/index.html#effect-3′ size=’large’ style=’blue’]Demo: efekt 3[/button]

Efekt #4: Zoom

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

[button url=’/tutorial/csseffects/index.html#effect-4′ size=’large’ style=’blue’]Demo: efekt 4[/button]

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.

[button url=’/tutorial/csseffects/index.html#effect-5′ size=’large’ style=’blue’]Demo: efekt 5[/button]

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.

[button url=’/tutorial/csseffects/index.html#effect-6′ size=’large’ style=’blue’]Demo: efekt 6[/button]

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 😉

26 komentarzy

Inne wpisy

Send this to a friend
webmastah.weekly
Cotygodniowa porcja linków ze świata WEBDEV BEZ spamu, TYLKO samo mięcho!
Zobacz poprzednie wydania. Dołącz do 2 tysięcy webdeveloperów!
HTML, CSS, JS, PHP, SQL, CLOUD, LINUX