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