5 effets CSS3 sympas dont vous verrez plus

Publicité

CSS3 (combiné avec la puissance de HTML5) est rapidement pris en charge par tous les principaux navigateurs (lecture - tout sauf Internet Explorer), donc je pensé maintenant serait un bon moment pour voir certains des effets CSS sympas que nous pouvons obtenir en utilisant la puissance de votre navigateur et un peu de code CSS. Vous devriez pouvoir voir tous les effets démontrés dans cet article si vous utilisez le dernier navigateur Chrome, Safari ou Firefox.

Premièrement - Qu'est-ce que CSS?

Si vous lisez cet article parce que vous êtes intrigué mais que vous n'avez aucune idée de ce que signifie CSS, laissez-moi vous expliquer rapidement. CSS est le langage de codage utilisé pour décorer les pages Web. Ça signifie Cascendant Style Sheet, et ajoute simplement du style et du flair à un site. Les sites Web sont certainement lisibles sans leur CSS, mais ils sont hideux comme tous les sites Web l'étaient en 1995. Alors que les fichiers HTML décrivent la structure et le contenu textuel d'une page, le CSS les fait afficher de la façon dont le concepteur prévu, et déterminez tout de la mise en page, la taille du texte et les couleurs, et maintenant un certain nombre d'effets fantaisistes avec l'introduction de CSS3.

Dans le passé, obtenir le même type d'effets que ceux décrits dans cet article aurait signifié le téléchargement de CSS volumineux ou de graphiques encore plus grands. Maintenant, CSS peut simplement décrire à votre navigateur à quoi il aimerait que la page ressemble, et le navigateur gérera le traitement. C'est comme si je vous remettais les plans de construire votre propre maison au lieu de vous vendre toute la maison - c'est beaucoup moins cher!

Coins arrondis

Le code pour les coins arrondis est vraiment simple:

.box_round {-moz-border-radius: 20px; / * FF1 + * / -webkit-border-radius: 20px; / * Saf3-4, iOS 1+, Android 1.5+ * / border-radius: 20px; / * Opera 10.5, IE9, Saf5, Chrome, FF4 * /}

Ombre de texte

Voici le code de certaines ombres de texte:

.box_textshadow {text-shadow: 1px 1px 3px # 888; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * / }

Dégradés

Voici le code des dégradés CSS:

.box_gradient {background-color: # 3f9fe3; image d'arrière-plan: -moz-gradient linéaire (haut, # 3f9fe3, #white); / * FF3.6 * / fond: -moz-gradient linéaire (haut, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * firefox * / background-image: -ms-linear-gradient (haut, # 3f9fe3, #white); / * IE10 * / background-image: -o-linéaire-gradient (haut, # 3f9fe3, #white); / * Opera 11.10+ * / background-image: -webkit-gradient (linéaire, gauche en haut, gauche en bas, de (# 3f9fe3) à (#white)); / * Saf4 +, Chrome * / image de fond: -webkit-linear-gradient (haut, # 3f9fe3, #white); / * Chrome 10+, Saf5.1 + * / image de fond: gradient linéaire (haut, # 3f9fe3, #white); filtre: progid: DXImageTransform. Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = '# white'); / * IE6 – IE9 * / }

Rotation

Voici le code pour faire pivoter quelque chose:

.box_rotate {-moz-transform: rotation (7,5 degrés); / * FF3.5 + * / -o-transform: rotation (7,5 degrés); / * Opera 10.5 * / -webkit-transform: rotation (7,5 degrés); / * Saf3.1 +, Chrome * / -ms-transform: rotation (7,5 degrés); / * IE9 * / transform: rotation (7,5 degrés); filtre: progid: DXImageTransform. Microsoft. Matrice (/ * IE6 – IE9 * / M11 = 0.9914448613738104, M12 = -0.13052619222005157, M21 = 0.13052619222005157, M22 = 0.9914448613738104, sizingMethod = 'auto expand'); zoom: 1; }

Animation

Vous aurez besoin du code de transition comme celui-ci pour tout élément que vous souhaitez modifier. Vous devrez également utiliser certaines pseudo-classes CSS (telles que: survoler pour modifier les propriétés que vous souhaitez animer, telles que la couleur, la taille ou la rotation)

.box_transition {-moz-transition: tous les 0.5s se relâchent; / * FF4 + * / -o-transition: tous les 0.5s se relâchent; / * Opera 10.5+ * / -webkit-transition: tous les 0.5s facilitent; / * Saf3.2 +, Chrome * / -ms-transition: tous les 0.5s facilitent; / * IE10? * / transition: tous les 0.5s se relâchent; } 

Incompatibilités entre navigateurs

Bien que la plupart des navigateurs modernes prennent en charge l'ensemble de CSS3 à certains égards, certains nécessitent encore du code ou des hacks légèrement différents pour le faire fonctionner avec leur implémentation particulière de la norme. Dans le code ci-dessus, par exemple, vous verrez de nombreuses instances de -moz- ou -webkit- précédant certaines des propriétés CSS, qui se rapportent aux navigateurs basés sur Mozilla ou Webkit. L'écriture de ces lignes supplémentaires peut être pénible, alors consultez la générateur css3 pour les écrire pour vous.

Conclusion

Le Web va devenir beaucoup plus excitant avec les nouvelles extensions CSS3 et HTML5. Certes, nous allons voir une autre poussée de texte clignotant et un rapport élevé de whiz-bang au contenu réel (tout comme nous l'avons fait lorsque Les GIF animés ont d'abord été «découverts») mais à long terme, nous apprendrons à utiliser les outils de CSS3 pour rendre le Web plus intéressant interfaces. Et bon, vous pouvez toujours tout désactiver!

Si vous êtes vous-même concepteur ou développeur Web, n'oubliez pas que CSS3 ne devrait jamais être la seule option. Si votre site ne fonctionnera pas sans CSS3, vous ne l'avez pas utilisé correctement. CSS devrait être utilisé pour améliorer l'expérience, pas la fonctionnalité du programme.