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: 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 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: 400px;
		height:150px;
		padding:5px;
		border:1px solid #aaa;
		background:#f9fafb;
		border-radius:4px;"
		> 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;
		background:#f9fafb;
		border:10px solid #aaa;
		border-radius:4px;
		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);"
		> Mon texte </div>

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

4. Ajouter du contenu.

Nom : Le Chat 🐱

Prénom : A lunettes

Age : Oui

Sexe : Rose

  • La carte plus son contenu : 
    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>

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