O ile pseudoelementy :before oraz :after odkryte kilka latu temu dziś już nikogo nie dziwią, tak niektóre ich odmiany nadal pozostają przedmiotem poszukiwań, jak Yeti dla kryptozoologi. Niektórym podobno udało się spotkać Yeti, niektórym podobno udało się dodać pseudoelement do elementu IMG. O ile w pierwszym przypadku nie mogę zaprzeczyć ani potwierdzić, to w drugim miałem tą miłą sposobność spotkać się z tym pseudoelementem w pobliżu IMG.
Bliskie spotkanie.
Choć może Cię to dziwić, to prawda. I o ile pewność co do istnienia pseudoelementu dla obrazka ze źródłem jest mała, to w przypadku obrazka bez źródła jest większa. Nie na każdej przeglądarce, ale jest to możliwe. Brak źródła, to nie tylko faktyczny brak atrybutu, ale również sytuacja kiedy zasób dla obrazka nie może zostać załadowany. To otwiera nam, być może nie szerokie, ale jakieś pole do wykorzystania tej sytuacji. Skoro tak, to zacznijmy od pierwszego przykładu.
Na początek HTML, który będziemy wykorzystawać w kolejnych przykładach:
<img src alt="Mario i Luigi" width="200" height="200" />
+
img {
font-family: "Lato", sans-serif;
/* nadajemy pozycję relatywną
i rozmiar, aby pseudoelement
ustawił się wewnątrz... obrazka
*/
position: relative;
display: inline-block;
}
img:before {
content: 'Obrazek "' attr(alt) '" nie załadował się...';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #eee;
/* a to tylko do
wyśrodkowania treści
*/
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
W tym przykładzie wstawiamy pseudoelement do środka obrazka (brzmi dziwnie, prawda?). Jest on pozycjonowany absolutnie, bo w innym przypadku znalazłby się nad lub pod ikoną broken image oraz tekstem z atrybutu alt. Mając możliwość nadania dowolnej wartości dla content, wykorzystujemy wartość atrybutu alt delikatnie ją modyfikując, aby była czytelniejsza.
Tak to będzie wyglądać:
Nic nie stoi na przeszkodzie, aby o problemie z obrazkiem poinformować użytkownika w sposób wizualny. Pamiętaj, że sytuacja dotyczy również braku atrybutu src. Jeśli więc zaimplementowałeś na swojej stronie jakiś preloading obrazków, to ten sposób możesz wykorzystać dopóki nie nadasz im wartości dla src.
img {
position: relative;
display: inline-block;
/* tekst wyrzucamy poza
zawartość - o tym na
samym końcu
*/
text-indent: -10000px;
}
img:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(loading.gif) no-repeat center center #fff;
}
Wartość dla content nie jest nam już potrzebna. Dodajemy natomiast background z animowanym GIFem, który ustawiamy na środku pseudoelementu.
I efekt jest taki:
Ale pseudoelement to nie tylko tekst i obrazek, to przecież zwykły pseudoelement, więc możemy robić z nim co chcemy. Również możemy dodać animację. Tym razem wykorzystamy właściwości z poprzedniego wpisu Sińce zdobyte w narożniku, czyli o zaokrąglonych ramkach z gradientem i nadamy gradient ramce. Dodatkowo będziemy animować jego położenie.
img:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 10px solid transparent;
background: linear-gradient(white, white),
repeating-linear-gradient(
-45deg,
#f4ea0b 0%,
#f4ea0b 25%,
#000000 26%,
#000000 50%
);
background-size: auto, 20px 20px;
background-clip: padding-box, border-box;
animation: border 5s linear infinite;
}
@keyframes border {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 100%;
}
}
Na powierzchni border-box (przezroczystej ramki) został ustawiony żółto-czarny, ukośny gradient. Wykorzystując animację zmieniamy jego położenie, co daje taki efekt:
Niestety metoda nie działa na Edge, Safari oraz iOS (Chrome i Safari). W przypadku Firefox, zarówno desktop jak i Android, nie działa natomiast właściwość content, zamiast niej widać zawartość atrybutu alt. Aby się tego pozbyć nadany jest ujemny text-indent.
Mam nadzieję, że ta zimowa przygoda natchnie Cię na poszukiwanie kolejnych wariantów wykorzystania pseudoelementu dla obrazka. Do przeczytania!
Przydatne linki:
Sińce zdobyte w narożniku, czyli o zaokrąglonych ramkach z gradientem.