Animowane okienko nowości w CSS3


5 stycznia 2014 / Michał Kortas


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.

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.

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.

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

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.

Oto efekt, który uzyskaliśmy:

Cały kod CSS

Przydatne informacje



11 odpowiedzi na “Animowane okienko nowości w CSS3”

  1. Mr.Mr pisze:

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

  2. Comandeer pisze:

    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

    • 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!

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

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

      • Comandeer pisze:

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

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

      • Comandeer pisze:

        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

  3. Dawid pisze:

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

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.