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

W poprzednim wpisie zaprezentowałem wam kilka ciekawych efektów dotyczących miniaturek. Tym razem zajmę się efektami podpisów obrazków, które, sądząc po bogatej palecie skryptów JS, cieszą się dużą popularnością i są obiektem pożądania każdego szanującego się webmastera 🙂

Demo

HTML+CSS

Tak jak poprzednim razem kod html ogranicza się do dwóch elementów – odnośnika i obrazka. Jedyną znaczącą różnicą jest dodatkowy atrybut data-title, w którym umieszczamy podpis.

Zdefiniujmy też podstawowy wygląd obrazków i przygotujmy pseudoelementy :before i :after do dalszych animacji. Warto zauważyć, że pseudoelement :after będzie pobierał treść wprost z atrybutu data-title.

Efekt #1: Fade

Na pierwszy ogień najprostszy efekt – fade, czyli pojawianie się podpisu poprzez zmianę przezroczystości. Podpis możemy umieścić zarówno u góry, u dołu, jak i na środku zdjęcia.

Jako że dodatkowa półprzezroczysta przesłona może nie pasować do każdej strony (wszak nie każdy chce, by mu coś jeszcze zdjęcia przysłaniało), została wydzielona i jest dostępna pod dodatkową klasą.

Demo: efekt 1

Efekt #2: Slide

Drugi efekt – slide – pozwala na stworzenie mnóstwa kombinacji, gdyż zarówno podpis jak i przesłona mogą wjeżdżać z dowolnej strony. W demie znajdziecie kilka innych przykładów, choć i one nie wyczerpują możliwości tego efektu.

Demo: efekt 2

Efekt #3: Move

Kolejny efekt również jest rozwinięciem jednego z prezentowanych poprzednio pomysłów. Jako że podpis wjeżdża z góry lub z dołu i może przesłonić część zdjęcia, wycentrujmy obrazek, by nie tracić jego istotnych części.

Demo: efekt 3

Efekt #4: Uncover

Jest to efekt bardzo zbliżony do poprzedniego. Główną różnicą polega na tym, że sam podpis znajduje się pod zdjęciem i jest przez nie odsłaniany.

Demo: efekt 4

Efekt #5: Corner

Zmieniamy nieco podejście. Tym razem podpis będzie pojawiał się w rogu, z którego wyjedzie przesłona. Sam efekt jest bardzo prosty i polega wyłącznie na manipulowaniu wielkością obramowania.

Demo: efekt 5

Efekt #6: Ribbon

Na koniec coś zupełnie innego – podpis jako popularna wstążka, która wjeżdża zza zdjęcia. Wszystko to dzięki odpowiedniemu ustawieniu opóźnień animacji.

Demo: efekt 6

Wsparcie przeglądarek

Opera

Współczesne przeglądarki nie mają większych problemów z powyższymi efektami. Zarówno Firefox 16+, IE 10+, Chrome 26+, Opera 15+ i Safari 3.1+ radzą sobie wyśmienicie. Wyjątkiem tradycyjnie już są starsze wersje IE, co zupełnie nikogo już nie dziwi… i Opera na silniku Presto, który co ciekawe nie radzi sobie z animowaniem pseudoelementów.

16+ 26+ 10+ 15+ 3.1+

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

  • Marcin Drechna

    Czy możecie dodawać również zip do ściągnięcia, a nie tylko prezentować demo?

    • mck

      @Marcin nie wiem czy jest tu co ściągać, wszystko jest w artykule 🙂
      Ale jeśli tak bardzo wam zależy, to dorzucimy zipa jak tylko wrócimy z PHPcon-u.

      • *szeptem* github 😛

        • nrm

          będzie. Jak wrócimy to zrobimy githaba… 😉

      • Marcin Drechna

        Ja z przyzwyczajenie zawsze ściągam sobie fajne rzeczy na dysk, abym później w razie gdyby były problemy ze stroną miał to zapisane.

  • Rafał

    Powinni zaprzestać dalszej dystrybucji IE w pakiecie Microsoft’u. Tylko są problemy przez tą przeglądarkę i marnowanie wielu h na poprawę czegoś co na pozostałych przeglądarkach działa

    • mck

      Dlaczego? IE10 radzi sobie dobrze, a IE11 zapowiada się bardzo dobrze. Tak wiem, po dotychczasowych kontaktach z IE trudno w to uwierzyć 😉

      • Rafał

        No dobra, może po prostu mam traumę po ostatnich zabiegach na IE<9. Nie orientuje jak wygląda sytuacja na 10 i nie wiem jak będzie z 11. Mam nadzieje że tak jak napisałeś, w końcu coś zaczeli z tym robić.

  • W ogóle to ładna modelka 😉

    • nrm

      @emcek:disqus widzę ma tendencje do wyboru dobrych ilustracji do tekstów 😉

  • Pawel

    Witam, co prawda jestem początkujący ale prosiłbym o krótkie info: Otóż mam plik index.html w którym wklejam krótki kod: a href itd wskazany w górnej części strony w pliku style css umieszczam .title itd a póżniej kod z efektu jaki wybrałem. Oczywiście w index umieściłem kod odnośnie gdzie znajduje sie style.csss ale niestety efektu na zdjęciu 0 .. czy robie coś nie tak>

    • Grzegorz

      Mam ten sam problem, odpowie ktoś?

      • Piotrek

        a href=”#” data-title=”Lorem ipsum” class=”title fade-in

  • klaudia

    Witam,
    mam pytanie chciałabym zrobić taki efekt na miniaturkach zdjęć postów w formie grid.
    Jakieś wskazówki ?
    będę meeega wdzięczna !

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