William Charles
0 
2703
418
CSS3 (combiné à la puissance de HTML5) est rapidement pris en charge par tous les principaux navigateurs (lecture - tout sauf Internet Explorer). Je pensais donc que le moment serait bien choisi pour voir certains 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 souhaitée 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 de graphiques encore plus volumineux. CSS peut maintenant décrire à votre navigateur l’aspect qu’il veut donner à 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 (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, sizingMethod) 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 pseudo classes 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 en moins; / * 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 tout le 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 pénible, 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 rapport élevé de whiz-bang au contenu réel (comme nous l’avions fait 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 devrait 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.