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 le cadre suivant :

Mon texte 
1
2
3
4
5
6
<div style="	width: 400px;
		height:150px;
		padding:5px;
		border:1px solid #aaa;
		background:#f9fafb;"
		> 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
La propiété css border-radius le permet également. Ce qui donne :

Mon texte

Par exemple, avec ce code :

1
2
3
4
5
6
7
<div style="	width: 400px;
		height:150px;
		padding:5px;
		border:1px solid #aaa;
		background:#f9fafb;
		border-radius:4px;"
		> Mon texte </div>

3. Ajouter une ombre.

On peut ajouter une petite ombre pour enjoliver notre petit cadre.

Mon texte

On peut ajouter cette ombre avec le code, suivant :

1
2
3
4
5
6
7
8
<div style="	width: 300px;
		height:180px;
		padding:5px;
		background:#f9fafb;
		border:10px solid #aaa;
		border-radius:4px;
		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);"
		> Mon texte </div>

Les quatre valeurs de box-shadow correspondent aux attributs suivants :
offset-x | offset-y | blur-radius | spread-radius | color
Ici le spread-radius n’est pas renseigné.

4. Ajouter du contenu.

Enfin, on ajoute un peu de contenu, comme dans le cadre ci-dessous :

Nom : Le Chat 🐱

Prénom : A lunettes

Age : Oui

Sexe : Rose

Voici le code de l’exemple :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div style="	width: 400px;
		height:150px;
		padding:5px;
		background:#f9fafb;
		border: 1px solid #aaa;
		border-radius: 4px;
		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
		padding:0;
		position:relative;"> 
	<img src="/img/chat.jpg" style="width:50%;
	height:100%;margin-left:0px;"/>
	<div style="width:50%;height:100%;position:absolute;
	top: 0px; left:50%;padding: 0px 10px;line-height: 2.5px;">
		<p> Nom : Le Chat 🐱</p> 
		<p> Prénom : A lunettes</p>
		<p> Age : Oui</p>
		<p> Sexe : Rose</p>
	</div>
</div>

La div est en position relative, et le texte en absolute pour pouvoir positionner le texte par rapport à la div.

On pourrait aussi placer l’image en background de la div, ce serait d’ailleurs plus juditieux. On peut toujours améliorer le contenu, mais amintenant, c’est à vous de jouer …

5. Conclusion.

Comme vous avez pu le constater, créer un composant de type carte n’est pas très compliqué.
Si vous pensez que vous ne possédez pas les compétences pour ce genre de cartes, vous pouvez toujours vous tourner vers les frameworks CSS.
Néanmoins, le problème ne sera que repousser, il faudra apprendre le framework, qui lui même est conçu en css.

J’espère que cet article vous aura aidé. N’hésitez pas à le partager.

A bientôt sur Outils Web.

Partager