CSS  »  Articoli  »  Effetti con CSS 

Questa è la traduzione dell'articolo 4 Uber Cool Css Techniques For Links di Alen Grakalic pubblicato originariamente su CSS Globe il 24 Aprile 2008. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.

Ho pensato tempo fa di scrivere una serie di tutorial su varie tecniche CSS da associare ai link. Quando ho iniziato ho subito capito che erano estremamente semplici (ed efficaci) e che potevano essere tutte raccolte in un solo articolo di sintesi.

I link (il tag HTML a) sono uno dei più importanti elementi nel contesto di un documento. Senza link non ci sarebbe praticamente navigazione. Come premessa c'è da aggiungere che per l'implementazione di queste tecniche è necessario il supporto della pseudoclasse :hover sui vari browser. Ognuna di queste tecniche usa solo i CSS, senza ricorrere ad hack o a script Javascript.

Potete iniziare scaricando il file zip che contiene tutti gli esempi di cui parleremo nel corso dell'articolo.

Tooltip con i soli CSS

Perché questa tecnica funzioni avrete bisogno di un markup HTML come questo:

<a href="#">Title <span>Tooltip</span></a>

Nel CSS assegniamo un posizionamento relativo all'ancora (a) in stato di :hover. Lo span viene posizionato assolutamente ed esso si applica uno stile separato. Inizialmente lo span viene nascosto, per essere poi visualizzato quando si passa con il mouse sul link (usando il selettore a:hover span).

Ecco il CSS:

a{
	z-index:10;
	}
a:hover{
	position:relative;
	z-index:100;
	}			
a span{
	display:none;
	}
a:hover span{
	display:block;
	position:absolute;
	float:left;
	white-space:nowrap;
	top:-2.2em;
	left:.5em;
	background:#fffcd1;
	border:1px solid #444;
	color:#444;
	padding:1px 5px;
	z-index:10;			
	}

Ecco la tecnica in azione.

Una galleria di immagini con i CSS

Questo trucchetto ci consente di visualizzare un'immagine grande quando si passa con il mouse sulla miniatura corrispondente. Useremo una lista non ordinata. In ogni item della lista (li) piazzeremo un elemento a e al suo interno il riferimento a due immagini, la miniatura e quella a dimensioni normali. L'immagine grande viene inserita all'interno di uno span inizialmente nascosto. Quando si fa il rollover sulla miniatura impostiamo display:block per per lo span nascosto e così mostriamo l'immagine grande.

La struttura HTML è la seguente:

<li>
	<a href="#">
		<img src="images/02_1s.jpg" alt="gallery thumbnail" />
		<span><img src="images/02_1.jpg" alt="gallery image" /></span>
	</a>
</li>

E questo il CSS:

ul#gallery, ul#gallery li{
	margin:0;
	padding:0;
	list-style:none;
	}
ul#gallery{
	width:400px;
	height:375px;
	position:relative;
	background:#e1e1e1 url(images/bg_preview.gif) no-repeat 50% 40%;
	}			
ul#gallery li{
	float:left;
	display:inline;
	margin-top:300px;
	}								
ul#gallery a span{
	display:none;
	}
ul#gallery a:hover{
	background:none;
	z-index:100;
	}	
ul#gallery a:hover span{
	position:absolute;
	width:400px;
	height:300px;
	float:left;
	top:0;
	left:0;
	display:block;
	}	

Ecco la demo.

Altri articoli

Altre guide

Altre newsletter