Le ccs3 apporte des tas de fonctionnalités plus qu’intéressantes pour un webdesigner qui permettent d’alléger le site en évitant le recours aux images.
Aujourd’hui nous allons voir comment créer une boite avec flèche, une sorte de bulle. Et comme un dessin vaut mieux qu’un long discours…
Voici le code en css3 avec les propriétés :before et :after
#bulle {position: relative;
background: #CCCCCC; /** couleur du fond (se retrouve 2 fois) **/
border: 5px solid #FFFFFF; /** taille de la bordure et couleur (se retrouve 2 fois) **/
width:600px; height:120px;} /** dimensions de la cellule (du cadre) **/
#bulle:after, #bulle:before {right: 100%; /** right pour mettre la flèche à gauche ! **/
border: solid transparent; content: ""; position: absolute;}
#bulle:after {border-right-color: #CCCCCC; /** 2e indication de couleur du fond **/
border-width: 33px; /** grandeur de la flèche **/
top: 50%; /** position de la flèche (se retrouve 2 fois) **/
margin-top: -33px;} /** indication de la grandeur de la flèche (valeur négative) **/
#bulle:before {border-right-color: #FFFFFF; /** 2e indication de la couleur de la bordure **/
border-width: 40px; /** indication de la grandeur de la flèche +7px **/
top: 50%; /** 2e indication de la position de la flèche **/
margin-top: -40px; } /** indication de la grandeur de la flèche +7px (valeur négative) **/
Pour changer le côté de la flèche :
Il y a trois valeurs pour définir le côté de la flèche. Il suffit d’indiquer right pour que la flèche soit à gauche. (oui c’est l’inverse)
Indiquer left pour que la flèche soit à droite.
Indiquer bottom pour que la flèche soit en haut.
Indiquer top pour que la flèche soit en bas.
Exemple d’intégration html :
<body> <center> <a href="http://www.unlienpossible.com"><div id="bulle"> ici le texte au choix </div></a> </center> </body>
