[CSS] Jak zrobić animowany tooltip?
Ten wpis ma 14 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.
Dzisiejszy tekst będzie dotyczył tworzenia efektownych dymków nad wybranym elementem podczas najechania na niego kursorem myszki.
Jest to użyteczna technika, która działa we wszystkich nowych przeglądarkach (poza IE).
Sekcja 1Kod HTML dla dymka
Na początek należy przygotować odpowiednią strukturę HTML, dla której stworzymy odpowiedni efekt. Kod wygląda następująco:
1 2 3 4 | <p class="tekst">
Element z dymkiem.
<span class="dymek">Dymek :)</span>
</p> |
Zdefiniowaliśmy paragraf z tekstem wewnątrz. Element span ma funkcję dymka dla zaznaczonego tekstu.
Sekcja 2Kod CSS - miejsce animacji
Kolejnym krokiem jest utworzenie kodu CSS odpowiedzialnego za uzyskanie efektu animacji pojawiającego się dymka z tekstem. Kod CSS wygląda następująco:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .tekst { background: #ececec; color: #555; cursor: pointer; font-family: 'Ubuntu Condensed', sans-serif; font-size: 20px; margin: 100px 75px 10px 75px; padding: 15px 20px; position: relative; text-align: center; text-transform: uppercase; width: 200px; -webkit-transform: translateZ(0); -webkit-font-smoothing: antialiased; } |
Zdefiniowaliśmy style dla tekstu w elemencie mającego klasę teskt. Wykorzystałem tutaj dwie opcje kodu CSS: -webkit-transform oraz -webkit-font-smoothing. Mają one funkcje zdecydowanie dekoracyjne. Pierwsza z nich odpowiada za obracanie elementu, a druga z nich odpowiada za wygładzanie czcionki tekstu.
Następnym krokiem będzie przygotowanie stylów CSS dla dymka. Kod wygląda następująco:
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 | .tekst .dymek { background: #b30; bottom: 100%; color: #fff; font-weight: 700; display: block; left: -25px; margin-bottom: 15px; opacity: 0; padding: 20px; position: absolute; visibility: hidden; width: 100%; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; -ms-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out; -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); } .tekst .dymek:before { bottom: -20px; content: " "; display: block; height: 20px; left: 0; position: absolute; width: 100%; } .tekst .dymek:after { border-left: solid transparent 10px; border-right: solid transparent 10px; border-top: solid #1496bb 10px; bottom: -10px; content: " "; height: 0; left: 50%; margin-left: -13px; position: absolute; width: 0; } .tekst:hover .dymek { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } |
Powyższy kod odpowiada za cały efekt animacji. Zdefiniowano efekt cienia - box-shadow, przejścia - transition i pozycji - transform. Dodatkowo za pomocą pseudoklasy :after utworzono trójkątny element dodający element wyjścia dymka.
Sekcja 3Podsumowanie
Mam nadzieję, że ten krotki wpis okaże się pożyteczny w tworzeniu stron WWW.
Demo z tego artykułu można zobaczyć tutaj: CSS animowany dymek
O autorze
