5 effets CSS3 cool que vous verrez plus de

CSS3 (combiné à la puissance de HTML5) est rapidement pris en charge par tous les principaux navigateurs (lecture - tout sauf Internet Explorer), donc je pensais que le moment était venu de voir quelques-uns des effets CSS intéressants que nous pouvons obtenir avec le pouvoir de votre navigateur et un peu de code CSS. Vous devriez pouvoir voir tous les effets présentés dans cet article si vous utilisez le dernier navigateur Chrome, Safari ou Firefox..

First - Qu'est-ce que le 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 Cascade Style SIl ajoute simplement du style et du talent à un site. Les sites Web sont certes lisibles sans CSS, mais ils sont abominables, comme tous les sites Web remonte à 1995. Alors que les fichiers HTML décrivent la structure et le contenu textuel d’une page, le CSS les affiche de la manière prévue par le concepteur. la mise en page, la taille du texte et les couleurs, et maintenant un certain nombre d'effets de fantaisie 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 même de graphiques plus volumineux. CSS peut maintenant décrire à votre navigateur l’aspect qu’il souhaite obtenir de la page et le navigateur se chargera du traitement. C'est comme si je vous confiais le projet de construire votre propre maison au lieu de vous vendre toute la maison - c'est beaucoup moins cher!

Coins arrondis

Internet est progressivement devenu «plus rond», mais maintenant, cela se concrétise dans CSS3. Jetez un coup d'œil à l'encadré entourant ce paragraphe. Ce n'est pas une image - essayez de cliquer avec le bouton droit de la souris pour voir. CSS pur!

Le code pour les coins arrondis est vraiment facile:

.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

Le texte peut parfois sembler très dur, mais une simple petite ombre aide vraiment les choses. Découvrez l'ombre que j'ai appliquée à ce paragraphe.

Voici le code pour certaines ombres de texte:

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

Dégradés

Plus de couleurs plates ou d'images de dégradé d'arrière-plan, vous pouvez désormais créer un dégradé sympa à l'aide de CSS uniquement. Malheureusement, vous avez besoin de quelques lignes en raison de problèmes d’incompatibilité entre navigateurs, mais vous pouvez utiliser l’outil que je décrirai plus tard pour les générer automatiquement..

Voici le code pour les gradients CSS:

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

Rotation

Il est difficile d’imaginer une utilisation pour cela en termes de texte, mais cela peut ajouter de jolis éléments de conception lors de l’utilisation d’images, par exemple. Encore une fois, notez que même si ce paragraphe a été pivoté, vous pouvez toujours le sélectionner et interagir avec lui car il reste du texte normal.

Voici le code pour faire pivoter quelque chose:

 .box_rotate -moz-transform: rotation (7.5deg); / * FF3.5 + * / -o-transform: rotation (7.5deg); / * Opera 10.5 * / -webkit-transform: rotation (7.5deg); / * Saf3.1 +, Chrome * / -ms-transform: rotation (7.5deg); / * IE9 * / transform: rotation (7.5deg); filtre: progid: DXImageTransform.Microsoft.Matrix (/ * IE6-IE9 * / M11 = 0.9914448613738104, M12 = -0.13052619222005157, M21 = 0.13052619222005157, M22 = 0.99144486137384, nettoie zoom: 1;  

Animation

Oh oui, j'ai gardé le meilleur jusqu'à la fin. CSS3 introduit diverses formes d'animation pour un nombre quelconque des effets CSS intéressants décrits. Sur ce paragraphe, j'ai défini la propriété de transition comme indiqué ci-dessous, ainsi qu'une couleur d'arrière-plan simple et une rotation lorsque vous la survolez. Si ce n'est déjà fait, survolez maintenant ce paragraphe pour voir l'effet en action. Vous pouvez animer à peu près n'importe quoi!

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

 .box_transition -moz-transition: allègement de tous les 0.5s; / * FF4 + * / -o-transition: allègement de tous les 0.5s; / * Opera 10.5+ * / -webkit-transition: tous les 0.5s de détente; / * Saf3.2 +, Chrome * / -ms-transition: tous les 0.5s en moins; / * IE10? * / transition: allégement de tous les 0.5s;  

Incompatibilités entre les navigateurs

Bien que la plupart des navigateurs modernes prennent en charge l'ensemble de CSS3 à certains égards, certains nécessitent toujours un code ou des hacks légèrement différents pour que cela fonctionne 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 à des navigateurs basés sur Mozilla ou sur Webkit. L'écriture de ces lignes supplémentaires peut être un problème, alors consultez le 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 assister à une nouvelle vague de texte clignotant et à un ratio élevé de whiz-bang par rapport au contenu réel (comme nous le faisions lorsque les GIF animés étaient les premiers “découvert”) mais à long terme, nous allons apprendre à utiliser les outils de CSS3 pour créer des interfaces Web plus intéressantes. Et hé, vous pouvez toujours tout désactiver!

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

En savoir plus sur: HTML, HTML5, Programmation, Développement Web.