Ostatnia aktualizacja: 

Dwustronna karta w CSS

Najedź myszką i zobacz jakie dane ukrywają się po drugiej stronie danego elementu HTML. Świetny sposób na prezentacje dodatkowych, ukrytych treści!

CSS
10m 14s
11.800+ wyświetleń
461+ pozytywnych reakcji

Obracający się div w samym CSS

Czasami może zdarzyć się potrzeba gdzie elementy na naszej stronie będą musiały odsłaniać więcej treści przy interakcji użytkownika. Jest to popularne w różnego rodzaju galeriach - w tej lekcji dowiesz się jak stworzyć pojedynczy div, który obróci się przy interakcji użytkownika - odsłaniając jego "tył", na którym możemy umieścić więcej informacji na temat danego elementu.

Transkrypt wideo

Cześć witajcie na kodu.je! Z tej strony Wojtek. W tym odcinku stworzymy animowaną dwustronną kartę. Zapraszam!

[ Intro kodu.je ]

Czasami na naszych stronach www chcielibyśmy aby element po najechaniu myszką zmienił swoją treść lub zmienił sposób jej prezentacji.

W tym odcinku stworzymy sobie własnie taką kartę, która po najechaniu myszką odwróci się i będziemy widzieli to co się za nią znajduje.

Nasz markup będzie bardzo prosty. Stworzymy sobie pojedynczego diva
o klasie flip-card. Możemy zamknąć nasz markup i przejdźmy do stylowania. Nasz główny selektor flip-card będzie kontenerem dla całego naszego elementu ustawmy mu szerokość na 360px. I wysokość 450px.

Zaokrąglimy to troszkę o 6px I ustawimy tło na kolor czarny, tak abyśmy widzieli gdzie ten element się znajduje na naszej stronie tego kontenera nie będziemy w ogóle animowali animowane będą tylko nasze pseudoelementy after i before one będą bardzo podobne do siebie więc
wymienimy po przecinku które elementy chcemy ostylować według reguł wewnątrz klamerek ustawmy im content na wartość pustą
szerokość na 100% rodzica tak samo wysokość.

Wypozycjonujemy je absolutnie względem naszego rodzica flip-card
ustawmy im może tło na kolor biały jak widzimy przykryły one nam tą czarną część naszego kontenera. Możemy je w sumie również zaokrąglić
na 6px, tak samo jak rodzica ustawmy im box-sizing na border-box
no i ustawimy im właściwość border na 3px style solid no i o kolorze pochodnym czarnego.

Więc mamy naszą kartę, pseudoelement ::before będzie to przód naszej karty a pseudoelement ::after - tył.

Tak więc ostylujmy sobie tego aftera i nadajmy mu jakiś prosty background w postaci gradientu i zdefiniujmy, że chcemy aby gradient miał ustawiony kierunek na -45 stopni i nadajmy mu kolor pochodny do zielonego z palety barw koduje.

Tą regułę sobie skopiujemy
aż do 5px no i jakąś pochodną tego koloru
też od 5px do samego końca czyli 10px
tutaj daliśmy jedną dziewiątkę za dużo w naszych kolorach
widzimy już efekt, działa to w ten sposób że ustalamy kąt pod którym nasz gradient ma biec oraz, że chcemy aby od 0 do 5px nasz kolor był ustawiony na #34b399 następnie od 5px do 10px ustawiony był kolor #8afae3.

Więc to jest tył naszej karty my będziemy chcieli, aby po najechaniu myszką na tą kartę, ona nam się odwróciła, tak więc ustawmy sobie na naszym flip-cardzie stan hover, czyli w momencie gdy najedziemy na samego flipcarda - nie na pseudoelement - to chcielibyśmy aby ::after obrócił się nam o 180 stopni

Ten element nam się obraca, jednak nie widać za dużej różnicy
jeśli ustawimy sobie na samych naszych pseudoelementach właściwość transition z czasem trwania powiedzmy 0.6 sekundy i będziemy animować właściwość transform powiedzmy, że liniowo
to zobaczymy, że ten element nam się obraca.

Oczywiście nie w tej osi w której byśmy chcieli dlatego obrócimy go względem osi Y i jak widzimy ta nasza karta już się obraca.

Natomiast napotkaliśmy pewien problem
ponieważ, pomimo tego, że karta się obróciła - nadal widzimy jej tło.

