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

Send this to a friend