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 ;)

  • wusztpl

    łoo, co to za obsuwa. miał być wtorek z frontendem, czekałem! 😉

    • nrm

      pewnie następny razem będzie… czwartek 😀

      • mck

        Czwartkowe frontendy… hm, to ja już wolę czwartkowe obiady, więc raczej nie. Piątek to już w zasadzie weekend, więc też odpada… Czyli wychodzi na to, że następnym razem to będzie poniedziałek 😉

  • Kriss

    Bardzo mi się efekt podoba, chętnie bym to u siebie wprowadził. Ale oczywiście znowu nie ma kodu w formie pluginu do WP 😛

    • czy na wszystko musi być plugin? bez przesady. wystarczy odpowiednio dobrana klasa i wkleić do custom css.

      • Kriss

        może i nie musi, jednak lobbuję za wprowadzeniem pluginów WP na webmastah.pl 🙂

        • nrm

          Sorry, to byłby absurd aby każde pierdnięcie było pluginem 😉 Poza tym tu nie ma co pluginować, to nauka efektów CSS 😉

        • Ja jestem na nie .i tak jak pisze @supernrm:disqus to byłaby gruba przesada, tworząc taki trywialny plugin do wp.

          @nrm: może tak zrób repo na githubie zeby każdy mógł pobrac 😉

          • nrm

            hmm, jest to jakaś myśl. Pomyślimy czy to ma być ogólne repo WM czy też każdy autor sobie o ile chce… dzięki za sugestię.

          • Fakt, ze kazdy moze miec wlasne widzimisię ale to i to jest dobrym rozwiązaniem. mozna polegać wtedy na feedbacku 😉

    • AvantaR

      Co Wy z tym WP? Czy teraz już serio wszystko się na tylko na WP stawia?

  • Łukasz Gruszka

    fajny tekst, ale mógłby lepiej służyć gdyby były wymienione pod każdym trikiem przeglądarki obsługujące wymagane elementy css, a tak trzeba do każdego motywu sprawdzać osobno w której przeglądarce możemy to użyć

    • mck

      Słuszna uwaga. Obiecuję się poprawić na przyszłość 🙂

  • Marcif

    IE 10+ raczej wymusza zastosowanie kodu JS na jakiejkolwiek stronie dla klienta.

  • Świetny artykuł 🙂 dzięki.

  • sbl

    Eeee nie ma pluginu do wordpressa? cofam suba rss ;_;

  • Pingback: Efekty CSS: podpisy obrazków (bez użycia JS) | webMASTAH()

  • rysiu

    A co z okrągłym obrazkiem? circle też podziala?

    • mck

      Oczywiście. Bez większych problemów. Trzeba tylko podrasować kilka elementów, żeby odbiór wizualny był lepszy 😉

  • compl

    Bardzo fajny poradnik. Na pewno skorzystam.
    Mam tylko jeszcze jedno pytanie.
    Skąd są zdjęcia użyte w demie? 😉

    • mck

      W demie, zarówno w menu jak i w stopce, są linki do autorki zdjęć 🙂

  • Dawid

    Witam, efekty w poradniku wyglądają świetnie, ale gdy samodzielnie próbuje je skopiować to nie działają. Nie wiem czy coś robię nie tak?

    • mck

      Na pewno kopiujesz wszystkie potrzebne style?

  • alex

    Kopiuje wszystko tak jak należy i również mi nie działa… jakaś podpowiedź?

  • Rudy102

    U mnie też nie działa, czego brakuję?
    HTML kopiuję do HTML a css do css i nie działa…

  • FerN

    Witam. Wszystko ładnie działa, tylko mógłby mi ktoś powiedzieć jak zrobić żeby zamiast kwadratu po środku miałbym tą samym figure jak tutaj?

Send this to 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!
HTML5, CSS3, JS (React, Angular, Ember, Vue), PHP, SQL
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!
HTML5, CSS3, JS (React, Angular, Ember, Vue), PHP, SQL