5 nouvelles technologies CSS3 à connaître

CSS est un langage de style de sites Web bien connu et largement utilisé. Dans sa version 3 (CSS3), de nouvelles fonctionnalités permettant de gagner du temps ont été ajoutées. Bien que ces effets ne soient supportés que par les dernières versions des navigateurs, il reste nécessaire et intéressant de les connaître. Bao Fengbinbin vous montrera 5 nouvelles technologies intéressantes en CSS dans cet article : coins arrondis, coins arrondis individuels, opacité, ombre et éléments de redimensionnement.

1 : Marque de base

Avant de commencer ce didacticiel, créons le balisage de base qui sera utilisé tout au long du didacticiel.

Notre xHTML nécessite les éléments div suivants :

#round, utilise le code CSS3 pour obtenir des coins arrondis.

#indie, appliquez quelques filets individuels.

#opacity, démontre la nouvelle manière CSS3 d'implémenter l'opacité.

#shadow, montre comment utiliser CSS3 pour obtenir un effet d'ombre sans utiliser Photoshop.

#resize, montre comment utiliser du CSS pour obtenir un effet de redimensionnement.

Pour résumer, notre xHTML devrait ressembler à ceci :

Voici le contenu cité : ​​

Créons le fichier CSS de base :

Comme vous pouvez le voir ci-dessus, nous avons donné à chaque élément div une largeur et une hauteur de 300 px et les avons laissés flotter vers la gauche, nous laissant ainsi les divs de la page entière pour que nous puissions les styliser plus tard.

2 : coins arrondis

Actuellement, il existe de nombreuses façons de créer des congés, mais elles sont toutes fastidieuses. La méthode la plus courante : vous devez d’abord créer une image avec des coins arrondis ; ensuite, vous devez créer de nombreux éléments HTML et utiliser une image de fond pour afficher les coins arrondis. Vous et moi connaissons très bien le processus spécifique.

Ce problème sera facilement résolu en CSS3 avec une propriété appelée "border-radius". Nous créons d’abord un élément div noir et lui fixons une bordure noire. La bordure est la condition préalable pour obtenir l'effet de l'attribut "border-radius".

Comme ça:

Maintenant que vous avez créé l'élément div, il ressemble exactement à ce que vous attendiez, 300 px de haut, angulaire et noir. Ajoutons maintenant le code pour implémenter les coins arrondis. C'est si simple et ne nécessite que deux lignes de code.

Ici, nous avons ajouté deux lignes de code similaires, -moz- pour le navigateur Firefox et -webkit- pour le navigateur Safari/Chrome.

Remarque : Jusqu'à présent, le navigateur IE ne prend pas en charge l'attribut border-radius. Par conséquent, si vous souhaitez qu'IE ait un effet de coins arrondis, vous devez ajouter des coins arrondis séparément.

La traduction littérale de la propriété border-radius est le rayon de la bordure. Tout comme dans Photoshop, plus sa valeur est grande, plus les coins arrondis sont grands.

3 : Coins arrondis individuels

Si vous suivez les habitudes du passé, cela vous fera perdre beaucoup de temps. Désormais, CSS3 peut le résoudre rapidement !

Maintenant, nous voulons juste que les coins supérieur droit et inférieur droit du div soient arrondis, nous n'avons donc besoin que de légères modifications :

Imaginez pour quels éléments de la page Web cette approche serait utilisée ! Oui, c'est le bouton de navigation par onglets !

4 : Modifier l'opacité à l'aide de CSS3

Vous pouvez désormais écrire classiquement quelques lignes de code pour implémenter l'effet d'opacité (hack). Cependant, CSS3 simplifie ce processus.

Cette ligne de code est facile à retenir, il suffit de "opacity: value;":

5: effet d'ombre

Il existe de nombreuses façons d'obtenir des ombres. La plus courante consiste à utiliser Photoshop pour créer une image d'ombre, puis à l'appliquer aux propriétés d'arrière-plan. Mais CSS3 rend votre travail plus efficace. Malheureusement, seuls Safari et Chrome prennent actuellement en charge cette nouvelle fonctionnalité.

Il ne nécessite qu'une seule ligne de code, mais il a 4 valeurs différentes :

Laissez-moi vous expliquer ce que représentent ces quatre valeurs. Le premier 3px est la distance horizontale (horizontale) entre l'ombre spécifiée et l'élément div, et le deuxième 5px fait référence à la distance verticale (verticale) entre l'ombre et le div. le troisième 10px fait référence au flou de l'ombre (similaire au dégradé dans Photoshop), plus la valeur est grande, plus elle est délicate. Tout le monde sait que la valeur finale est la couleur de l'ombre.

Notre code final pour l'effet d'ombre ;

Comme vous pouvez le voir, notre div a un fond blanc, une bordure noire et une ombre gris clair.

6 : Redimensionner

Dans la dernière version de CSS, il est possible de redimensionner les éléments (mais actuellement uniquement pris en charge par Safari)

Après avoir utilisé ce code, un petit triangle apparaîtra dans le coin inférieur droit de notre élément pour rappeler à l'utilisateur que cet élément peut être redimensionné. Le code est encore très simple, on peut dire qu'il ne nécessite qu'une seule ligne de code. Bien entendu, vous pouvez également utiliser certaines propriétés que vous avez utilisées auparavant, comme "max-width", "max-height", ". min-largeur" ​​et "min-hauteur".

Ici, nous parlons principalement des attributs de redimensionnement et de débordement : resize : signifie que tous les côtés peuvent être redimensionnés. Ses valeurs incluent également horizontales et verticales. Le débordement doit fonctionner avec le redimensionnement, donc auto est utilisé ici.

Résumer

Alors, avez-vous retiré quelque chose de cet article ? Bien que seuls quelques navigateurs supportent désormais CSS3, il est indéniable que CSS3 nous fera effectivement gagner plus de temps dans notre travail. Si vous avez des connaissances et une certaine compréhension de l'amélioration progressive, je pense que vous accepterez facilement cette nouvelle version puissante de CSS3. Ne passez pas tout votre temps sur IE6, sinon vous ne serez qu'un ingénieur de développement front-end obsolète.