Jest taka specjalna właściwość CSSa - może rzadko używana, czyli backface-visibility i możemy nadać jej wartość na naszych pseudoelementach na hidden.

Teraz gdy najedziemy myszką na naszą kartę to widzimy, że ona znika
to znaczy ona się obraca, a ten element dalej się tutaj znajduje, natomiast nie widzimy tyłu tego elementu.

Zobrazujemy to sobie jeszcze w ten sposób, że
nadamy na pseudoelemencie ::after content
o przykładowej wartości zauważymy go w lewym górnym rogu naszego elementu natomiast po najechaniu na niego myszką
ten test będzie odbity oraz pojawi się w prawym rogu naszej karty
jeśli nie chcielibyśmy widzieć ani tego tła,
ani właśnie tego tekstu to właśnie wtedy ustawiamy backface visibility na hidden.

W tym momencie nie widzimy już ani tła, ani wartości content
ustawmy więc sobie na pseudoelemencie ::before, który będzie przodem karty ustawmy, aby ten element domyślnie aby miał on ustawione jako tło obrazek karty ./10hearts.png, background-size na contain
czyli podany obrazek będzie zawarty w tym pseudoelemencie.

I jak widzimy po najechaniu myszką karta nam znika
tzn pseudoelement ::after się obraca i jest tak naprawdę przeźroczysty
no i widzimy tego ::before który znajduje się pod spodem
ale w momencie gdy tak naprawdę jeszcze nie najechaliśmy myszką
to chcielibyśmy, aby ten ::before był odbity o 180 stopni
ponieważ chcielibyśmy aby on się obracał przeciwnie do naszego pseudoelementu ::after.

Więc jeśli ustawimy na nim domyślnie transforma bez zadnych pseudoklas jak :hover ustawiamy rotateY na 180 stopni
to on domyślnie będzie czarny, nie będziemy widzieli jego treści
ponieważ ustawiliśmy na nim backface-visibility na hidden

Więc teraz w momencie gdy najedziemy na flipcarda myszką
to chcielibyśmy aby ten ::before to chcielibyśmy aby ten nasz before obrócił się do tego swojego początkowego stanu
tak, by znowu był obrócony przodem.

Dlatego damy tutaj rotate do 360 stopni - jak widzicie
mamy już ciekawy efekt - jednak nie widać tego obrotu z jednej prostej przyczyny.

Nie nadaliśmy żadnej perspektywy
na szczęście jest właściwość CSSa o tej samej nazwie
czyli perspective, możemy nadać jej wartość w pikselach i ustawić na naszym głównym selektorze ustalając jak duża ma być ta perspektywa.

Załóżmy, że damy ją na jakieś 10px i zobaczmy jaki będzie efekt
jak widzicie, ta perspektywa jest bardzo rozciągnięta
im większa wartość tym nasza animacja będzie troszkę bardziej subtelna
spróbujmy nadać temu 100px.

Jest troszkę lepiej dajmy tutaj może 400px, wysokości mamy tutaj 450px więc powinno być okej. No i widzimy już tą perspektywę
zauważcie, ze faktyczny element div.flip-card
czyli to nasze ciemne tło, nie jest w ogóle animowane.

Animujemy tylko pseudoelementy.
Ustawmy na naszym ::before background-color na biały, no i jak widzimy, ta nasza karta już jest animowalna.

Pozostało ustawić tło głównego kontenera na przeźroczyste -
w sumie całkowicie pozbądźmy się tej reguły i nasza karta jest już gotowa.

Domyślam się też, że zastanawiacie się czemu tutaj daliśmy 360 stopni
zamiast 0 stopni ponieważ jeśli tranzycja biegłaby od 180 stopni do 0,
to wtedy ta animacja przebiegała by w drugim kierunku
cofnęłaby się.

Jak widzicie, ta karta nie obraca się do końca
dlatego chcemy aby ta karta obracała się w lewo i jak widzimy teraz wszystko działa jak należy.

Najciekawszą częścią tego przykładu jest oczywiście backface-visibility
oraz sama perspektywa poza tym wystarczy pomysł i znajomość właściwości transform aby osiągnąć taki oto efekt.

Co sądzicie o tym przykładzie?
Koniecznie dajcie nam znać w komentarzu i jeśli podobało wam się to wideo, możecie zasubskrybować nasz kanał oraz klikną ikonkę dzwoneczka dzięki której otrzymacie powiadomienie na maila
oraz w samym serwisie YouTube.

