Developpez.com - Développement Web
X

Choisissez d'abord la catégorieensuite la rubrique :


Quatre techniques css sympas sur les liens

Date de publication : 20/04/2009

Par Alen Grakalic (CSS Globe)
 Yannick Komotir(Traducteur)
 

J'ai pensé écrire une série de tutoriels pour les différentes techniques sur les liens. Quand j'ai commencé à écrire je me suis rendu compte qu'ils sont assez simple (mais efficace:))à mettre en oeuvre et il pourrait être préférable de les résumer. Le lien (balises a) est l'un des éléments les plus importants de votre page. Il n'y aurait pas de navigation, sans lui, serait-il possible :)? La principale caractéristique qui fait que les techniques suivantes soient possible, c'est la compatibilité de la pseudo classe :hover sur les navigateurs. Chacune de ces techniques est en css pure, pas de hacks moche, pas de JavaScript.


1. Info bulle en css pure
2. Galerie d'images en css pure
3. Redimensionnent d'images en css pure
4. Effet Button 3D
5. Lien de téléchargement des techniques


1. Info bulle en css pure

Pour que cette technique fonctionne, vous aurez besoin des balises comme ceci:
<a href="#">Title <span>Tooltip</span></a> 
			
L'ancre est dans une position relative donnée et le span est placé en absolue avec deux styles séparées. Nous avons d'abord cacher l'élément span et le montrons que lorsque l'utilisateur survol le lien (à l'aide du selecteur a: hover span). voici le 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;			
	}
			

2. Galerie d'images en css pure

Dans cette astuce nous allons voir le redimensionnement en grandes images des vignettes survolées. Nous utilisons une liste à puces pour cela.
Dans chaque élément de la liste, nous mettrons un ancre avec deux images, un aperçu et un grand format. L'image de grande taille est placé à l'intérieur d'un span que nous avons cacher au départ. Lorsque la vignette est survolé nous mettons la valeur de display en block au span caché de cette façon nous affichons l'image de grande taille. la structure html se présente comme suit:
<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>
			
et le 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;
		}	
		

3. Redimensionnent d'images en css pure

J'ai une fois écrit sur le redimensionnement de vignette dans le cas où la zone visible de l'image est redimensionner. Cette astuce affiche une plus grande image au passage de la souris et donne un effet de rédimensionnement réel de l'image. Pour ce faire, nous allons utiliser les dispositions similaires que l'exemple précédent - deux images, une petite et une grande, à l'intérieur d'une balise a. L'image agrandie est au départ cachée, montré qu'au survol de la souris. En plus la grande image est placée au dessus de la petite, c'est comme si l'image a été etirée. code html:
<li>
	<a href="#">
		<em><img src="images/02_1s.jpg" alt="gallery thumbnail" /></em>

		<span><img src="images/02_1m.jpg" alt="gallery image" /></span>
	</a>
</li>
			
css:

ul#gallery, ul#gallery li{
		margin:0;
		padding:0;
		list-style:none;
		}
ul#gallery{
		margin:2em 0;
		}			
ul#gallery li{
		float:left;
		display:inline;
		margin-right:5px;
				}								
ul#gallery a{
		float:left;
		display:inline;
		position:relative;
		}	
ul#gallery a:hover{
		background:none;
		z-index:100;
		}	
ul#gallery a span{
		display:none;
		}
ul#gallery a:hover span{
		float:left;
		display:block;
		cursor:pointer;
		}
ul#gallery a:hover em{
		display:none;
		}				
ul#gallery a img{
		border:1px solid #999;
		padding:2px;
		background:#fff;
		}	
ul#gallery a:hover img{
		border:1px solid #000;
		}
			

4. Effet Button 3D

Il s'agit d'un simple effet de la poussée d'un bouton. Nous avons besoin d'une ancre avec un span imbriqués. les bordures haut et gauche sont "éclairés" tandisque ceux du bas et droite sont "obscursis". To add more shading we'll add right and bottom border to the span as well. Pour ajouter plus d'ombres, nous allons ajouter des bordures à droite et en bas du span aussi. Au survol de la souris nous inversons les couleurs des bordures. Changing borders will offset the nested span one pixel to the down and to the right. En changeant les bordures, une compensation d'un pixel est faite en bas et à droite. Notez que dans mon exemple, j'ai eu à utilisé les ancres flottantes pour obtenir la hauteur souhaitée, mais cela peut être fait pour les ancres en ligne. le html ressemble à ça :
<a href="#" class="button"><span>Roll over here</span></a>

			
et le css:
a.button{
	float:left;
	font-size:110%;
	font-weight:bold;				
	border-top:1px solid #999;
	border-left:1px solid #999;
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	color:#333;		
	width:auto;
	}	
a.button:hover{	
	border-top:1px solid #333;
	border-left:1px solid #333;
	border-right:1px solid #999;
	border-bottom:1px solid #999;	
	color:#333;					
	}	
a.button span{
	background:#d4d0c8 url(images/bg_btn.gif) repeat-x;			
	float:left;
	line-height:24px;
	height:24px;	
	padding:0 10px;							
	border-right:1px solid #777;
	border-bottom:1px solid #777;					
	}		
a.button:hover span{
	border:none;						
	border-top:1px solid #777;
	border-left:1px solid #777;		
	background:#d4d0c8 url(images/bg_btnOver.gif) repeat-x;	
	cursor:pointer;	
	}
			

5. Lien de téléchargement des techniques


Copyright © 2008 Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Responsable bénévole de la rubrique Développement Web : Xavier Lecomte -