Vous avez envie de présenter des textes dans des cartes pour les enjoliver et les mettrer en valeur.
Cet article est fait pour vous. Grâce à CSS3 vous pourrez réaliser de jolis cadres stylisés si vous connaissez les bonnes propriétés.

1. Créer un simple cadre.
Voici un petit bout de code qui dessinera un cadre :
1 | <div style=" width: 300px; |
Détaillons un peu le code.
width:200px; et height:120px; fixent les dimensions du cadre.
padding-top: 5%; fixe les marges intérieures du cadre.
border: 3px solid #A0A0A0; la bordure sera de 3 pixels d’épaisseur, continue et de couleur hexadécimale #287973
background:#E4F5F4; fixe la couleur de fond du cadre
2. Arrondir les angles.
Dans la vie il faut souvent arrondir la angles. :) En css, c’est possible également.
L’arrondi des coins n’est pas supporté par les anciens navigateurs, donc il ne faut pas trop compter dessus pour enjoliver le cadre. Pour avoir les coins arrondis, il faut ajouter dans la déclaration des styles border-radius: 10px; 10px correspond au rayon des arrondis Par exemple, avec ce code :
La propiété css border-radius le permet également. Ce qui donne :
1 | <div style=" width: 300px; |
1 | <div style=" width: 300px; |
box-shadow: 2px 2px 2px 1px #6D7575;
Les valeurs correspondent aus attributs suivants : offset-x | offset-y | blur-radius | spread-radius | color
3. Ajouter du contenu.

Prénom : A lunettes
Age : Oui
Sexe : Rose
- Le contenu de la carte :
1 | <img src="/image/chat.png" style="float:left;margin:5px 15px 0px 5px;"/> |
Le contenu est un peu baclé, mais c’est à vous de jouer pour remplir votre carte.
4. Conclusion.
Comme vous avez pu le constater, créer un composant de type carte n’est pas très compliqué. Néanmoins si vous penez que vous n’arriverez jamais à créer une carte pofessionnelle, vous pouvez vous tourner vers les frameworks CSS.
J’espère que cet article vous aura aidé. N’hésitez pas à le partager.
A bientôt sur Outils Web.