Share
Je parie que beaucoup d'entre vous ne réalisent pas que nous pouvons créer l'illusion de formes en utilisant 100% CSS. En utilisant la propriété border de manière créative, nous pouvons créer des polygones vraiment intéressants. Dans cette semaine screencast, nous allons trouver un moyen de créer des bulles sans recourir à des images d'arrière-plan.
À l'heure actuelle, la plupart d'entre nous connaissons bien l'utilisation des propriétés "-moz-border-radius" et "-webkit-border-radius" pour créer des coins arrondis - voire des cercles complets - mais il existe d'autres techniques pour créer des formes plus complexes..
blockquote # one width: 250px; arrière-plan: # e3e3e3; rembourrage: 25px; position: relative; #one .arrow width: 0; hauteur: 0; hauteur de ligne: 0; border-top: 30px solid # e3e3e3; bordure gauche: 60px blanc solide; border-right: 10px blanc solide; position: absolue; en bas: -30px; à droite: 30px;
Notez comment la propriété "bottom" est l'inverse de la propriété "border-top".
blockquote # two width: 250px; arrière-plan: # e3e3e3; rembourrage: 25px; position: relative; blockquote # two .arrow width: 0; hauteur: 0; hauteur de ligne: 0; border-top: 40px solid # e3e3e3; frontière gauche: aucune; Bordure droite: blanc 30px; position: absolue; en bas: 60%; à droite: -30px;
blockquote # trois width: 450px; arrière-plan: # e3e3e3; rembourrage: 25px; position: relative; #three .arrow width: 0; hauteur: 0; hauteur de ligne: 0; border-bottom: 25px solid # e3e3e3; frontière droite: 50px blanc solide; position: absolue; en haut: -24px; à gauche: 20px;
Je tape ce paragraphe minutes avant de poster le tutoriel. J'ai appris quelque chose ce soir. Saviez-vous que, si vous souhaitez que votre document soit validé, vous ne pouvez pas insérer du texte directement dans un bloc? Il doit être imbriqué dans un élément parent - comme le
étiquette. De plus, le validateur n'a pas aimé le fait que j'ai utilisé une balise span dans la citation du bloc. Cela permet une pléthore d’éléments, mais malheureusement pas la durée! Tant pis; pas grave. Il suffit de le remplacer par un élément différent. Cela ne fait guère de différence.
Je suis vraiment impatient de voir comment vous avez implémenté cette astuce unique dans vos propres projets. Envoyez-nous des liens vers vos exemples, via les commentaires. Merci d'avoir regardé. La semaine prochaine, prévoyez d’apprendre quelque chose de beaucoup plus avancé… Je dois juste trouver quoi! Jusque là.
Accentsconagua