Appelez-nous aujourd'hui ! +33766664691 | contact@develop4fun.com

Les balises CSS3 – partie 1

(Dernière mise à jour: 5 juillet 2023)

Les balises CSS3 sont géniales. Ajoutez des bordures, des effets d’ombre… tout est dans cet article.

Les bords arrondis

Vous pouvez créer des bords arrondis, sur vos boutons, sur vos div, faire des effets sur les images avec des bords arrondis, en combinant plusieurs propriétés.

Vous pouvez utiliser la propriété border-radius pour créer des bords arrondis en renseignant X et Y qui peuvent être soit une valeur, soit un pourcentage.

Les valeurs X ou Y permettent de déterminer des rayons horizontaux et verticaux d’un quart d’éclipse. Avec l’éclipse, elle donne la courbure de l’angle. Si vous indiquez une seule valeur, X est égal à Y.

Vous pouvez définir un angle pour chaque côté. Vous pouvez créer la bordure haute, basse, droite, gauche, là c’est la même chose, vous pouvez définir border-top-right-radius c’est haut droit, border-bottom-right-radius c’est bas droit, border-bottom-left-radius c’est bas gauche, border-top-left-radius c’est haut gauche pour définir l’angle.

Exemple :

.bloc1 {
   border: 2px solid red;
   border-radius: 5px 10px 20px 5px;
}
CSS3 Exemple de bloc avec bords arrondis
Exemple de bloc avec bords arrondis

Comme vous le voyez sur l’exemple ci-dessus, vous pouvez définir des angles arrondis différents suivant les côtés de votre élément. Amusez-vous avec ce code source pour faire des tests, vous pouvez faire des bords arrondis très facilement.

Les bordures CSS3 à partir d’une image

Vous pouvez également créer des bordures à partir d’une image. La propriété border-image prend une image rectangulaire et la divise en neuf parties. Trois en haut, trois en bas et trois au milieu ; les huit parties du contour sont utilisées pour les angles et les côtés.

Utilisez pour cela border-image où vous spécifiez l’URL de votre image. Ensuite, vous avez trois valeurs qui influencent le découpage, la déformation de l’image pour en faire votre bordure.

Et vous avez un modificateur round, repeat ou stretch pour savoir comment est traitée l’image :

round pour reproduire l’image et la redimensionner afin qu’elle s’ajuste exactement à la largeur et la hauteur du bloc,

repeat effectue la même chose que round mais sans ajustement,

stretch, c’est la valeur par défaut qui étire l’image aux dimensions du bloc.

Testez ces trois valeurs, round, repeat ou stretch en fonction du type de rendu graphique que vous souhaitez obtenir avec l’image par rapport à votre bloc.

Exemple :

#bordureImage1 {
   border: 10px solid transparent;
   border-image: url(background.png) 30 25% 16 round;
}

Ajouter une ombre sur du texte

Vous pouvez également ajouter un effet ombré à du texte. Avec par exemple le text-shadow que vous avez peut-être vu en ActionScript flash ou dans d’autre langages.

La propriété text-shadow permet d’ajouter cet effet d’ombre sur du texte.

Vous renseignez X, Y, Z et une couleur où X est le décalage de l’ombre vers la droite, Y le décalage de l’ombre vers le bas, et Z c’est l’intensité du dégradé du flou. Vous pouvez déterminer l’intensité. Enfin, vous transmettez la couleur de l’ombre, en principe c’est noir.

Exemple :

.bloc2 { text-shadow: 2px 2px 3px red; }
CSS Exemple de texte ombré
Exemple de texte ombré

Vous avez la possibilité d’ajouter une ombre sur un bloc avec la propriété box-shadow. Vous avez un bloc et vous pouvez ajouter une ombre : vous avez les mêmes valeurs X, Y, Z, puis la couleur, le décalage de l’ombre vers la droite pour X, Y, le décalage de l’ombre vers le bas, et Z l’intensité du flou, du dégradé.

Exemple :

.effet1 {
   border: 3px solid blue;
   box-shadow: 2px 2px 13px black;
}

Cet effet peut ensuite être appliqué sur n’importe quelle image :

<img src="image.png" class="effet1" alt="Image" />

Sur l’exemple de code source, vous avez une image, image.png est chargée, elle utilise la classe de style effet1. Dans effet1 est définit une bordure de 3 pixels bleus, box-shadow possède un effet. Cette configuration ajoute un effet ombré sur l’image.

Souvent sur des sites, vous avez un effet sur l’image pour la faire ressortir, la mettre en valeur, c’est cette technique qui est utilisée, réalisée directement avec CSS. Testez également cet effet dans vos documents HTML pour constater ce qu’il est possible d’obtenir.

Créer un effet miroir

Vous pouvez créer un effet miroir. L’effet miroir n’est pas géré par tous les navigateurs. La propriété webkit-box-reflect permet d’ajouter un effet miroir : soit sur une image, soit sur du texte.

Vous donnez la direction, la position de l’effet par rapport à l’élément original. Au-dessus avec above, below pour en-dessous, left à gauche et right à droite.

La distance soit en pixels, soit en pourcentage par rapport à l’élément original, zéro est la valeur par défaut.

Un masque est appliqué à l’élément réfléchi. Pour créer, par exemple, un effet de dégradé, c’est un paramètre facultatif.

Exemple :

.txt1 { -webkit-box-reflect: below -35px; }

Effectuer un fondu dimages

Vous pouvez même effectuer un fondu d’images avec la valeur webkit-cross-fade. Cette propriété permet d’effectuer un fondu entre deux images.

Vous utilisez la propriété CSS background-image et webkit-cross-fade avec l’URL de l’image1, l’URL de l’image 2, et un pourcentage.

La valeur du pourcentage permet de définir l’opacité qui est appliquée à la seconde image du fondu. Vous pouvez superposer des images les unes sur les autres, avec cet effet de fondu.

Exemple :

.txt2 {
   background-image: -webkit-cross-fade( url(banniere.png) url(logo1.png) 25%);
}

Voilà un exemple avec une bannière et un logo, et une opacité de 25 %, que vous appliquerez sur une div qui contient du texte. Le résultat obtenu est une image de fond avec un fondu de deux images.

Testez ce code source dans votre document HTML pour créer un résultat sympa. Tout dépend des images que vous allez utiliser bien évidemment. Il est possible de créer un fondu d’images avec ces nouvelles propriétés CSS 3.

Conclusion

Testez ces nouvelles possibilités CSS 3, amusez-vous, innovez dans votre site internet, créez des designs harmonieux, fabuleux, et surtout ergonomiques. Souvenez-vous toutefois que certaines sont encore au stade expérimental et ne sont pas disponibles sur tous les navigateurs.


Voila, vous pouvez maintenant briller en soirée …

Nous avons mis quelques cours en promo sur l’école du web de Develop4fun :
https://www.develop4fun.fr/tous-les-cours

Ici le parcours complet pour devenir développeur web : https://www.develop4fun.fr/parcours-developpeur-web-cours-en-ligne/

Vous pouvez également nous retrouver sur Youtube :

Ici => https://www.youtube.com/channel/UCZ4dhshzpVbbRPVuL9TNH4Q

Ou ici => https://www.youtube.com/channel/UCQlKs3ToaL8IKRbXtwtFnyA

0 réponses sur "Les balises CSS3 – partie 1"

Laisser un message

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *