Utiliser les balises CSS3 – partie 2

Découvrez les balises CSS3 pour ajouter facilement des effets sur vos textes, des dégradés de couleurs…

Un résumé sur les titres longs

Vous pouvez être face à des titres très longs qui vont dépasser le cadre de la div.

La propriété text-overflow permet dans ce cas d’afficher un résumé des articles ou des commentaires. C’est une propriété très utilisée, notamment dans les blogs WordPress.

Vous trouverez text-overflow: clip qui coupe le texte qui dépasse.

ellipsis termine le texte avec des points de suspension automatiquement.

string termine le texte avec une chaîne de caractères que vous définissez.

Exemples :

.clip {
  overflow: hidden;
  text-overflow: clip;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
}

.string {
  overflow: hidden;
  text-overflow: ", etc.";
}

Suivant vos besoins, vous utiliserez l’un des trois exemples ci-dessus. Dans le dernier cas, le titre trop long se termine avec les caractères « , etc. ».

Saut à la ligne automatique pour un texte

Vous avez également les sauts à la ligne automatiques pour un texte avec la propriété hyphens.

Cette propriété permet de couper automatiquement les mots d’un texte en fonction de la valeur que vous préciserez.

none, les mots ne sont pas coupés.

manual, les mots sont coupés seulement au niveau des caractères qui suggèrent la possibilité d’une césure. Par exemple des mots séparés avec un tiret pour aller à la ligne.

auto, le navigateur qui réalise les coupures des mots aux endroits adéquats, cela dépend du navigateur que l’internaute utilise.

Attention avec hyphens, la coupure des mots automatiques dépend du navigateur. Vous avez –moz-hyphens: auto, -ms-hyphens: auto, hyphens: auto, et webkit-hyphens: auto pour que cette propriété soit reconnue par tous les navigateurs.

Il existe certaines propriétés CSS3 qui sont encore au stade expérimental et qui sont intégrées plus ou moins différemment par les navigateurs. Alors utilisez plusieurs mots-clés avec le préfixe -webkit, -moz, -ms et la propriété CSS, juste derrière. C’est pour cela qu’elle est affichée plusieurs fois dans le code source.

Faites des tests sur différents navigateurs pour vérifier le résultat de votre côté.

Redimensionner un bloc avec le Css3

Vous pouvez redimensionner un bloc avec la propriété resize. Elle prend plusieurs valeurs :

none, l’utilisateur ne peut pas redimensionner le bloc. Vous avez un bloc div soit avec du texte, soit avec une image.

resize: none empêche l’utilisateur de redimensionner le bloc.

both, l’utilisateur peut redimensionner le bloc à la fois en hauteur et en largeur.

horizontal, l’utilisateur 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 ou non.

Effectuer un dégradé de couleur linéaire

Vous pouvez carrément effectuer des dégradés de couleurs. Commençons par les linéaires. Plusieurs types de dégradés de couleurs sont possibles avec CSS3.

Vous avez la propriété background: linear-gradient, 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.

Comme premier paramètre vous indiquez d’où part votre dégradé :

top par défaut, left, right ou bottom suivant que votre dégradé parte d’en haut, du bas, de la gauche ou de la droite.

Cette propriété s’utilise avec les préfixes -webkit, -moz, -ms, car suivant les navigateurs, elle n’est pas intégrée exactement de la même façon.

Voici deux URL pour générer des dégradés de couleurs directement avec le code source disponible. Cela va encore plus vous simplifier la vie.

Vous rentrez vos paramètres de dégradés de couleurs et le code source CSS est généré automatiquement. Vous n’avez plus qu’à faire un copier-coller dans votre fichier CSS3.

http://www.colozilla.com/gradient-editor

http://gradients.glrzad.com

Exemple :

.txt1 {
  background: -webkit-linear-gradient(top, #124DEF, #DEF124);
  background: -moz-linear-gradient(top, #124DEF, #DEF124);
  background: -ms-linear-gradient(top, #124DEF, #DEF124);
  background: -o-linear-gradient(top, #124DEF, #DEF124);
  background: linear-gradient(top, #124DEF, #DEF124);
}

Cet exemple de code source crée un dégradé de couleurs à partir du haut, couleur1 : #124DEF, couleur2 : #DEF124.

Vous pouvez si vous le souhaitez, ajouter d’autres couleurs sur votre dégradé en continuant la liste #124DEF, #DEF124 avec autant de couleurs que vous le souhaitez.

Effectuer un dégradé de couleur circulaire

Vous pouvez aussi créer des dégradés de couleurs circulaires. Vous donnez le point central du dégradé de couleurs.

Vous pouvez utiliser un des mots-clés que vous connaissez maintenant par cœur : top, right, bottom, left. Ensuite, vous donnez la forme du gradient, soit circle (circulaire), soit ellipse (en ellipse, c’est la valeur par défaut), et la couleur de début et puis la couleur de fin du dégradé.

Exemple :

.txt1 {
  background: -webkit-radial-gradient(top, circle, #124DEF, #DEF124);
  background: -moz-radial-gradient(top, circle, #124DEF, #DEF124);
  background: -ms-radial-gradient(top, circle, #124DEF, #DEF124);
  background: -o-radial-gradient(top, circle, #124DEF, #DEF124);
  background: radial-gradient(top, circle, #124DEF, #DEF124);
}

Ajouter de la transparence

La propriété opacity permet de modifier la transparence d’un élément. Si vous avez fait de l’ActionScript Flash, elle correspond à la propriété alpha en ActionScript.

Dans la propriété opacity, définissez une valeur comprise entre zéro et un. Zéro, votre élément sera invisible, et un, il n’y aura aucune transparence dessus.

Exemple :

.txt1 { opacity: 0.8; }

Et voici un exemple de code source avec du texte et une image :

<img src="logo.png" onmouseover="this.style.opacity=1; this.filters.alpha.opacity=100;" onmouseout="this.style.opacity=0.4; this.filters.alpha.opacity=40;" />

Quand vous passez la souris au-dessus de l’image et quand vous sortez de l’image, l’opacité va être modifiée, la transparence de l’image est modifiée en direct.

Conclusion

Dans cet article, nous vous avons présenté plusieurs fonctionnalités qui viennent compléter ce que vous avez vu dans les précédents articles. Par exemple, vous pouvez définir des blocs CSS3 de dimension limitée. Si le texte est trop long, il sera tronqué avec la propriété text-overflow.

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