28172 sujets

CSS et mise en forme, CSS3

[resolu] Reproduire un effet en CSS

Bonjour
je suis en train de reproduire un template à partir d'un fichier PSD. Dans ce PSD il y a une barre de navigation dans laquelle les a:hover se retrouve avec un système de boutons enfoncés. Voici l'image ci-dessous.

http://img135.imageshack.us/img135/5656/imghv.png

Comment puis-je faire en CSS pour reproduire l'effet du bouton appuyé sur la barre de navigation?

merci d'avance
Modifié par stephane72 (10 Mar 2011 - 10:49)
bonsoir,

avec box-shadow par exemple et border-radius


border-radius:3px;
box-shadow:
inset  1px  1px   2px #2F96AF, /* haut foncé*/
inset -1px -1px   2px #91E0F2,/* bas clair */
inset  0   10px  20px #5EC7E0, /* partie haute foncée*/
inset  0   -10px 20px #91E0F2 /* partie basse eclaircie */
}

avec les prefixe proprietaire au besoin: -o- pour opera, -webkit- ou -apple- pour chrome/safari, -moz- pour les firefox et mozilla et -ms- pour IE9 (? a te faire confirmer).

Il y a aussi les possibilite de fond gradient avec des syntaxe encore differente d'un nav a l'autre.
exit IE8 et moins, du coup reste l'image en bg ...

GC
Voila ce que j'ai mis mais ca ne donne pas comme sur l'image

ul.nav-main li a:hover {
	color:#fff;
	background:transparent;
	height: 25px;
-moz-border-radius: 5px;
border-radius: 5px ;
-moz-box-shadow: 5px 5px 5px black;
-webkit-box-shadow: 5px 5px 5px black;
box-shadow: inset  1px  1px   2px #2F96AF, /* haut foncé*/ 
inset -1px -1px   2px #91E0F2,/* bas clair */ 
inset  0   10px  20px #5EC7E0, /* partie haute foncée*/ 
inset  0   -10px 20px #91E0F2 /* partie basse eclaircie */ }
Peut-être parce que ton code est comporte quelques erreurs et que certaine propriétés sont mal utilisées ?
Je vais te donner ma version Smiley langue 
color:#fff;
    background:transparent;
    height: 25px;
    
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    
    border-bottom: 1px solid #7addf6;
    border-right: 1px solid #7addf6;
    border-top: 1px solid #2e96b0;
    border-left: 1px solid #2e96b0;
    
    -webkit-box-shadow: inset  1px  1px   2px #2F96AF, /* haut foncé*/  
    inset -1px -1px   2px #91E0F2,/* bas clair */  
    inset  0   10px  20px #5EC7E0, /* partie haute foncée*/  
    inset  0   -10px 20px #91E0F2; /* partie basse eclaircie */
    -moz-box-shadow: inset  1px  1px   2px #2F96AF, /* haut foncé*/  
    inset -1px -1px   2px #91E0F2,/* bas clair */  
    inset  0   10px  20px #5EC7E0, /* partie haute foncée*/  
    inset  0   -10px 20px #91E0F2; /* partie basse eclaircie */
    box-shadow: inset  1px  1px   2px #2F96AF, /* haut foncé*/  
    inset -1px -1px   2px #91E0F2,/* bas clair */  
    inset  0   10px  20px #5EC7E0, /* partie haute foncée*/  
    inset  0   -10px 20px #91E0F2; /* partie basse eclaircie */


upload/36789-bouton.png

Je trouve le résultat très satisfaisant sous Firefox4.
Chrome cependant a du mal avec box-shadow+border-radius, l'arrondi marche pas bien.
Mais dans l'ensemble c'est très fidèle à l'image originale, chapeau gc-nomade d'avoir deviné les couleurs !
Je me suis permis d'ajouter des bordures comme sur l'image d'orgine.
Mais comme le résultat n'es pas exactement pareil que sur l'image, il faudra que tu bidouilles un peu Smiley langue
Modifié par zatuxa (10 Mar 2011 - 10:48)
essaie avec linear-gradiant pour le background:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
  <meta http-equiv="Content-Type" 
 content="text/html; charset="UTF-8"> 
  <link href="css/styles.css" rel="stylesheet" type="text/css"> 
  <title>bouton</title> 
<style type="text/css">

body
{
	background-color: #E9E9E9;
	font-family: verdana;
	font-size: 15px;
	margin: 0px;
	padding: 0px;
}

#menu
{
	margin: 0px;
	padding: 0px;
}

#nav
{
	/*width: 300px;*/
	margin: 20px;
	padding: 15px;
	padding-left: 5px;
	background: -moz-linear-gradient(#BBBBBB, #CCCCCC);
	-moz-border-radius: 5px; 
	border-radius: 5px ; 
	-moz-box-shadow: 0px 0px 5px black; 
	-webkit-box-shadow: 0px 0px 5px black;
}

#nav li
{
	display: inline;
}

#nav li a
{
	text-decoration: none;
	color: #000000;
	padding: 10px;
	-moz-border-radius:3px; 
}

#nav li a:hover
{
	background-color: #CCCCCC;
	-moz-box-shadow: 	inset 1px  1px   2px 	#555555,
										inset -1px -1px   2px #EEEEEE;
	background: -moz-linear-gradient(#BBBBBB, #EEEEEE);
}
</style>
</head>

<body> 
	<div id="menu">
		<ul id="nav">
			<li><a href=#>Accueil</a></li>
			<li><a href=#>Page 1</a></li>
			<li><a href=#>A propos</a></li>
			<li><a href=#>Galerie</a></li>
		</ul>
	</div> 
</body> 

</html>
Bonjour,

zatuxa a écrit :

Chrome cependant a du mal avec box-shadow+border-radius, l'arrondi marche pas bien.

c'est un bug connu, on peut le masquer un peu en declarant une premier ombre interne de la couleur du fond dominant:

@mamax
Pour le linear-gradient, les principaux navigateurs ne se sont pas encore mis d'accord sur la syntaxe a adopté ou les techniques a adoptés (svg pour certains, syntaxe prise tête pour d'autre).
On peut cependant dans cet exemple s'en servir pour IE par exemple Smiley smile .

ça pourrait donner ceci (voir différence dans IE et chrome):
http://gcyrillus.free.fr/essai/menu-shadow-incruste-radius.html

<edit> Pour trouver les couleurs , je me sert d'une pipette. il y a colorzilla pour ff bien utile.</>
Modifié par gc-nomade (10 Mar 2011 - 14:21)
Sujet clos
Aller à