publikuj: Opublikuj w wykop.pl Opublikuj we flaker.pl Opublikuj na OSnews.pl Opublikuj w delicious wydrukuj
skomentuj »

TAGI: tips & tricks , html , css

2011-05-09 11:00  |  Paweł Gazda

Jak zrobić efekt wyróżnienia na liście linków po najechaniu nad link wskaźnikiem myszy [HTML][CSS]?

Jak zrobić efekt wyróżnienia na liście linków po najechaniu nad link wskaźnikiem myszy [HTML][CSS]?

W tym tipsie pokażemy, jak zrobić ciekawy efekt najazdu na linki z wykorzystaniem HTML oraz CSS. Efekt polegał będzie na podświetleniu całego bloku z nazwą artykułu, leadem oraz datą dodania.

Przykład działania tego tipsa możecie sprawdzić na TEJ stronie. Zaczynamy od HTML-a. Większość linijek to próba zmuszenia Internet Explorera do poprawnego wyświetlenia tego, co chcemy osiągnąć.

<div id="links">

<ul>

<li><a href="#" title="Text">Link Heading One

<em>Description of link.</em>

<span>Date posted</span></a></li>

<li><a href="#" title="Text">Link Heading One

<em>Description of link.</em>

<span>Date posted</span></a></li>

</ul>

</div>

Teraz możemy się już zabrać za CSS.

#links ul {

list-style-type: none;

width: 400px;

}

#links li {

border: 1px dotted #999;

border-width: 1px 0;

margin: 5px 0;

}

#links li a {

color: #990000;

display: block;

font: bold 120% Arial, Helvetica, sans-serif;

padding: 5px;

text-decoration: none;

}

* html #links li a {  /* make hover effect work in IE */

width: 400px;

}

#links li a:hover {

background: #ffffcc;

}

#links a em {

color: #333;

display: block;

font: normal 85% Verdana, Helvetica, sans-serif;

line-height: 125%;

}

#links a span {

color: #125F15;

font: normal 70% Verdana, Helvetica, sans-serif;

line-height: 150%;

}

źródło: smileycat.com

publikuj: Opublikuj w wykop.pl Opublikuj we flaker.pl Opublikuj na OSnews.pl Opublikuj w delicious wydrukuj
skomentuj »

Polecane książki

Czytaj Webhosting

Chcesz być na bieżąco z naszymi informacjami? Zapisz się na Newsletter.

Zarejestruj domenę

Sprawdź dostępność swojej domeny:

.pl: 0 zł   .com: 19.90 zł
.com.pl: 0 zł   .eu: 19.90 zł