Découvrez les nouvelles balises CSS3 pour ajouter facilement des effets sur vos textes, des dégradés de couleurs…
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment utiliser les nouvelles balises CSS3 – partie 2
Bonjour à tous et bienvenu sur Développement Facile.
On continue ensemble avec les nouvelles balises disponibles dans CSS 3. Justement vous avez déjà eu plusieurs cours consacrés aux nouvelles balises, mais ce n’est pas finit, il y en a d’autres que je vous invite à découvrir à travers ce cours vidéo.
Un résumé sur les titres longs
Vous pouvez effectuer un résumé, des fois vous avez des titres très longs qui vont dépasser l’emplacement div, et donc la propriété text-overflow permet d’afficher un résumé des articles ou des commentaires donc c’est une propriété très utilisée notamment dans les blogs wordPress donc text-overflow: clip, ça coupe le texte qui dépasse, ellipsis ça termine le texte avec des points de suspension automatiquement, très pratique, et string ça termine le texte avec une chaîne de caractères que vous définissez.
Je vous montre un exemple, dans cet exemple, vous avez text-overflow qui va terminer le texte avec une chaine de caractères etc., je vous ai mis trois différences pour le texte overflow, donc rappelez-vous, il y a clip, ellipsis et string, j’ai mis text-overflow-clip, pour clip, ellipsis pour ellipsis et string avec une chaine de caractères, et je vous ai fait 4 divs avec 4 affichages du même texte et le texte sera résumé en fonction clip ellipsis et string, reprenez ce code source dans votre document HTML pour voir les différents affichages, et essayez la balise CSS 3 avec la valeur de texte overflow qui vous convient le mieux, celle que vous préférez utiliser dans le design de votre site internet.
Vous avez également des sauts à la ligne automatique pour un texte avec la propriété webkit-hyphens. Donc ça permet de couper automatiquement les mots d’un texte, none, les mots ne sont pas coupés, manual les mots sont coupés seulement au niveau des caractères qui suggère la possibilité d’une césure, par exemple des mots que l’on coupe avec un tiret pour aller à la ligne, et automatique c’est justement le navigateur qui réalise les coupures des mots aux endroits adéquat, et donc cela dépend du navigateur que l’internaute utilise.
Je vous ai mis un exemple de texte le lorem ipsum avec hyphens, la coupure des mots automatiques suivant le navigateur. Je vous ai mis –moz-hyphens :auto, -ms-hyphens :auto, hyphens :auto, et webkit-hyphens :auto, c’est pour que cette propriété soit reconnue par tous les navigateurs, Mozilla FireFox, Google Chrome, ça paraît etc. Il existe certaines propriétés CSS 3 qui sont encore au stade expérimental et qui sont intégrées plus ou moins différemment par les navigateurs, il faut utiliser plusieurs mots-clés avec -webkit, -moz, -ms et la propriété CSS, juste derrière. C’est pour ça qu’elle est affichée plusieurs fois dans le code source, reprenez ce code source, faites des tests sur différents navigateurs pour voir le résultat de votre côté.
Redimensionner un bloc
Vous pouvez redimensionner un bloc avec la propriété resize, elle prend plusieurs valeurs, 4 valeurs la propriété resize none, l’utilisateur ne peut pas redimensionner le bloc, vous avez un bloc div soit avec du texte, soit avec une image,
resize none, l’utilisateur ne peut pas redimensionner le bloc,
both l’utilisateur peut redimensionner le bloc à la fois en hauteur comme ça, et en largeur, horizontal l’utilisateurs peut redimensionner le bloc uniquement en largeur,
vertical l’utilisateur peut redimensionner le bloc uniquement en hauteur.
Maintenant vous pouvez définir ces paramètres par rapport à vos blocs div est-ce qu’ils sont redimensionnables par l’utilisateur.
Je vous ai mis un exemple de code source avec un resize vertical donc uniquement en hauteur, le redimensionnement du bloc, à vous de reprendre ce code source et comme d’habitude, faites les exercices que je vous donne dans les cours vidéo, comme ça que vous allez progresser avec CSS 3 et que vous allez petit à petit implémenter ces nouvelles propriétés valeurs, CSS 3 dans vos site Internet.
Effectuer un dégradé de couleur linéaire
Vous pouvez carrément effectuer des dégradés de couleurs, linéaires parce qu’il y a plusieurs types de dégradés de couleurs qu’il est possible de faire avec CSS 3, il faut savoir que CSS 3 il contient plusieurs nouvelles propriétés valeurs, pour faire tout un tas de chose, c’est pour ça que j’ai créé plusieurs cours vidéos, pour vous aider toujours des cours vidéo de moins de 10 minutes.
Vous avez la propriété background :linear-gardient, qui permet d’effectuer un dégradé de couleurs linéaire dans un bloc. Vous définissez la couleur de début, la couleur de fin, et le départ donc la valeur de départ se détermine avec top par défaut, left, rigth ou bottom, ou vous démarrez votre dégradé top en haut, bottom en bas, left à gauche, right à droite, vous donnez une couleur de début du dégradé, une couleur de fin, et pareil, cette propriété s’utilise avec les préfixes webkit, moz, oms, car suivant les navigateurs, elle n’est pas intégrée exactement pareil.
Je vous ai mis deux URL pour générer des dégradés de couleurs directement avec le code source disponible, ça va encore plus vous simplifier la vie, vous rentrez vos paramètres de dégradés de couleurs et ça vous génère le code source CSS directement, vous n’avez plus qu’à faire un copier-coller dans votre fichier CSS, très pratique ces deux liens, je les rajouterais en version cliquable directement sous le cours vidéo.
Je vous ai mis un exemple de code source pour créer un dégradé de couleur à partir du haut, couleur1 : 124DEF, 2eme couleur de dégradé : DEF124, vous verrez ce que donne ce dégradé de couleurs directement sur un bloc div, comme il y a sur l’exemple, reprenez le code source, réutilisez-le de votre côté.
Effectuer un dégradé de couleur circulaire
Bien évidemment pouvez créer des dégradés de couleurs, linéaire c’est comme ça, et des dégradés de couleur sous forme de cercle circulaire, donc vous donnez le point central du dégradé de couleur, vous pouvez utiliser un des mots-clés que vous connaissez maintenant par cœur top, right, bottom, left, la forme du gradien, donc radiale soit circulaire, soit en ellipse, soit sous forme de cercle, soit sous forme d’ellipse, et la couleur de début et puis la couleur de fin du dégradé.
Je vous montre un exemple de code source, il faut utiliser les paramètres webkit mode mfo et donc sur la même div que tout à l’heure dans l’exemple précédent, là on fait un dégradé de couleur circulaire.
Ajouter de la transparence
Vous avez la propriété opacity qui permet de modifier la transparence d’un élément, si vous avez fait de l’ActionScript flash ça correspond à la propriété alpha en ActionScript, il suffit, dans la propriété opacity, de définir une valeur comprise entre zéro, votre élément sera invisible, et un il n’y aura aucune transparence dessus.
Je vous ai mis un exemple de code source avec du texte et une image, en fonction si vous passez la souris au-dessus de l’image et vous sortez de l’image, l’opacité va modifier, donc la transparence de l’image va être modifiée en direct, voici l’exemple de code source que vous pouvez reprendre, bien évidemment, vous amusez avec, faire des textes, modifier la transparence sur les textes, la transparence sur les images, très pratique ce paramètre de CSS 3 opacity, utilisez-le dans votre site internet.
Votre plan d’actions !
Bien évidemment vous pouvez télécharger un exemple de code source directement sous ce cours vidéo, si vous avez des questions posez-les également sous ce cours vidéo, je vous invite à tester ces nouvelles fonctionnalités CSS 3 et je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple CSS3
Retrouvez un exemple de code CSS3 avec ces nouvelles balises CSS3.
Téléchargement du code source Les nouveaux effets de texte avec CSS3.
