|
Efektowne linki za pomocą css |
| Drukuj |
|
Email
|
|
Napisał Bartłomiej Kuczyński (2573 odsłon)
|
|
28.06.2006 00:27 |
|
Na wstępie chciałbym zaznaczyć iż artykuł skierowoany jest do osób,
które znają podstawy css i chciały by udoskonalić swoje strony.
Zapewne wielu z was widziało już linki, które po najechaniu na nie zmieniały kolor, układ graficzny czy też cały wygląd. Zapewne
odrazu chcieliście mieć takie coś na swojej stronie. Tu pojawiał się problem. Otóż większść tego typu rozwiązań jest oparta o JS. Niewiele jest
wśród nich rozwiązań, które by nie wykorzystywały javascriptu. Ja chcę pokazać wam jak zrobić coś takiego tylko przy użyciu css. Nie będziemy
używać nawet behaviorów zananych z IE
Na samym początku zdefiniujmu sobie kilka elementów <a>.
<div class="links">
<a href="http://www.wirtuals.pl/#">Link 1</a>
<a href="http://www.wirtuals.pl/#">Link 2</a>
<a href="http://www.wirtuals.pl/#">Link 3</a>
</div>
Oczywiście element div można pominąć, ale dla celów dydaktycznych zostawimy go. Następnym krokiem jest definicja styli css
dla linków. Jest to proste i nie powinno być z tym trudności.
div.links{
width: 200px;
padding: 5px;
background-color: #adcdf0;
}
div.links a{
display: block;
text-decoration: none;
color: #f00;
margin: 1px;
padding-left: 3px;
border-left: 3px solid #00a;
}
div.links a:HOVER{
display: block;
text-decoration: underline;
color: #ff0;
margin: 1px;
padding-left: 3px;
border-left: 3px solid #0af;
}
Wynik:
Cała magia polega na zastosowaniu pseudoselektora :HOVER który oznacz iż nad danym elementem znajduje się kursor. Inne
przydatne pseudoselektory to:
- :ACTIVE
- :HOVER
- :FOCUS
- :VISITED
Poeksperymentujcie z nimi i zobaczycie jakie efekty można usyskać
Na zakończenie chciałbym jeszcze powiedzieć kilka słów o kompatybilności
tego rozwiązania z przeglądarkami. Obecnie wszystkie popularne przeglądarki
obsługują podany tu przykład. Jednak zgodne ze specyfikacją W3C możemy
stosować pseudoselektory też do innych elementów takich jak <p>,
<li>, <div> i wiele innych. Jednakże przegladarka Internet
Explorer nie jest wstanie ich obsłużyć Mozilla/FireFox i Opera działają
poprawnie. Wy7maga to od nas pisania skryptów zachowań dla IE co jest uciążliwe.
|
CSS 
