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.
1 2 3 4 5 6 7 | <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.
1 2 3 4 | .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.
1 2 3 4 5 6 7 8 | .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”.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | .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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | .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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | .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; } |
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ąć.
Dzięki, poprawię to. Faktycznie mogłem od razu podlinkować, choć w zamyśle miałem tylko pokazać, jak stworzyć sam efekt.
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.
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.
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
Ostatnio zdecydowanie zabrakło tutaj artykułów dotyczących CSS3… Mam nadzieję, że będą się pojawiały regularniej :)
Zajmę się rozruszaniem tej kategorii. Dzięki za komentarz