Blog iamvdo.meNote : ce tutoriel a été initialement publié dans WebDesign Magazine Hors-série 16. Suivez pas à pas les 18 étapes de ce tutoriel.
01 - La structure HTML
La première étape de ce tutoriel consiste à créer notre structure HTML. Pour ce menu, nous avons besoin d’une liste de liens. Pour cela, nous utilisons un élément de liste non ordonnée (balise <ul>), lequel contient 5 éléments de liste (balise <li>). Chaque élément de cette liste est composé d’un lien hypertexte (balise <a>). Ouvrez donc votre éditeur préféré, et au sein d’un document HTML5 valide, copiez-collez ce code :
<ul>
<li><a href="#1">Home</a></li>
<li><a href="#2">Portfolio</a></li>
<li><a href="#3">News</a></li>
<li><a href="#4">Labs</a></li>
<li><a href="#5">Contact</a></li>
</ul>
02 - Le CSS de base...
Place aux CSS maintenant ! Pour démarrer, nous modifions la couleur d’arrière-plan de notre page. Utilisons un gris très foncé, compris entre #222 et #333. Nous paramétrons également la taille et la famille de police :
html{
background: #2A2A2A;
font: 1.1em sans-serif;
}03 - Un menu horizontal
Pour passer notre menu vertical en menu horizontal, afin d’avoir chaque élément côte à côte, nous allons utiliser le modèle de boite tabulaire de CSS. Nous affichons donc notre <ul> en display: table en lui donnant une taille, puis nos éléments de liste en display: table-cell. De cette façon, chaque élément de liste mesure automatiquement 1/5e de la taille de son parent. Nous réglons aussi les marges internes et externes
ul{
display: table;
width: 500px;
margin: 100px auto;
padding: 0;
}
ul li{
display: table-cell;
}04 - Création d’un dégradé linéaire
Ajoutons à présent un dégradé linéaire en CSS pour visualiser notre menu. Nous allons pour cela utiliser la fonction linear-gradient définie au sein de CSS3. Créons donc un dégradé du haut vers le bas (dégradé par défaut), d’un bleu clair vers un bleu plus foncé (les couleurs utilisées ici sont des mots-clés définis dans CSS3)
ul{
...
background: linear-gradient(deepskyblue, dodgerblue);
}
05 - Compatibilité du dégradé
Bien que la syntaxe des dégradés soit finalisée, l’utilisation de préfixes est obligatoire pour fonctionner sur les navigateurs plus ancien qui sont sur le marché. Pour cela, nous ajoutons :
ul{
...
background: -webkit-linear-gradient(deepskyblue, dodgerblue);
background: -moz-linear-gradient(deepskyblue, dodgerblue);
background: -ms-linear-gradient(deepskyblue, dodgerblue);
background: -o-linear-gradient(deepskyblue, dodgerblue);
background: linear-gradient(deepskyblue, dodgerblue);
}Note : les préfixes vendeurs sont -webkit- (pour Chrome, Safari, iOS, Android...), -moz- (pour Firefox), -ms- (pour Internet Explorer), et -o- (pour Opéra)
06 - Dégradation gracieuse du dégradé
La prise en compte de la dégradation gracieuse nous permets d’offrir une alternative au dégradé CSS si le navigateur utilisé par l’internaute est trop ancien. Ici, nous appliquons simplement en premier lieu une couleur d’arrière-plan unie. Ainsi, les navigateurs non compatibles avec les dégradés utiliseront la première valeur, tandis que les autres surclasseront le style en suivant le principe de la cascade CSS, et appliqueront donc le dégradé.
ul{
...
background: dodgerblue;
...
}
07 - Ajout de coins arrondis et d’ombres
Pour adoucir notre design, nous ajoutons des angles arrondis à notre menu, à l’aide de la propriété border-radius. Nous ajoutons également plusieurs ombres qui nous aide à donner de la profondeur. Pour cela, la propriété box-shadow accepte plusieurs ombres séparées par des espaces.
ul{
…
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
0 3px 5px rgba(0, 0, 0, .2),
0 5px 10px rgba(0, 0, 0, .2),
0 20px 20px rgba(0, 0, 0, .15);
}Note : ces ombres sont visibles du haut vers le bas.
08 - Style des liens
Afin d’avoir quelque chose de plus propre, ajoutons des styles à nos liens contenus dans chaque élément de liste. Les liens sont donc affichés tel des blocs (afin que la taille de chaque lien corresponde à celle de son parent), le texte est centré, de couleur noire légèrement transparente et sans soulignement. Les marges internes sont définies indépendemment (la marge interne du bas est plus importante).
ul li a{
display: block;
text-align: center;
color: rgba(0, 0, 0, .7);
text-decoration: none;
padding: 8px 8px 17px 8px;
}
09 - Effet de texte incrusté
Terminons le style des liens par l’ajout d’une ombre qui simule l’incrustation du texte. Pour cela, la propriété text-shadow est utilisée, et une ombre vers le bas, de couleur blanche transparente à 40% est appliquée. Ainsi, notre oeil perçoit cette ombre comme étant une lumière venant du haut de l’écran.
ul li a{
...
text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}
10 - Effet 3D sur le menu
Pour simuler un effet 3D ou d’extrusion de notre menu, nous allons ajouter plusieurs ombres sur chaque lien. La première de ces ombres est une ombre interne claire sur le haut du lien (là où la lumière arrive), les autres sont une succession d’ombres décalées progressivement vers l’intérieur du lien à partir du bas. La couleur de chaque ombre est progressivement plus claire que la précédente.
ul li a{
…
box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset,
0 -1px 0 hsl(210, 100%, 32%) inset,
0 -2px 0 hsl(210, 100%, 38%) inset,
0 -3px 0 hsl(210, 100%, 44%) inset,
0 -4px 0 hsl(210, 100%, 50%) inset,
0 -5px 0 hsl(210, 100%, 60%) inset;
}11 - Peaufinage de l’effet (coins arrondis)
Nous remarquons que sur le premier et le dernier lien du menu, les ombres ne suivent pas les arrondis. C’est normal, puisque ceux-ci ont été appliqués sur l’élément <ul>. Il nous faut donc ajouter également des coins arrondis sur le premier et le dernier lien de notre menu. Pour cela, nous utilisons les pseudo-classes :first-child et :last-child.
ul li:first-child a{
border-radius: 3px 0 0 3px;
}
ul li:last-child a{
border-radius: 0 3px 3px 0;
}
12 - Différents états (:hover, :focus, :active)
Pour améliorer l’expérience utilisateur et ainsi aider l’internaute dans sa navigation, ajoutons différents états sur nos liens. Lors du survol avec la souris (ou lors du focus au clavier), nous ajoutons un arrière-plan plus clair, et nous éclaircissons également la couleur de chaque ombre de 10% :
ul li a:hover,
ul li a:focus{
background: rgba(255,255,255,.2);
box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset,
0 -1px 0 hsl(210, 100%, 42%) inset,
0 -2px 0 hsl(210, 100%, 48%) inset,
0 -3px 0 hsl(210, 100%, 54%) inset,
0 -4px 0 hsl(210, 100%, 60%) inset,
0 -5px 0 hsl(210, 100%, 70%) inset;
} Lors de l’activation du lien, l’arrière-plan devient plus sombre (utilisation d’un dégradé : voir plus haut pour la compatibilité), et la majorité des ombres disparaissent :
ul li a:active{
background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
box-shadow: 0 0 2px rgba(0,0,0,.3) inset;
}
13 - Modification des marges internes
Lors du survol (ou du focus clavier) sur un lien, nous modifions également la taille de ses marges internes gauche et droite. Cependant, cette augmentation ne modifie pas la taille du menu car nous utilisons le modèle de boite tabulaire. De fait, ce sont les éléments frères qui sont réduits.
ul li a:hover,
ul li a:focus{
…
padding: 8px 25px 17px 25px;
}14 - Ajout des transitions
Le moment tant attendu ! Les transitions CSS vont nous permettre d’augmenter la taille des marges internes progressivement, et ainsi éviter l’effet brutal d’agrandissement. Pour ce faire, nous ajoutons donc une transition sur les marges internes (padding), d’une durée de 0.3 secondes :
ul li a{
…
transition: padding .3s;
} Cette transition est ajoutée sur les liens par défaut et non uniquement lors du survol/focus. Ainsi l’effet est visible dans tous les cas (lorsque l’on arrive sur le lien ET lorsque l’on quitte)
15 - Transitions sur d’autres propriétés
Il est également possible d’appliquer une transition sur la couleur d’arrière-plan de chaque lien. Il nous suffit pour cela de modifier la déclaration par :
ul li a{
…
transition: padding .3s, background .3s;
}
ou plus simplement
ul li a{
…
transition: all .3s;
}Attention toutefois à l’utilisation du mot-clé all et donc aux transitions non souhaitées sur certaines propriétés.
16 - Temporisation de la transition
Pour ajouter un effet supplémentaire, et encore augmenter l’expérience utilisateur, nous allons retarder le début de la transition lors du retour à l’état normal. Pour ce faire, nous spécifions un délai différent entre l’état normal et l’état survolé :
ul li a{
…
transition: all .3s .1s;
}
ul li a:hover,
ul li a:focus{
…
transition: all .3s 0s;
}Ici, nous avons donc un délai de 0 seconde lors du passage à l’état survolé puis un délai de 0.1 seconde pour revenir à l’état normal.
17 - Ajout d’une petite lumière
Pour cette dernière étape, nous utilisons le pseudo-élément ::before pour simuler une petite lumière. Pour cela, nous ajoutons notre contenu généré à chaque lien de notre menu. Ces pseudo-éléments sont positionnées en absolu au sein de leur parent en relatif :
ul li a{
...
position: relative;
}
ul li a::before{
content: '';
position: absolute;
left: 50%;
bottom: 9px;
margin-left: -2px;
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(0, 0, 0, .5);
}Note : les pseudo-éléments sont notés :: en CSS3, alors qu’ils sont notés : en CSS2.1.
18 - La lumière s’allume !
Enfin, la dernière action consiste à modifier la couleur d’arrière-plan de l’élément ajouté lors du survol avec la souris, ou lors du focus clavier. Une ombre est également ajoutée. La lumière semble alors s’allumer :
ul li a:hover::before,
ul li a:focus::before{
background: white;
box-shadow: 0 0 2px white,
0 -1px 0 rgba(0, 0, 0, .4);
}
J’espère que ce tutoriel vous a plus. Si c’est le cas, votez !
#1par Victor Brito, le 25 octobre 2012
À l’étape 16, il faut inverser l’ordre des durées dans l’explication par rapport au code.
#2par css3create, le 25 octobre 2012
@Victor Brito : euh, à priori non. Je ne me suis pas trompé. :) Le délai est de 0 seconde lors du survol et de 0.1 seconde lors du retour à la normale. La durée de la transition est de 0.3 seconde dans les 2 cas.
#3par Victor Brito, le 25 octobre 2012
Dans le code, il y a .1s pour la règle sans pseudo-classe et 0 pour la règle avec :hover et :focus. Le texte d’explication dit : « Ici, nous avons donc un délai de 0 seconde lors du passage à l’état survolé puis un délai de 0.1 seconde pour revenir à l’état normal. » Moi, je pense qu’il s’agit plutôt d’un délai de 0.1 seconde lors du passage à l’état survolé, puis aucun délai pour revenir à l’état normal.
#4par Ronmazona, le 26 octobre 2012
Bonjour,
je ne comprenais pas comment cet effet était possible. Et je découvre que l’on utilise table-cell. Quelle belle idée !
Comme quoi il reste encore beaucoup de choses à créer en utilisant les mêmes propriétés.
Un peu comme la musique, avec quelques notes...
#5par geek, le 14 novembre 2012
J’ai essayé de faire un menu similaire à l’aide de table et table-cell, mais ul s’agrandit quand même au survol. Je ne comprends pas pourquoi. J’ai pourtant fait comme décrit ici.
#6par LCoileux, le 15 novembre 2012
Les propriétés table et table-cell sont elles supportées par la derniere version d’IE ? Car lorsque je refait ce menu, il ne passe pas.
#7par css3create, le 15 novembre 2012
@LCoileux : Oui tout à fait, et depuis IE8...
#8par css3create, le 15 novembre 2012
@geek : Si tu lui fixes une taille, normalement non.
#9par LCoileux, le 16 novembre 2012
Alors pourquoi votre code ne passe pas sous ma version d’IE9 ?
#10par geek, le 19 novembre 2012
@css3create : j’ai mis une taille. J’ai mis width:300px pour ul. Mais ça marche pas. Le menu s’agrandit quand même en largeur.
#11par Anonyme, le 26 novembre 2012
Bien fun ce dernier tuto !
#12par geek, le 28 novembre 2012
@tous : problème résolu, j’avais indiqué une taille trop étroite pour le menu alors forcément il s’agrandissait. Super tuto, le menu est vraiment classe
#13par NK, le 28 novembre 2012
Bonjour,
J’ai copié le code mais ça ne fonctionne pas. Désolé de poser des questions nases mais les ... sont remplacer par un ID ? L’étirement de l’onglet sélectionné , n’étire pas.
Merci
#14par geek, le 29 novembre 2012
les ... c’est juste pour indiquer qu’il y a d’autres propriétés avant. tu les enlèves. Autrement pour l’étirement, tu as bien placé dans les bonnes balises tes propriétés ? (table dans ul, table-cell dans ul li, etc...). Par contre, il ne faut pas oublier de rajouter les préfixes de compatibilité pour "transition", mais même sans, normalement tu devrais avoir tes onglets qui s’élargissent (mais pas progressivement)
#15par b3N, le 7 décembre 2012
Un grand merci à toi pour toutes ces explications !
Très pédagogique !
#16par Tonio, le 10 décembre 2012
Bonsoir,
Je ne comprend pas pourquoi, avec Chrome, les effets de temporisation passent bien dans le menu qui vous avez inséré en haut du tuto, mais en copiant-collant toutes les lignes de code que vous fournissez (sans apporter de changement), cette temporisation ne se fait pas avec mon fichier. Pourtant, avec ce même fichier, elles se font sous Firefox !
#17par css3create, le 11 décembre 2012
@Tonio : As-tu bien ajouté les préfixes nécessaires ?
#18par Tonio, le 12 décembre 2012
Quels prefixes ? Si je ne me trompe pas, ceux donnés ne servent que pour le dégradé et non pour la temporisation. Sinon ils y sont, j’ai copié/collé votre code pour tester
#19par loumizhu, le 25 décembre 2012
bonjour
j’ai tout fait normalement, mais le résultat est saccadé (sous chrome 23). pourtant votre example en haut est fluide. Sur Firefox, c’est assez fluide
mais sur chrome c saccadé bien que ça affiche cette page super bien
#20par geek, le 7 janvier 2013
@ Tonio
Les préfixes de compatibilité sont -moz- (pour firefox), -webkit- (pour safari et chrome), -ms- pour IE, -o- pour Opera. Dans l’exemple donné, il n’y a pas les préfixes. Il faut ajouter les préfixes à chaque fois qu’il y a "transition". Les mettre tous assure une meilleure compatibilité bien évidemment. Et il est bien de toujours laisser une ligne sans aucun préfixes également.
Les préfixes comptent aussi pour "animation " et "ª@ keyframes" ainsi que "transform"
#21par geek, le 11 janvier 2013
@Tonio et loumizhu :
Les préfixes sont -moz- pour mozilla, -webkit- pour safari et chrome, -ms- pour IE, et -o- pour opéra. Effectivement, ceux donné sont uniquement pour les dégradés, mais il faut les ajouter pour les transitions. A noter que certains navigateurs prennent en charge nativement les dégradés sans devoir utiliser les préfixes, mais il est bien de les mettre pour assurer la compatibilité avec ceux qui n’auraient pas fait leurs mises-à-jour. Par ailleurs, Firefox 17 pour mac prend en charge nativement les transitions, ainsi que Opéra 12.12.
#22par Mika, le 12 janvier 2013
Bonjour, votre code marche sans problème sous firefox, mais sous chrome la transition ne semble pas marcher
#23par adloiseau, le 16 janvier 2013
Bonjour,
merci pour l’excelent tuto mais j’ai un problème avec la liste.
Je suis obligé de mettre en commentaire le margin pour apercevoir la navigation et celle-ci n’est pas à l’horizontal mais à la verticale... (voir ci-dessous)
.navView ul
display : table ;
width : 350px ;
/*margin : 100px auto ;*/
....
Pour info, j’ai entouré ma liste
d’une div clas="navView" et cette liste est un itemTpl du composant dataview de ExtJS 4
#24par amendiii, le 25 janvier 2013
salut !!! voila je suis un gros noob dans le css ! et en tant que noob je vais vous poser une question qui semble déjà avoir été posé mais dont la réponse ne me parle pas beaucoup ! je suis désolé de vous rabâcher mais pour moi sous chrome 24 je ne parvient pas a faire fonctionner la transition, le changement ne se fait donc pas progressivement mais brutalement j’ai essayé d’introduire la transition de la maniere suivante :
ul li a
display : block ;
text-align : center ;
color : rgba(0, 0, 0, .7) ;
text-decoration : none ;
padding : 8px 8px 17px 8px ;
text-shadow : 0 1px 0 rgba(255, 255, 255, .4) ;
box-shadow : 0 1px 0 rgba(114, 166, 89, .29) inset,
0 -1px 0 hsl(210, 100%, 32%) inset,
0 -2px 0 hsl(210, 100%, 38%) inset,
0 -3px 0 hsl(210, 100%, 44%) inset,
0 -4px 0 hsl(210, 100%, 50%) inset,
0 -5px 0 hsl(210, 100%, 60%) inset ;
transition : -webkit- padding .3s, background .3s ;
transition : -moz- padding .3s, background .3s ;
transition : -ms- padding .3s, background .3s ;
transition : -o- padding .3s, background .3s ;
transition : padding .3s, background .3s ;
J’ai meme essayé de le mettre dans la balise
ul li a:hover,
ul li a:focus
Pourrais je avoir une explication s’il vous plait !!
je sais deja que je suis un gros noob mais si la question vous parait con vous pouvait le redire !
Merci bien les gens !!
#25par css3create, le 25 janvier 2013
@amendiii : Les préfixes s’ajoutent au nom de la propriété CSS, donc ça donne :
-webkit-transition: ... ;et ainsi de suite.#26par amendiii, le 25 janvier 2013
oooh super merci j’ai testé et c’est tout bon !!!!!au passage, super tuto !!!! merci pour ta reponse super rapide !!
amendi
#27par Ballacosse OUATTARA, le 30 janvier 2013
Ce menu est super génial.
#28par fx, le 30 janvier 2013
Bonjour à tous !
Je souhaiterais savoir comment changer la position des points lumineux.
Merci pour le tuto !
#29par Azo, le 6 février 2013
Salut,
Tout d’abord super tuto, tout est très bien compréhensif et bien expliqué =)
J’ai juste une toute petite question, a laquelle je n’arrive pas à répondre ...
Est ce que quelqu’un sait comment laisser une case dans le même état que lorsqu’on la survol, au moment ou l’on clique dessus ? cela permettrai a l’utilisateur de savoir dans quel menu il ce situ ...
Merci d’avance =)
#30par pixys, le 8 février 2013
Salut ! Un super tuto : clair, précis, pour un résultat impeccable. Merci pour l’ul > display:table, c’est trop pratique !!!
@Azo > perso j’utilise quelques lignes de JavaScript afin d’attribuer une classe "current" au lien du bouton qui correspond à la page actuelle > un truc du style :
<script type="text/javascript">$(document).ready(function(){
$(".navigation a").click(function() {
$(".navigation a").each(function(){
$(this).removeClass("current");
});
$(this).addClass("current");
});
});
</script>
On peut faire aussi en PhP et peut-être aussi avec d’autres pseudo-classes, je ne m’y connais pas assez encore :)
#31par ShadowDev, le 16 février 2013
Merci pour ce tuto et tous les autres. C’est clair, bien expliqué.
Votre site fait maintenant parti de mes favoris !! Je recommande !!!! ^^
#32par Danao64, le 1er mars 2013
Ce tuto, et ce site sont tout simplement géniaux !!!! Mais j’ai un petit soucis : Comment faire pour que la petite lumière soit allumée sur la nouvelle page pointée après avoir cliqué sur le lien. Merci d’avance
#33par wind, le 1er mars 2013
cela ne marche pas, votre démo marche sur Chrome, j’ai copié le même code sur les fichiers appropriés pour tester, cela ne marche pas, pourtant c’est le même navigateur !
#34par Gotrunk95, le 10 mars 2013
Très bon tuto je veux savoir si on peut ajouter un sous menu vertical on non.
Merci.
#35par S_Pie971, le 27 avril 2013
Génial ce tuto ! merci beaucoup
#36par prime, le 16 mai 2013
merci beaucoup pour ce tuto...il est beacoup plus claire...merci.
#37par cazius, le 18 mai 2013
bonjour,merci pour votre tuto qui est super génial ,
j’ais les repris et fais a ma sauce en le transformant en menu déroulant et la j’essaye de le faire en vertical un peu galéré mais je vais réussir. Encore merci et continué comme ça .
#38par Nico, le 21 mai 2013
Merci beaucoup pour ce tuto, ce site fait maintenant de mes favoris aussi, ma question rejoint celle de Gotrunk95, le 10 mars.
J’ai testé un sous menu qui est caché, mais lorsque je fais un :hover dessus :
(de mémoire c’était ça, car je fais ça au boulot pendant mon temps libre :-D)
ul li a ul Display:none
ul li a:hover ul Display:block
je n’arrive pas à le faire en vertical, il est toujours à l’horizontal...
#39par scorpionoir, le 22 mai 2013
Salut a toute l’equipe, le site est vraiment genial pas mal d’exemple qui me servirai bien mais le souci vu que je ne connais pas trop autre chose que html, quant vous affichez des bout de code, je n’arrive pas a savoir ou les placé resultat je galere. Voila le seul que j’ai reussi a realise ( Rotation d’un menu en CSS3 ) mais c’est grace a un internaute qui a mis un lien vers le code complet ( html & css ) le seul souci c’est qu’il bug au niveau des liens sous chrome donc si vous pouviez mettre le code complet sur un lien de telechargement direct ca serai super cool en attendant je vais continuer a galerer pour mieux reussir @+
#40par lazhar, le 10 juillet 2013
merci pour ce tuto tres bien expliqué et merci pour les autres tutos aussi votre site fait partie de mes sites favoris
#41par clemNet, le 12 juillet 2013
Merci pour ce tuto très bien fait. Je ne pensais pas que l’on pouvait faire autant de choses rien qu’avec le CSS ! Et c’est un peu de la redite, mais le site est tout simplement génial.
#42par MINIMOUSE, le 8 août 2013
Merci pour ce super tuto qui fonctionne top du top ... par contre je voulais changer les couleurs : plutôt que bleu avoir du orange : seul problème j’ai toujours un liseret bleu en bas du menu !!! quelqu’un peut me dire à quel niveau je dois indiquer la couleur orange ?
#43par Luc-Marie, le 10 août 2013
Je reste sans voix et très impressionné. J’ai repris le tuto ligne par ligne en faisant très attention à tout car je souhaitais changer les couleurs afin de passer cette barre de menu en rouge. Tout s’est bien passé. Quelle générosité incroyable de nous partager cette merveille... Merci mille fois !
#44par Guyver974, le 28 août 2013
Tuto Super Top, rien à re dire !
Ajouter direct au favoris !
Je le mettrai sur mon premier site, votre url. !
Au passage je suis nouveaux dans ce monde. :-)
#45par Yuuki, le 30 août 2013
Merci bien pour ce tutoriel, bien que j’ai surtout passé mon temps à copier-coller, j’ai quand même compris le principe :). J’ai quand même encore du mal avec les coordonnées spécifiques des box-shadow mais bon.... Un jour j’y arriverais :).
#46par Aurelys, le 4 septembre 2013
Je n’ai pas pus réussir à afficher le point qui s’allume lors du survole :/
#47par Soifranc, le 29 octobre 2013
Bonsoir trés bon tutos je vous en remercie je me pose deux questions que je ne trouve pas réponse : - aprés changement des couleurs une barre reste bleu , en bas du menu mais compris dedans ; et enfin quelle commande permet d’agrandir en hauteur le menu ( j’ai essayer height mais cela ne change pas ) .
#48par Alex, le 1er décembre 2013
bonjour j’aimerais savoir s’il est possible de faire le meme menu mais en position verticale merci pour le tuto c’est génial !
#49par Simoutz, le 25 janvier 2014
MAGNIFIQUE TUTO ! Franchement tu t’es balade.
Un tuto détaillé, explicite, complet ! T’es un mac !
#50par Anne, le 17 février 2014
Super tuto, et toujours plein de bonne idée comme base de création. Juste une petite demande comment fait-on pour fixer la taille des cells du table-cell en dehors du passage de la souris.
Merci d’avance pour ta réponse
#51par css3create, le 17 février 2014
@Anne : Tu peux fixer la taille d’un élément en particulier ou utiliser les marges internes. Pour ça, utilise :nth-child(). :)
#52par jajay, le 19 février 2014
bonjour,
super tuto, bravo l’artiste.
Cependant j’ai quelques difficultés au niveau des couleurs.
Je m’explique, j’ai voulu changé le background en rouge mais le problème c’est qu’il reste du bleu en bas. Donc c’est quelle partie du code que je dois modifier ?
Dans mon code je ne crois pas avoir mis du du bleu.
Merci d’avance pour les éventuelles réponses.