[CSS] Jak zrobić animowany tooltip?
This post is 14 years old. Browsers and tools may have changed since then, so check the code against current documentation before you use it.
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).
Section 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.
Section 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.
Section 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
About the author
