Wszystko da się podświetlić

Data publikacji: 12.02.2007 | 22:39 Kategorie: XHTML & CSS

Ostatnio koduję jeden projekt, w którym mam linki. Kawałek tekstu linka jest wyświetlany pierwotnie na kolorem X. Z kolei drugi kawałek tekstu linka jest wyświetlany kolorem Y (w tle całego linka jest jeszcze jakiś tam background obrazkowy). Wszystko spoko loko, aż do momentu umieszczenia myszki nad naszym linkiem. Docelowym efektem, jaki mam uzyskać, jest zmiana koloru X na bardziej jaskrawy, koloru Y na bardziej jaskrawy oraz obrazka w tle na bardziej jaskrawy. W normalnych przeglądarkach można to uzyskać za pomocą ostylowania :hovera dla poszczególnych elementów. Mankament jest widoczny, gdy odpalimy nasz projekt pod IE :) (dziwne, prawda?). Otóż IE trawi efekt :hover tylko dla znacznika <a>...</a>, co bardzo miesza nam w szykach.
Gdy efekt :hover ma polegać tylko na tym, że kolor linka oraz obrazek w tle jest jaśniejszy, możemy wtedy użyć rozwiązania, jakim jest zastosowanie przezroczystości w CSS.

Efektem docelowym będzie otrzymanie mniej więcej takiego czegoś: Demo.

Najpierw trzeba napisać odpowiedni kod HTML. A więc do dzieła żołnierzu!

  1. <a href="#"><em>Tytuł poprzedniego newsa</em><br />18-sty-2007, 14:56&nbsp;&nbsp;&nbsp;Komentarzy: 36</a>

Pomiędzy <em>...</em> znajduje się pierwsza część linku o kolorze X. Poza tymi znacznikami znajduje się już druga część linku o kolorze Y. Reszta jest chyba jasna i tłumaczyć nie trzeba, prawda? Super :).

Teraz przejdę do tej ciekawszej części, czyli CSS. Tłem mojej strony będzie kolor tła menu, czyli #2D383C. Dodając jeszcze dwa podstawowe atrybuty, otrzymuję taki oto fragmencik kodu CSS dla całej sekcji body:

  1. body {
  2.     background: #2D383C;
  3.     font-family: Arial;
  4.     font-size: 12px;
  5. }

Do tej pory chyba wszystko jest jasne…

Przychodzi czas na ostylowanie mojego linka.
1. Element <a>...</a> jest domyślnie elementem wyświetlanym liniowo, czyli display: inline;. Ja muszę z niego zrobić element blokowy dlatego od razu jako pierwszą linijkę stylującą linki mogę napisać sobie display: block;.
2. NastÄ™pnymi linijkami kodu bÄ™dzie ustalenie rozmiarów naszego elementu <a>...</a>. Z racji, że jest to teraz element blokowy możemy mu spokojnie nadać rozmiar itp. Ja nadaÅ‚em mu taki rozmiar, jaki ma obrazek tÅ‚a, czyli 322×55px. Od razu ustawiamy sobie też padding i margin (u mnie na 0).
3. Teraz można okreÅ›lić obrazek w tle. Tutaj jest sprawa nastÄ™pujÄ…ca… Obrazek dla podstawowego linka oraz dla efektu :hover bÄ™dzie taki sam. Generalnie posÅ‚ugujemy siÄ™ tylko obrazkiem, który ma być w efekcie :hover. Obrazek, którego ja użyÅ‚em ma trochÄ™ pustego tÅ‚a, dlatego jest gifowski. Generalnie nie ma to wiÄ™kszego znaczenia czy obrazek jest z pustem tÅ‚em w formacie gif czy też nie, wszystko zależy od tego, jaki efekt chcemy uzyskać.
4. Podobnie jest z kolorem fontu, dla podstawowego linka oraz dla linka z efektem :hover. Dajemy kolor, który użylibyśmy właśnie w efekcie :hover (czyli ten jaśniejszy). U mnie jest to kolor #90938a.
5. Usuwam wszelkie podkreślenia dodając linijkę text-decoration: none;.
6. Teraz najważniejsze: dodajemy dwie linijki kodu określające stopień przezroczystości. Dlaczego dwie? Bo dla normalnych przeglądarek jest to inny kod niż dla IE.

  1. opacity: .75;
  2. filter: alpha(opacity=75);

Liczba 75 to stopień przezroczystości.
I tak oto otrzymujemy taki fragment kodu CSS:

  1. a {
  2.     display: block;
  3.     width: 322px;
  4.     height: 55px;
  5.     padding:0;
  6.     margin: 0;
  7.     background: url(link.gif) top no-repeat;
  8.     color: #90938a;
  9.     text-decoration: none;
  10.     opacity: .75;
  11.     filter: alpha(opacity=75);
  12. }

Teraz przychodzi pora na ostylowanie efektu :hover. Wbrew pozorom tutaj będzie znaaaacznie mniej papraniny i grzebaniny. Otóż wystarczy tylko zmienić stopień przezroczystości, aby w ogóle jej już nie było (czyli wszystkie elementy będą w 100% widoczne). Posłuży nam do tego ten fragment kodu:

  1. a:hover {
  2.     opacity: 1;
  3.     filter: alpha(opacity=100);
  4. }

