Programmation

styliser des cartes et des toasts en CSS

, , , , ,

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 :

Mon texte 
1
2
3
4
5
6
<div style="	width: 300px;
		height:180px;
		padding:5px;
		border:1px solid #287973;
		background:#E4F5F4;"
		\> Mon texte </div>

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 :

Mon texte 
1
2
3
4
5
6
7
<div style="	width: 300px;
		height:180px;
		padding:5px;
		border:1px solid #287973;
		background:#E4F5F4;
		border-radius:5px;"
		\> Mon texte </div>

  • 3. Ajouter une ombre.

Mon texte 
1
2
3
4
5
6
7
8
<div style="	width: 300px;
		height:180px;
		padding:5px;
		border:10px solid #287973;
		background:#E4F5F4;
		border-radius:5px;
		box-shadow: 2px 2px 2px 1px #6D7575;"
		\> Mon texte </div>

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.

Nom : Le Chat
Prénom : A lunettes
Age : Oui
Sexe : Rose
Description : Le chat le plus cool de la galaxie.
  • Le contenu de la carte :
1
2
3
4
5
6
<img src="/image/chat.png" style="float:left;margin:5px 15px 0px 5px;"/>
<span style="font-weight:bold;">Nom :</span> Le Chat
<span style="font-weight:bold;">Prénom :</span> A lunettes
<span style="font-weight:bold;">Age :</span> Oui
<span style="font-weight:bold;">Sexe :</span> Rose
<div style="margin-left:10px;"><span style="font-weight:bold;">Description :</span> Le chat le plus cool de la galaxie.</div>

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.

Partager