Plusieurs astuces CSS3 à connaître

Beaucoup d’entre vous ont peut-être entendu beaucoup de rumeurs sur CSS3, mais quelles sont les techniques CSS3 que nous pouvons réellement utiliser aujourd’hui ? Dans cet article, je vais vous montrer quelques techniques CSS3 distinctives qui fonctionnent bien dans certains principaux navigateurs (tels que les navigateurs Firefox, Chrome, Safari, Opera). Ces effets dégraderont le rendu dans les navigateurs non pris en charge (tels qu'Internet Explorer). La plupart des styles CSS3 proposés peuvent être utilisés directement à l'aide de déclarations spécifiques au navigateur.

Si vous ne savez pas quelles sont les déclarations spécifiques au navigateur, rappelez-vous simplement qu'il s'agit de préfixes spécifiques avant les propriétés de style CSS liées au fournisseur du noyau. Comme CSS3 n'est pas encore entièrement pris en charge, nous devons utiliser ces déclarations spécifiques. La forme spécifique est la suivante :

* Préfixe du navigateur Mozilla/Firefox/Gecko : -moz-
* Préfixe du navigateur Webkit (Safari/Chrome) : -webkit- (Remarque : certains préfixes Wbkit ne peuvent être utilisés que sous Safari et ne sont pas pris en charge par Chrome.)

Comme vous l'avez peut-être vu, l'un des inconvénients de l'utilisation de ces déclarations est que si nous voulons obtenir des effets CSS3 dans Firefox, Safari et Chrome, nous devons utiliser tous les préfixes ci-dessus. Sans surprise, Internet Explorer ne prend pas en charge CSS3 et n'a donc pas de déclaration de préfixe spécifique comme les autres principaux navigateurs.

Bon, ça suffit, essayons tout de suite. Remarque : Les déclarations de style moins ces préfixes sont les propositions de spécifications réelles de la norme W3.

Démo (exemple) description de cette page

Tous ces exemples se trouvent sur cette page. Si vous ne pouvez pas visualiser normalement les effets des exemples (ou ne pouvez en visualiser qu'une partie), cela signifie que le navigateur que vous utilisez ne prend pas en charge ces effets CSS3.

effet d'ombre

Les effets d'ombre acceptent plusieurs valeurs de paramètres. La première est la couleur de l'ombre, qui accepte également quatre autres valeurs de longueur (longueur). Les deux premières valeurs de longueur sont le décalage X (horizontal) et le décalage Y (vertical). Le paramètre suivant est une valeur qui reflète le flou. La quatrième et dernière valeur permet de définir la répartition du flou.

boîte-ombre : #333 3px 3px 4px ;
-moz-box-shadow : #333 3px 3px 4px ;
-webkit-box-shadow : #333 3px 3px 4px ;

Démonstration de l'effet d'ombre

effet dégradé

Les styles de dégradé CSS3 peuvent prêter à confusion au début, en particulier les différences entre les dégradés -moz et -webkit. Dans -moz, vous devez d'abord définir la direction du dégradé, puis définir les couleurs de début et de fin. Le dégradé de -webkit est un peu plus compliqué. Vous devez d'abord définir le type de dégradé, puis les deux valeurs suivantes définissent la direction et les deux dernières valeurs définissent la couleur de départ et la couleur de fin. du dégradé.

-moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linéaire, en haut à gauche, en bas à gauche, de(#1aa6de), à(#022147));

Démonstration de l'effet dégradé

Mode couleur RVBA

La définition réelle des couleurs de RGBA n'est pas aussi compliquée qu'il y paraît. Elle accepte quatre valeurs de paramètres : la valeur rouge, la valeur verte, la valeur bleue et la transparence. Nous n'utilisons pas la valeur hexadécimale de la couleur. Nous définissons la couleur en mode RVB, où la transparence peut définir l'effet transparent de la couleur. La transparence va de 0 à 1, 0 étant complètement opaque et 1 étant complètement transparent. La transparence des exemples de démonstration suivants est de 0,5, la transparence de l'élément est de 50 %, rgba ne nécessite aucune déclaration de préfixe de navigateur spécifique.

couleur d'arrière-plan : rgba(0, 54, 105, .5) ;

Mode couleur HSL (Teinte H, Saturation S, Luminosité L)

En plus du RGBA, CSS3 prend également en charge le mode couleur HSL. Cela nous laisse une grande liberté dans le choix des couleurs et des tons. Dans le modèle de couleur HSL, H représente la teinte, S représente la saturation et L représente la luminosité. La teinte est la valeur de l'angle sur la roue chromatique, tandis que la saturation et la luminosité sont les valeurs en pourcentage de la couleur.

couleur d'arrière-plan : hsl (209,41,2 %, 20,6 %);

Exemple de démonstration HSL

couleur de la bordure

Pour utiliser ce style CSS, vous devez définir respectivement border-top, border-right, border-bottom et border-left pour obtenir les effets suivants. Vous remarquez qu'une bordure de 8 pixels est définie, puis la bordure est définie en 8 couleurs différentes. En effet, le nombre de couleurs de la bordure doit correspondre à la valeur de largeur en pixels de la bordure.

bordure : 8px solide #000 ;
-moz-border-bottom-colors : #555 #666 #777 #888 #999 #aaa #bbb #ccc ;
-moz-border-top-colors : #555 #666 #777 #888 #999 #aaa #bbb #ccc ;
-moz-border-left-colors : #555 #666 #777 #888 #999 #aaa #bbb #ccc ;
-moz-border-right-colors : #555 #666 #777 #888 #999 #aaa #bbb #ccc ;

Démo de couleur de bordure

Paramètres de couleur de sélection de texte

Je dois dire que la définition des couleurs de sélection de texte est une nouvelle fonctionnalité plutôt intéressante. Quand j'ai vu cela pour la première fois sur CSS Tips, j'ai pensé que c'était très réfléchi. Avec la paire de pseudo-éléments ::selection, vous pouvez changer la couleur et l'arrière-plan lorsque l'utilisateur sélectionne un élément de texte. Si vous demandez un avis, je trouve que c'est très beau. Bien que ::selection ait été supprimé du brouillon CSS3 actuel, nous espérons l'ajouter plus tard.

::sélection {arrière-plan : #3C0 ; /* Safari */couleur : #90C;} ::-moz-selection {arrière-plan : #3C0 ; /* Firefox */couleur : #90C;}

Démonstration de couleur de sélection de texte

déformation

Avec les styles de transformation, vous pouvez agrandir un élément au survol de la souris. Définissez la valeur d'échelle sur une valeur supérieure à 1 et l'élément rétrécira. A l’inverse, si la valeur est inférieure à 1, la taille de l’élément est réduite. En plus de l'échelle, de nombreuses autres déformations sont disponibles. Vous pouvez visiter la page des développeurs Firefox pour voir ce qu'ils peuvent réaliser

-moz-transform : échelle (1.15) ; -webkit-transform : échelle (1.15) ;

Démonstration de l'effet de déformation

disposition multi-colonnes

Avec ce nouveau style de mise en page multi-colonnes, vous pouvez donner à votre texte un effet de mise en page « journal ». Par rapport à la méthode d'implémentation en CSS2, en CSS3, il nous est beaucoup plus simple d'obtenir ce type d'effet. Ci-dessous, je précise le nombre de colonnes dont l'oiseau a besoin, ainsi que le type de règles de séparation et la taille des écarts entre les colonnes. C'est facile à utiliser, non ?

-moz-column-count:3;-moz-column-rule: solide 1px noir;-moz-column-gap: 20px;

Résumer

J'espère que je suis aussi enthousiasmé que moi par ces fonctionnalités de CSS3. Il donne plus de pouvoir aux concepteurs et aux développeurs Web et simplifie de nombreux aspects. Il ne reste plus qu'à attendre que tous les navigateurs le prennent en charge. Bien entendu, les connaissances que je démontre ici ne sont que la pointe de l’iceberg des nouvelles fonctionnalités CSS3. Si vous souhaitez plus d'informations, de conseils et d'aide, je vous recommande de visiter les sites Web suivants.