HTML5 & CSS3

Animowane okienko nowości w CSS3

W dzisiejszym, niedzielnym wpisie zajmiemy się czymś trochę lżejszym. Przygotujemy sobie okienka newsów, wyświetlające grafikę, aktywne po najechaniu na nie kursorem lub wywołaniu ich z poziomu klawiatury. Całość oparta będzie wyłącznie na możliwościach CSS3, więc nie będziemy musieli ładować żadnych ciężkich skryptów czy biblioteki jQuery. Zapraszam Was wszystkich do lektury.

Kod HTML

Nasz kod HTML będzie bardzo prosty. W przykładzie zajmiemy się tylko jednym, pojedynczym okienkiem, które oczywiście będziemy mogli później powielać, w zależności od potrzeb.

<a href="#" class="news">
<img src="img.jpg" alt="News #1">
<div class="info">
<h3>Tytuł wiadomości</h3>
<p>Krótki wstęp, który pojawi się na obrazku. Może on być zarówno zajawką artykułu lub rozszerzeniem tytułu.</p>
</div>
</a>

Kod CSS

Na początku warto określić wymiary okienka. Przyjąłem, że będzie to 400x300 [px]. Wartość tę przypisujemy do elementu .news oraz do znacznika <img>, znajdującego się bezpośrednie we wspomnianym odnośniku.

.news, .news > img {
width: 400px;
height: 300px;
}

W tej chwili na stronie widnieje zdjęcie, a pod nim zajawka wraz z tytułem. Z założenia, dwa ostatnie elementy mają pojawić się dopiero po aktywowaniu obrazka, więc powinniśmy ukryć treść wychodzącą poza obszar odnośnika .news. Dodatkowo nadajmy mu jeszcze wartość relative dla właściwości position. Dzięki temu będziemy mogli skutecznie pozycjonować elementy w jego wnętrzu.

.news {
display: block;
float: left;
margin: 10px;
position: relative;
overflow: hidden;
color: #fff;
}

Dobrze, teraz zaplanujmy sobie wygląd wybranych elementów w stanie „spoczynku”.

.news .info {
position: absolute;
bottom: -300px;
opacity: 0;
margin: 0;
display: block;
padding: 15px;
width: 370px;
background: rgba(0,0,0,0.7);
transition: 0.5s linear;
}

.news img {
display: block;
margin: 0 0;
width: 400px;
height: 300px;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
transition: 0.5s linear;
}

.news .info h3, .news .info p {
opacity: 0;
}  

.news .info h3 {
transition: 0.2s linear 0.7s;
} 

.news .info p {
transition: 0.2s linear 0.9s;
}

Nadaliśmy odpowiednie rozmiary dla okienka, wypełniamy przezroczystym tłem <div> z tytułem i zajawką, oraz zapewniamy tym elementom działanie właściwości transition.

Na samym końcu formatowania w CSS3 opiszmy jeszcze zmianę stanu, którą zaplanowaliśmy na wstępie. Ja postanowiłem delikatnie obrócić zdjęcie (za pomocą właściwości transform), wysunąć z doły <div> z informacjami o artykule oraz delikatnie wyświetlić – w odpowiedniej kolejności – tytuł i tekst dodatkowy. Wszystko to zawarte jest w poniższym kodzie.

.news:hover .info, .news:focus .info {
position: absolute;
bottom: 0;
opacity: 1;
margin: 0;
display: block;
padding: 15px;
width: 370px;
background: rgba(0,0,0,0.7);
}   

.news:hover img, .news:focus img {
display: block;
margin: -15px -15px;
width: 450px;
height: 350px;
-webkit-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-moz-transform: rotate(3deg);
transform: rotate(3deg);
}  

.news:hover .info h3, .news:hover .info p, .news:focus .info h3, .news:focus .info p {
opacity: 1;
}

Oto efekt, który uzyskaliśmy:

Cały kod CSS

.news {
display: block;
color: #fff;
float: left;
margin: 10px;
position: relative;
overflow: hidden;
} 

.news, .news > img {
width: 400px;
height: 300px;
} 

.news .info {
position: absolute;
bottom: -300px;
opacity: 0;
margin: 0;
display: block;
padding: 15px; 	width: 370px;
background: rgba(0,0,0,0.7);
transition: 0.5s linear;
}

.news:hover .info, .news:focus .info {
position: absolute;
bottom: 0;
opacity: 1;
margin: 0;
display: block;
padding: 15px;
width: 370px;
background: rgba(0,0,0,0.7);
}

