chevron-left chevron-right

[CSS] Jak zrobić kolorowe zaznaczenie tekstu?

Po dłuższej przerwie postanowiłem napisać nowy artykuł związany z arkuszami stylów CSS.
Bardzo możliwe, że kiedyś spotkałeś/aś się na stronie WWW z dość nietypowym sposobem zaznaczania tekstu, który zamiast domyślnego koloru zaznaczenia miał jakiś inny.
W tym artykule dowiesz się jak to można zrobić.

Najpierw musimy określić dla jakiego elementu strony ma występować to efektowne podkreślenie. Dla naszego ćwiczenia takie zaznaczenie będzie odnosiło się do nastepującej struktury strony:

<p id="niebieski">Róży a Pan świata wie, że spudłuje. szarak, gracz nie zdradzić swego roztargnienia: Prawda - smyk w powiecie. Lubił bardzo dobitnie malował.
</p><p id="czerwony">Nawet stary Dąbrowskiego usłyszeć mazurek. biegał po wolności wykwita. Tylko smutno, że zbyt wykwintny na złość Rejentowi, Że ją witali.
</p>

Jak widać, to nie jest nic skomplikowanego. Teraz pora na odpowiednie style CSS, które nadadzą trochę magii naszej stronie:

#czerwony::selection {
	background: red;
	color: #fff;
}
#czerwony::-moz-selection {
	background: red;
	color: #fff;
}
#niebieski::selection {
	background: blue;
	color: #fff;
}
#niebieski::-moz-selection {
	background: blue;
	color: #fff;
}

Patrząc na powyższy kawałek kodu widać, że wykorzystaliśmy pseudoklasę selection oraz jej odpowiednika dla przeglądarki Mozilla Firefox -moze-selection.
Widać też, że kawałki kodu się powtarzają. Niestety nie da się tego uniknąć i zapisać #niebieski::selection, #niebieski::-moz-selection w jednej linii, a to dlatego, że wtedy efekt nie będzie działał w przeglądarce Firefox.
Efekt będzie działał w przeglądarkach Mozilla Firefox, Opera, Google Chrome, Safari oraz w Internet Explorer 9.
W starszych wersjach Internet Explorera efekt nie zadziała.
Lecz muszę stwierdzić, że nowa wersja IE jest przeglądarką z którą w końcu będzie można dobrze pracować przy budowaniu stron WWW.
Jeśli jesteś fanem/fanką Internet Explorera to polecam Ci zainstalowanie jej najnowszej wersji i nie zrażaj się tym, że jest to wersja beta (można ją zainstalować w systemach Windows Vista i nowszych).

Demo z powyższego przykładu można zobaczyć pod tym linkiem: kolorowe zaznaczenie tekstu w CSS

  • Comandeer

    Ach, te stare dobre czasy, gdy robiło się stronę z czarnym tekstem i czarnym kolorem zaznaczenia 😀 Trochę wkurzające, że fx wciąż potrzebuje prefiks – nawet IE go nie potrzebuje 😉
    Co do IE 9 – może i się będzie dobrze pracować, lecz patrząc na html5demos.com czy cainuse.com IE 9 i tak zostaje nieco w tyle (co nie przeszkadza mu być najlepszym w „oficjalnym” teście W3C :/). Jedyne co popieram, to sprzętowa akceleracja dla grafiki 3D. Czekam aż Google się kapnie, że tego w Chrome brakuje 😀

  • Szczerze mówiąc nie zdążyłem wdrożyć się jeszcze w css3, ale muszę przyznać, że bardzo fajny efekt. Szkoda, że cechy w wersji 3 jeszcze nie są dobrze interpretowane przez wszystkie przeglądarki. No ale co poradzić. Mam nadzieje, że Level 3 szybko stanie się standardem w przeglądarkach 🙂 Dzięki za artykuł.

  • Nasz wspólny znajomy Puck z forumweb.pl miał coś takiego na stronie i właśnie się zastanawiałem jak to jest zrobione 🙂 A że nie miałem czasu na zanalizowanie kodu strony to trudno. Ważne, że tutaj natrafiłem na rozwiązanie 🙂 W sumie sam miałem pisać artykuł jak to zrobić 😀

  • Karol

    Dziękuję bardzo! Właśnie tego szukałem ;D