Na razie nasz link cały będzie jednokolorowy, dlatego też nie bez kozery jego fragment umieściłem między <em>...</em>. Wystarczy teraz tylko odpowiednio go ostylować, zmieniając przy tym jego kolor (oczywiście dajemy wartość, która ma być wyświetlana w efekcie :hover, u mnie jest to: #82b149.
Tekst umieszczony w <em>...</em> jest domyślnie pochylony dlatego dodajemy linijkę, która sprawi, że będize on znowu prosty: font-style: normal;. Dodatkowo możemy pogrubić font (font-weight: bold;) oraz zmienić rozmiar np. na 13px (font-size: 13px;). I w ten sposób otrzymujemy taki kod:

  1. em {
  2.     font-style: normal;
  3.     font-weight: bold;
  4.     color: #82b149;
  5.     font-size: 13px;
  6. }

Końcowy kod CSS wygląda tak:

  1. body {
  2.     background: #2D383C;
  3.     font-family: Arial;
  4.     font-size: 12px;
  5. }
  6.        
  7. a {
  8.     display: block;
  9.     width: 322px;
  10.     height: 55px;
  11.     padding:0;
  12.     margin: 0;
  13.     background: url(link.gif) no-repeat;
  14.     color: #90938a;
  15.     text-decoration: none;
  16.     opacity: .75;
  17.     filter: alpha(opacity=75);
  18. }
  19.        
  20. a:hover {
  21.     opacity: 1;
  22.     filter: alpha(opacity=100);
  23. }
  24.        
  25. em {
  26.     font-style: normal;
  27.     font-weight: bold;
  28.     color: #82b149;
  29.     font-size: 13px;
  30. }

DomyÅ›lam siÄ™, że publikujÄ…c tÄ… metodÄ™ nie jestem pierwszym, który jÄ… odkryÅ‚. Ale cóż… Może przydać siÄ™ potomnym.

Zobacz również:

Dodaj do ulubionychDodaj ten wpis do: + Wykop + Delicious + Linkologia

Komentarze (7):

OSKAr   12.02.2007 | 23:06

Swego czasu podÅ›wietlane bannerki byÅ‚y bardzo ‘trendy’.
Ale przyda siÄ™, przyda ; )

tomq   13.02.2007 | 09:39

Ludwik powiem Ci, że Internet Explorer wcale nie miesza w szykach, żeby osiÄ…gnąć taki efekt jak zamierzaÅ‚eÅ› … Nie chodzi przecież o to, żeby po najechaniu na zawartość `a zmieniaÅ‚ siÄ™ jego kolor - tylko po najechaniu na linka - zatem po kÅ‚opocie masz, stosujÄ…c odpowiednie style dla:
a { }, em { }, a:hover { }, a:hover em { }

a no i pierwszy się przyczępię - stopień widoczności, a nie przezroczystości :>
transparency - przezroczystość
opacity - widoczność

Yano   26.02.2007 | 20:16

To i ja się przyczepię, ale ideologicznie. ;) Czy użyta w przykładzie emfaza (element em) jest jakoś uzasadniona semantycznie, czy ma być tylko użyta do celów prezentacyjnych? Bo jeśli tak, to wystarczyłby w tym momencie zwykły span.

No i tomq ma rację â₏“ mając inny element w obrębie a, możemy skorzystać z kaskadowości arkuszy. Po to przecież są. :)

ludwik   26.02.2007 | 22:28

element em jest i uzasadniony semantycznie (choć to trochÄ™ mniej) i i użyty w celach prezentacyjnych (bardziej). generalnie jestem troszkÄ™ urażony co do spanów… po prostu mam takie zdanie, że ludzie je zbyt czÄ™sto używajÄ…… jest taka choroba divination (czy jakoÅ›) to i spanivation może być

Yano   27.02.2007 | 21:51

Owszem, nadużywanie spanów i divów nie jest dobre (divitis się to nazywa), ale ich nieużywanie tam, gdzie ich użycie jest uzasadnione jest tak samo złe.

Należy pamiÄ™tać, że em czy strong mogÄ… być przez np. “screenreadery” czytane w inny sposób (wyróżnione, inna tonacja etc.). Albo ktoÅ› może mieć we wÅ‚asnych stylach zdefiniowany inny wyglÄ…d dla wyróżnionych treÅ›ci (jak np. em czy strong).
Ja staram sie zawsze uzasadnić użycie danego elementu, a jeśli jest to trudne lub naciągane â₏“ używam span.

ludwik   28.02.2007 | 15:40

jakby na to nie patrzeć em to wyróżnienie, a tytuł powinien być wyróżniony, także screenreadery mogą śmiało dać tzw. nacisk na ten element i w tym momencie uzycie tego jest uzasadnione.

stachurska1   29.04.2007 | 15:17

O Boże…. ja myÅ›laÅ‚am, że coÅ› zrozumiem. ChciaÅ‚am wstawić swoje wÅ‚asne zdjÄ™cie do bloga. Bla humanisty to chyba za trudne

Dodaj komentarz:

PaweÅ‚ Ludwiczak (pseudo. Ludwik) - z zamiÅ‚owania grafik, designer - freelancer. Adobe Photoshop nie jest mi obcy; mój budżet opiera siÄ™ głównie na wypocinach z tego programu. Ten blog jest o grafice, designie itp. Istnieje w sieci od 1 października 2006r. Chcesz wiedzieć wiÄ™cej? Zapraszam do dziaÅ‚u Kontakt.

Zaproponuj Posta

All rights reserved. Wszelkie prawa zastrzeżone. Copyright (c) 2008 by Ludwik.org. Powered by Wordpress.