Les nouvelles balises CSS3 sont géniales.
Ajoutez des bordures, des effets d’ombre… tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Les nouvelles balises CSS3 pour vos sites web – partie 2
Bonjour à tous et bienvenu sur Développement Facile.
Encore un nouveau cours consacré aux nouvelles balises disponibles dans CSS 3 comme ça à travers tous les cours vidéo que vous avez déjà eu, plus les prochains, vous aurez vraiment un panel très complet pour développer avec HTML 5 et CSS 3, c’est parti pour vous montrer un peu les nouvelles balises.
Les bords arrondis
Vous pouvez créer des bords arrondis, donc sur vos boutons, sur vos divs, faire des effets sur les images avec des bords arrondis, tout simplement en combinant plusieurs propriétés, vous pouvez déjà 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. Enfaite, les valeurs X ou Y ça permet de déterminer des rayons horizontaux et verticaux d’un quart d’éclipse, donc comme ça, avec l’éclipse pour donner la courbure de l’angle, tout simplement, donc si vous indiquez une seule valeur, il faut savoir que X est égal à Y.
Bien sûr vous pouvez définir un angle pour chaque côté, comme vous avez vu dans un cours précédent pour créer les bordures, 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, bottom-left c’est bas gauche, top left c’est haut gauche pour définir l’angle.
Vous pouvez définir des angles arrondis différents suivant les côtés du div. Je vous ai mis un exemple de code source justement avec des arrondis différents, suivant l’angle de votre rectangle, amusez-vous avec ce code source pour faire des tests, en principe on met des valeurs identiques pour les quatre angles ou on fait 2 et 2 identiques pour faire des essais, à vous de voir, de tester suivant les designs de vos sites internet, en tout cas vous pouvez faire des bords arrondis très facilement.
Les bordures à partir d’une image
Vous pouvez également, comme je vous l’ai dit, créer des bordures à partir d’une image, la propriété border-image, elle prend une image rectangulaire et la divise en neuf parties, comme ça, donc ça fait neuf en tout. 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 donc, les anges et les côtés, et border-image vous spécifiez l’URL de votre image après ABCD des valeurs valeurs, je vous ai mis un exemple, ABCD c’est la dimension d’un morceau de la grille, rappelez-vous la grille pour faire les neuf parties, et valeurs c’est round, repeat ou stretch
Round ça reproduit les images et ça les redimensionnes pour qu’elles s’ajustent exactement à la largeur et la hauteur du bloc, repeat ça effectue la même chose que round mais sans ajustement, là il n’y a aucun ajustement, et stretch c’est la valeur par défaut qui étire l’image aux dimensions du bloc, donc à vous de voir, de tester ces trois valeurs, round, repeat ou stretch en fonction du type de rendu graphique que vous souhaitez avoir avec l’image par rapport à votre bloc.
Je vous ai mis un exemple de code source, border-image URL background.png avec la valeur round, et des valeurs pour créer, justement, les neufs parties. Appliquez l’image bloc1 la classe style bloc1 à la div, div classe bloc1, le lorem ispum, de toute façon vous retrouverez comme d’habitude un exemple de code source en téléchargement sous ce cours vidéo, à vous de tester ce code source.
Ajouter une ombre sur du texte
Vous pouvez également ajouter un effet ombré à du texte, par exemple le text-shadow que vous avez peut-être vu en ActionScript flash, dans d’autre langages, donc la propriété text-shadow ça permet justement d’ajouter cet effet d’ombre sur du texte. Vous donnez X, Y, Z et une couleur dont X 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, c’est facultatif par défaut c’est égal à zéro mais après vous pouvez déterminer l’intensité et vous transmettez la couleur de l’ombre, en principe c’est noir, après tout dépend du type d’effet que vous souhaitez appliquer, à vous de voir.
Je vous ai mis un exemple de code source, sur du texte, text-align-center le texte est centré avec text-shadow, et ce sera une ombre de couleur rouge, à vous de reprendre ce code source, de le tester dans vos pages HTML pour voir le rendu que vous pouvez obtenir.
Il y a également la possibilité d’ajouter une ombre sur un bloc, la propriété box-shadow vous permet d’ajouter une ombre sur un bloc, vous avez un bloc et vous pouvez ajouter une ombre, vous avez les mêmes valeurs X, Y, Z, que vous connaissez, la couleur, donc 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é.
Je vous ai mis un exemple rapide de code source, là vous avez une image, la balise image on charge image.png qui utilise la classe de style effet1, et dans effet1, on définit une border de 3 pixels donc une bordure de 3 pixels bleus, box-shadow a un effet, ça va faire un effet ombré sur l’image, souvent sur des sites maintenant vous avez un effet sur l’image pour la faire ressortir, la mettre en valeur, c’est comme ça que cet effet est réalisé directement avec CSS. Testez également cet effet dans vos documents HTML pour voir ce qu’il est possible d’obtenir.
Créer un effet miroir
Et vous pouvez créer un effet miroir, il faut savoir que l’effet miroir n’est pas géré par tous les navigateurs, ça dépend de votre navigateur, en tout cas la propriété webkit-box-reflect ça 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 above, below en dessous, left à gauche et right à droite, pour la direction, la distance donc c’est soit aux pixels soit au pourcentage par rapport à l’élément original, donc c’est zéro par défaut, et sinon vous pouvez modifier la distance, et un masque, c’est un masque appliqué à l’élément réfléchit par exemple, pour un effet de dégradé, c’est facultatif comme paramètre.
Je vous ai mis un exemple de code source sur la div class = « txt1 » c’est du texte, du lorem ispum, vous avez une bordure de 3 pixels bleus, la taille des caractères fait 35 pixels et justement cet effet avec below et moins 35 pixels parce que vous pouvez mettre des valeurs négatives comme je vous l’ai dit, pour créer votre effet miroir sur le texte, vous pouvez mettre soit une valeur positive, soit une valeur négative, et donc avec une direction vers le bas, bien évidemment, à vous de tester les effets miroir, avec du texte, avec des images, tout dépend du rendu que vous voulez obtenir sur votre document HTML.
Effectuer un fondu d’images
Vous pouvez même effectuer un fondu d’images avec la valeur webkit-cross-fade, ça permet entre deux images d’effectuer un fondu, donc 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, enfaite, la valeur du pourcentage ça permet de définir l’opacité qui est appliquée à la seconde image du fondu, ainsi vous pourrez mettre des images superposées les unes sur les autres, avec cet effet de fondu.
Je vous ai mis un exemple avec une bannière, un logo, et une opacité de 25 %, sur une div qui contient du texte, on met une image de fond et avec un fondu de deux images. Je vous invite à tester ce code source dans votre document HTML pour voir un résultat plutôt sympa, tout dépend des images que vous allez utiliser bien évidemment, en tout cas il est possible de créer un fondu d’images avec ces nouvelles propriétés CSS 3 ce qui devient très intéressant.
Votre plan d’actions !
Je vous invite à tester ces nouvelles possibilités CSS 3, amusez-vous, innovez dans votre site internet, créez des designs qui soient harmonieux, fabuleux, et surtout ergonomiques. Comme d’habitude retrouvez un exemple de code source en téléchargement sous ce cours vidéo, si vous avez des questions, posez-les directement sous ce cours, et moi je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple CSS3
Voici le code CSS3 avec les nouvelles balises CSS3.
Téléchargement du code source Exemple avec les nouvelles balises CSS3
Cliquez ici pour télécharger le code source Exemple avec les nouvelles balises CSS3
Montrez-moi vos effets CSS3 les plus spectaculaires !
Partagez votre code CSS3 pour créer des effets, des mises en page époustouflantes!
J’ai hâte de voir vos réalisations.