.news img {
display: block;
margin: 0 0;
width: 400px;
height: 300px;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
transition: 0.5s linear;
}

.news:hover img, .news:focus img {
display: block;
margin: -15px -15px;
width: 450px;
height: 350px;
-webkit-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-moz-transform: rotate(3deg);
transform: rotate(3deg);
}

.news .info h3, .news .info p {
opacity: 0;
} 

.news:hover .info h3, .news:hover .info p, .news:focus .info h3, .news:focus .info p {
opacity: 1;
} 

.news .info h3 {
transition: 0.2s linear 0.7s;
} 

.news .info p {
transition: 0.2s linear 0.9s;
}

Przydatne informacje

komentarzy 11

  • Awatar
    Mr.Mr

    5 stycznia 2014 15:07

    IMO dobrze by było gdyby gdzieś w html’u zmieścić jeszcze link tak żeby dało się kliknąć w całe okienko i żeby mogło działać jako taki duży link. Ewentualnie dałbym jakiś guzik lub link tekstowy.
    Jeśli to pierwsze rozwiązanie to przydałoby się też dodać cursor:pointer żeby było wryaźnie widać, że da się w to kliknąć.

    Odpowiedz
    • Awatar
      Michał Kortas

      5 stycznia 2014 16:28

      Dzięki, poprawię to. Faktycznie mogłem od razu podlinkować, choć w zamyśle miałem tylko pokazać, jak stworzyć sam efekt.

      Odpowiedz
  • Awatar
    Comandeer

    5 stycznia 2014 18:14

    bardzo dobrze, że są style dla :focus. bardzo źle, że te elementy są niefocusowalne ;) w tym wypadku zastanowiłbym się czy z .news po prostu nie zrobić linka. IMO będzie to najprostsze rozwiązanie

    Odpowiedz
    • Awatar
      Michał Kortas

      5 stycznia 2014 18:20

      No właśnie zauważyłem, że focus nie działa już po publikacji :P
      Zamiast .news dam link, to też rozwiąże „problem”, o którym wspomnieliśmy niżej.
      Dzięki!

      Odpowiedz
      • Awatar
        Michał Załęcki

        5 stycznia 2014 18:23

        Zawsze można dodać po prostu tabindex=”0″.

        Odpowiedz
      • Awatar
        Michał Kortas

        5 stycznia 2014 18:28

        Tak, ale nie ma co komplikować, bo okienko i tak będziemy musieli prędzej czy później podlinkować. A to załatwi nam też brak focusowania.

        Odpowiedz
      • Awatar
        Comandeer

        6 stycznia 2014 19:34

        tak, i później widzę span[tabindex=0] z dorobionym onclickiem do odpalenia linku… nie, dzięki ;)
        tabindex to ostateczny hack, gdzie już naprawdę nie można dać ani linku, ani buttona (wówczas i tak należy pamiętać o ARIA i atrybucie role) – czyli prawdę powiedziawszy jakiś promil procenta przypadków
        btw proponuję opornym odtworzenie PEŁNEGO zachowania linku na span z użyciem HTML, ARIA, JS i CSS. życzę powodzenia ;)

        Odpowiedz
      • Awatar
        Michał Załęcki

        6 stycznia 2014 21:45

        tabindex=”0″ jest bardzo przydatny, właśnie w kontekście dostępności, za przykład może posłużyć menu: https://github.com/MichalRazorZalecki/responsive-navigation.

        Nie przypominam sobie, żebym gdziekolwiek pisał o onClick do przekierowywania.

        Odpowiedz
      • Awatar
        Comandeer

        6 stycznia 2014 21:54

        Ok, w przypadku menu coś takiego działa. ale tutaj mówimy o nieinteraktywnym elemencie, który de facto nie robi nic, więc jego dostępność z klawiatury jest kwestionalna. dla AT treść i tak będzie dostępna (bo nie jest ukryta) a każdy normalny user ma myszkę (pomijając mobilne).
        taki kafelek bez linka jest po prostu kaleki, dlatego też po prostu [tabindex=0] jest tutaj IMO strzałem w kolano

        Odpowiedz
  • Awatar
    Dawid

    5 stycznia 2014 19:51

    Ostatnio zdecydowanie zabrakło tutaj artykułów dotyczących CSS3… Mam nadzieję, że będą się pojawiały regularniej :)

    Odpowiedz

Zostaw odpowiedź