Pewnie miałeś już w życiu styczność z dymkiem. Czy to podpalając dywan w pokoju rodziców w wieku pięciu lat, czy też paląc z kolegami swoją pierwszą fajkę (pokoju, oczywiście!). W HTML dymki są bardziej pozytywnymi wydarzeniami. Stosuje się je do przekazania dodatkowych informacji użytkownikowi, których przed daną akcją nie chcemy pokazywać. Możemy się spotkać z dymkami walidacji formularzy, gdzie informujemy o błędniem wypełnionym polu, czy też szczegółach jakiejś opcji po najechaniu myszą.
Dymek najczęściej ma kształt prostokąta z zaokrąglonymi narożnikami i mały trójkącik na dole pozycjonujący cały dymek. Czyli mamy tu dwa elementy. Pokażmy kod HTML i stylowanie CSS takiego dymka.
<div class="dymek">To jest informacja<span></span></div>
+
div.dymek{
padding:20px;
background:#f00;
border-radius:10px;
position:relative;
display:inline-block;
}
div.dymek span{
position:absolute;
left:20px;
bottom:-5px;
width:10px;
height:10px;
display:block;
transform:rotate(45deg);
background:inherit;
}
Możemy nieco uprościć kod HTML i zamiast elementu SPAN, użyć pseudoelementu :after.
<div class="dymek">To jest informacja</div>
+
div.dymek{
padding:20px;
background:#f00;
border-radius:10px;
position:relative;
display:inline-block;
}
div.dymek:after{
content:'';
position:absolute;
left:20px;
bottom:-5px;
width:10px;
height:10px;
display:block;
transform:rotate(45deg);
background:inherit;
}
W obydwu przypadkach efekt będzie identyczny (poszczególne elementy możesz dostrzeć najeżdżając na dymek myszą):
Użyliśmy jednak dwóch elementów.
Czas zrobić prawdziwą rewolucję w produkcji dymków i wykonać go wykorzystując tylko jeden element HTML!
Wykorzystamy do tego właściwość background elementu. Tak, tak! Tylko kolor tła. Może w tej chwili wydaje się to niemożliwe, ale zacznijmy od rysunku, który sporo wyjaśni. Granice elementu zaznaczone są linią przerywaną.
Jako, że możemy dodawać do elementu kilka teł, więc wykorzystamy ten fakt. Będą to więc cztery tła o kształcie okręgu (tu zielone), jedno tło wypełniające całą szerokość, a o wysokości pomniejszonej o dwa promienie narożnika oraz wysokość języka (tu czerwone), jedno tło (tu niebieskie) o szerokości pomniejszonej o dwa promienie narożnika i wysokości pomniejszonej o wysokość języka, oraz dwa kwadratowe tła, w których gradient koloru obrócimy odpowiednio o 45 stopni oraz 135 stopni, otrzymując z każdego tego tła, połówkę trójkąta, a razem utworzą tenże trójkąt - język dymka.
Tak wyglądają kolejne tła:
Dwa duże prostokąty:
Cztery narożniki:
Język:
A tak już cały dymek, czyli powyższe złożone w całość:
oraz jego kod HTML oraz CSS. W kodzie CSS opisałem, które właściwości background-size odpowiadają, którym tłom. Kolejność background-image oraz background-position jest identyczna.
<div class="dymek">To jest informacja</div>
+
div.dymek{
display:inline-block;
background-image: linear-gradient(red, red),
linear-gradient(red, red),
linear-gradient(45deg, transparent 50%, rgba(255, 0,0,1) 50%),
linear-gradient(135deg, rgba(255,0,0,1) 50%, transparent 50%),
-webkit-radial-gradient(center, ellipse cover, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 49%,rgba(201,201,201,0) 55%,rgba(125,185,232,0) 100%),
-webkit-radial-gradient(center, ellipse cover, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 49%,rgba(201,201,201,0) 55%,rgba(125,185,232,0) 100%),
-webkit-radial-gradient(center, ellipse cover, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 49%,rgba(201,201,201,0) 55%,rgba(125,185,232,0) 100%),
-webkit-radial-gradient(center, ellipse cover, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 49%,rgba(201,201,201,0) 55%,rgba(125,185,232,0) 100%);
background-size: calc(100% - 10px) calc(100% - 5px), /* prostokątne tło niebieskie */
100% calc(100% - 15px), /* prostokątne tło czerwone */
5px 5px, /* lewa połówka języka */
5px 5px, /* prawa połówka języka */
11px 11px, /* kółko lewy, górny róg */
11px 11px, /* kółko prawy, górny róg */
11px 11px, /* kółko prawy, dolny róg */
11px 11px; /* kółko lewy, dolny róg */
background-position: 5px 0,
0 calc(100% - 10px),
13px 100%,
18px 100%,
-1px -1px,
calc(100% + 1px) -1px,
calc(100% + 1px) calc(100% - 4px),
-1px calc(100% - 4px);
background-repeat:no-repeat; /*tu jedna właściwość będzie zastosowana do wszystkich teł */
padding:20px 20px calc(20px + 5px) 20px;
}
Jeśli dzisiejszy dymek okopcił trochę Twój mózg, to wyskocz na spacer, aby złapać świeżego powietrza i koniecznie wróć na następny wpis!
Przydatne linki:
Wiele teł dla jednego elementu
Gradient liniowy dla tła
Gradient kołowy dla tła