Duszki CSS
- Data publikacji
- Ostatnio edytowano
W tej części kursu CSS poznamy czym są duszki CSS (tzw. sprites CSS).
Technika duszki CSS pozwala przyspieszyć ładowanie strony internetowej, ponieważ po wykonaniu odpowiednich czynności, które poznamy w tej części kursu CSS, przeglądarka internetowa potrzebuje tylko jednego pliku graficznego do wyświetlenia wielu innych, mniejszych grafik, którymi były wypełnione tła różnych elementów HTML na naszej stronie.
Technika duszki CSS wymaga od nas przygotowania jednego pliku graficznego z odpowiednio rozmieszczonymi, mniejszymi grafikami, które znajdowały się wcześniej, w osobnych plikach graficznych.
Następnie dzięki właściwości background-position możemy odpowiednio manipulować pozycją tła obrazkowego elementu. Tym tłem jest jeden i ten sam plik graficzny.
Przykładowo, gdy chcemy utworzyć odnośniki, które będą wyłącznie wypełnione tłem obrazkowym i których tło obrazkowe będzie zmieniać się, gdy najedziemy na taki odnośnik kursorem naszej myszki...
...to zamiast korzystać z dziesięciu różnych obrazków, które zostały zaprezentowane poniżej (każdy obrazek ma takie same wymiary 64 × 64 dzięki czemu ułatwia to przygotowanie jednej grafiki oraz późniejszy dobór wartości w regułach CSS)...
...wykorzystamy jeden odpowiednio przygotowany obrazek składający się ze wszystkich dziesięciu obrazków, które zostały zaprezentowane powyżej.
A tak będzie wyglądał nasz obrazek:
Z poprzedniej części kursu CSS powinniśmy wiedzieć jak ustawić kilka elementów li obok siebie. Odnośniki a nie będą zawierały zawartości, dlatego musimy ustawić dla nich rozmiary takie same jak tło obrazkowe, którym zostaną one wypełnione (wcześniejsze obrazki miały rozmiar 64 × 64 dzięki czemu wiemy, że właściwość width oraz height dla elementów a ma mieć wartość 64px).
Nasz układ elementów HTML jak na razie powinien prezentować się następująco:
Pomocnicze kolory tła zostaną usunięte na samym końcu, z naszego układu elementów HTML.
Jak na razie nasz kod dokumentu HTML jest następujący:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
#menu {
list-style-type:none;
margin:0 auto;
padding:0;
height:64px;
width:380px;
background-color:#EEE;
}
#menu li {
float:left;
margin-left:15px;
}
#menu li:first-child {
margin-left:0;
}
#menu li a {
display:block;
width:64px;
height:64px;
background-color:#DDD;
}
</style>
</head>
<body>
<ul id="menu">
<li id="wikipedia"><a href="#"></a></li>
<li id="rss"><a href="#"></a></li>
<li id="facebook"><a href="#"></a></li>
<li id="share"><a href="#"></a></li>
<li id="twitter"><a href="#"></a></li>
</ul>
</body>
</html>
W momencie gdy wypełnimy (za pomocą właściwości background-image) elementy a naszym wcześniej przygotowanym obrazkiem...
...to nasz układ elementów HTML będzie prezentował się następująco:
Zwiększymy na chwilę granice naszych elementów a, aby zobaczyć, że są one wypełnione jednym dużym obrazkiem, który zawiera w sobie mniejsze grafiki.
Oczywiście nie chcemy, aby wszystkie elementy a zawierały w sobie jedną i tą samą cześć naszego obrazka, dlatego dzięki właściwości background-position możemy manipulować położeniem tła obrazkowego w danych elementach a.
Tło obrazkowe będziemy przesuwać w lewo oraz do góry, dlatego do tego celu należy użyć wartości ujemnych, które będą wielokrotnością liczby 64 (64, 128, 192 itd.), ponieważ rozmiar każdej mniejszej grafiki, wynosił wcześniej 64 × 64.
Każdy element a będzie posiadał różne wartości właściwości background-position (również w regule CSS odpowiadającej za wygląd elementu po najechaniu na niego kursorem myszki), dlatego elementy li zawierają unikalne atrybuty id ("facebook", "twitter" itd.), dzięki czemu ułatwi to nam utworzenie osobnych reguł CSS dla każdego elementu a.
Po odpowiednim doborze wartości dla właściwości background-position elementów a, ujrzymy następujący efekt:
A taki efekt ujrzymy po utworzeniu odpowiednich reguł CSS dla elementów a, które będą określać wygląd elementu a po najechaniu na niego kursorem myszki (w regułach tych została użyta właściwość background-position, dlatego tło obrazkowe zostaje przesunięte, gdy najedziemy kursorem myszki na element a).
Po usunięciu dodatkowego koloru tła oraz po przywróceniu rozmiaru 64 × 64 dla elementów a, nasze elementy HTML będą wyglądać jak te, które zostały zaprezentowane na początku tej części kursu CSS.
Kod dokumentu HTML znajduje się poniżej:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
#menu {
list-style-type:none;
margin:0 auto;
padding:0;
height:64px;
width:380px;
}
#menu li {
float:left;
margin-left:15px;
}
#menu li:first-child {
margin-left:0;
}
#menu li a {
display:block;
width:64px;
height:64px;
background-image:url('https://webkod.pl/images/all_icons.png');
}
#menu #wikipedia a {}
#menu #rss a { background-position:-128px 0; }
#menu #facebook a { background-position:-256px 0; }
#menu #share a { background-position:0 -64px; }
#menu #twitter a { background-position:-128px -64px; }
#menu #wikipedia a:hover { background-position:-64px 0; }
#menu #rss a:hover { background-position:-192px 0; }
#menu #facebook a:hover { background-position:-320px 0; }
#menu #share a:hover { background-position:-64px -64px; }
#menu #twitter a:hover { background-position:-192px -64px; }
</style>
</head>
<body>
<ul id="menu">
<li id="wikipedia"><a href="#"></a></li>
<li id="rss"><a href="#"></a></li>
<li id="facebook"><a href="#"></a></li>
<li id="share"><a href="#"></a></li>
<li id="twitter"><a href="#"></a></li>
</ul>
</body>
</html>
Rzeczą kontrowersyjną w naszym układzie elementów HTML jest fakt, że elementy a pozostają tak naprawdę bez zawartości, co może "nie spodobać się" robotom internetowym, które indeksują naszą stronę (analizują jej treść i dodają ją do wyszukiwarki internetowej, np. google).
Zobaczmy co się stanie, gdy do wspomnianych elementów a dodamy odpowiednią zawartość, czyli tekst, który określi dany link.
<body>
<ul id="menu">
<li id="wikipedia"><a href="#">Wikipedia</a></li>
<li id="rss"><a href="#">RSS</a></li>
<li id="facebook"><a href="#">Facebook</a></li>
<li id="share"><a href="#">Share</a></li>
<li id="twitter"><a href="#">Twitter</a></li>
</ul>
</body>Rezultat:
Poprzez dodanie tekstu do elementów a, sprawiliśmy że owe elementy nie są już elementami pustymi, jednak rozwiązanie jednego problemu narodziło kolejny problem, ponieważ nie chcemy, aby na tle obrazkowym naszych elementów a znajdował się tekst, który będzie przesłaniał tło obrazkowe danego elementu HTML.
Wspomniany problem możemy rozwiązać w bardzo prosty sposób (oszukując nieco rzeczywistość), wystarczy że dodamy właściwość text-indent wraz z dużą ujemną wartością do naszych elementów a.
Właściwość text-indent odpowiada za utworzenia wcięcia w danym elemencie HTML, w jego pierwszej linijce zawartości.
Dzięki temu że nasza wartość właściwości text-indent będzie ujemną wartością, to tekst zostanie przesunięty w lewą stronę, a nie w prawą (jeżeli coś nie mieści się po lewej stronie okna przeglądarki internetowej, to w przeglądarce nie pojawi się dolny suwak służący do przewijania jej niemieszczącej się zawartości).
Nasz układ elementów HTML ponownie wygląda jak ten zaprezentowany na początku tej części kursu CSS:
Kod dokumentu HTML znajduje się poniżej:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
#menu {
list-style-type:none;
margin:0 auto;
padding:0;
height:64px;
width:380px;
}
#menu li {
float:left;
margin-left:15px;
}
#menu li:first-child {
margin-left:0;
}
#menu li a {
display:block;
text-indent:-99999px;
width:64px;
height:64px;
background-image:url('https://webkod.pl/images/all_icons.png');
}
#menu #wikipedia a {}
#menu #rss a { background-position:-128px 0; }
#menu #facebook a { background-position:-256px 0; }
#menu #share a { background-position:0 -64px; }
#menu #twitter a { background-position:-128px -64px; }
#menu #wikipedia a:hover { background-position:-64px 0; }
#menu #rss a:hover { background-position:-192px 0; }
#menu #facebook a:hover { background-position:-320px 0; }
#menu #share a:hover { background-position:-64px -64px; }
#menu #twitter a:hover { background-position:-192px -64px; }
</style>
</head>
<body>
<ul id="menu">
<li id="wikipedia"><a href="#">Wikipedia</a></li>
<li id="rss"><a href="#">RSS</a></li>
<li id="facebook"><a href="#">Facebook</a></li>
<li id="share"><a href="#">Share</a></li>
<li id="twitter"><a href="#">Twitter</a></li>
</ul>
</body>
</html>
Cały przykład można pobrać klikając w następujący odnośnik.
W następnej części kursu utworzymy ruchome tło w elemencie HTML.