Dzięki serdeczne za uwagę, trzymajcie się i do zobaczenia w kolejnym ciekawym przykładzie!

11 kwietnia 2022

Komentarz od autora

Obracanie karty w CSS to ciekawe sposób na przedstawienie dodatkowej treści. Jednak gdybym dzisiaj przygotowywał ten przykład, zrobiłbym kilka rzeczy inaczej.

Fakt, że korzystamy tylko z jednego znacznika div mija się z celem, poza pewnego rodzaju wyzwaniem i ćwiczeniem swoich umiejętności w CSS.

Docelowo na stronach internetowych nie skąpiłbym w znaczniki, bo transparentne semantycznie elementy takie jak div czy span mogą pojawiać się na naszej stronie masowo, tak długo jak ułatwiają nam stylowanie.

Warto jeszcze pamiętać, że jeśli umieszczamy na takiej karcie informacje istotne z perspektywy użytkownika, powinniśmy używać semantycznych znaczników.

Wsparcie perspective według CanIUSE

Nie ma czego się obawiać, to jedna z podstawowych właściwości współczesnej sieci :)

Data on support for the mdn-css__properties__perspective feature across the major browsers

Zobacz kod źródłowy

Nie mam nic do ukrycia! Eksperymentuj z moimi przykładami :) 

Poznaj Wojtka

Cześć! Nazywam się Wojciech Połowniak i jestem programistą Fullstack z zacięciem do tworzenia jakościowych materiałów szkoleniowych.

Uwielbiam automatyzację, VR oraz interaktywne sposoby przekazywania wiedzy. Tematy takie jak UX, dostępność czy devops również nie są mi obce.

Jestem też organizatorem meet.js oraz Techspeakerem pod banderą Mozilli... A to jeszcze nie wszystko.

Chcesz więcej?

Nie ma sprawy! Koduje to długie godziny darmowej treści dostępnej na wyciągnięcie ręki.

Newsletter

Jeśli chcesz być na bieżąco z najnowszymi inicjatywami od twórców koduje? Zapisz się na newsletter - nie spamujemy!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

W przyszłości, możemy udostępnić Ci informacje o dodatkowych kursach naszego autorstwa.

Najczęściej zadawane pytania

Jaka tematyka jest poruszana na Koduje?
expand_more
Mówimy o HTML, CSS i JavaScript - zarówno na backendzie, jak i frontendzie. Tematyka taka jak Devops, architektura i infrastruktura oprogramowania również pojawią się na kanale!
Czy mogę zaproponować temat kolejnych wideo?
expand_more
Oczywiście, że tak! Najlepiej sugerować materiały w sekcji komentarzy na YouTube 
Jak to możliwe, że Koduje jest darmowe? 
expand_more
Moją pasją jest dzielenie się wiedzą w sposób zrozumiały i klarowny, jednocześnie interaktwny i angażujący. Tworząc materiały, utrwalam też własną wiedzę. Wierzę, że za to widzowie nie powinni płacić
W sieci można znaleźć strony przypominające do koduje.pl, o co chodzi?
expand_more
Niestety, na przełomie lat wiele osób próbowało podszyć się pod Koduje i wykorzystać nasze materiały do promocji własnych kanałów dystrybucyjnych.  Jeśli masz wątpliwości, czy dana strona współpracuje z Koduje - daj nam o tym znać. Nie pochwalamy piractwa, plagiatu ani szarej strefy prawa autorskiego.
Czy prowadzicie szkolenia indywidualne?
expand_more
W chwili obecnej, niestety nie. Na przełomie lat prowadziłem kursantów przez ich przygodę z programowaniem, z czego każdy otrzymał pracę jako programista. Jeśli jesteś zainteresowany lekcjami indywidualnymi, zapraszam do kontaktu mailowego.
Czy oferujecie płatne kursy?
expand_more
W przyszłości nie wykluczamy możliwości tworzenia dedykowanych kursów o danych zagadnieniach. Zapisz się na nasz newsletter, aby być na bieżąco z naszymi najnowszymi płatnymi materiałami.
Jak mogę się z wami skontaktować?
expand_more
Czytamy komentarze na YouTube! Śmiało możesz zadać pytanie na dowolny temat pod którymkolwiek z naszych wideo. Poza tym możesz skontaktować się z nami mailowo bądź poprzez fanpage na Facebooku
Obecnym właścicielem marki jest Wojciech Połowniak. Zobacz zakładkę o nas!