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

14 komentarzy

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 🙂

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

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ą.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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+

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