Share
CSS3 est l'une des nouvelles technologies Web les plus cools offertes aux développeurs Web à l'heure actuelle. En utilisant certaines de ses nombreuses fonctionnalités, il est possible de reproduire les effets que vous auriez pu faire auparavant dans Photoshop, avec du code CSS plus facile à gérer, à charger plus rapidement et à la pointe des dernières tendances. Poursuivez votre lecture pour en savoir plus sur les outils électriques à votre disposition et sur la manière de les combiner pour produire les effets graphiques ultimes..
CSS3 possède de nombreuses fonctionnalités, mais certaines sont indispensables si vous envisagez de reproduire des effets de type Photoshop. Je les appelle mes "outils électriques". Ils comprennent les éléments suivants:
Chacune de ces fonctionnalités peut aider à remplacer certaines des images que vous avez peut-être créées dans Photostop par le passé. En faisant cela, vous améliorez la maintenance de votre site Web, car vous pouvez modifier une propriété simplement en modifiant votre fichier CSS plutôt qu'en modifiant une image dans Photoshop. Vous accélérez également le chargement de votre site Web, car les images utilisent beaucoup de bande passante. Explorons ces fonctionnalités une à une.
Prise en charge du navigateur:
À ce jour, vous avez probablement entendu parler de frontière-rayon un million de fois. Il est super facile à utiliser et est supporté par tous les navigateurs modernes. Si vous ne le savez pas déjà, le rayon de la bordure est un moyen de créer des angles arrondis sans CSS, aucune image n'est nécessaire! Jetons un coup d'oeil à la syntaxe.
-webkit-border-radius: taille; -moz-border-radius: taille; border-radius: taille;
Vous devrez utiliser trois syntaxes. Le premier concerne les navigateurs Webkit, tels que Safari et Chrome; le second est destiné aux navigateurs basés sur Mozilla, comme Firefox; et la dernière est la version sans préfixe, pour les navigateurs qui la prennent en charge, y compris IE9, Opera et Safari 5..
L'application d'un rayon de bordure de 10 pixels à une div crée l'effet suivant:
OK, facile! Passons au prochain outil électrique.
Prise en charge du navigateur:
Les ombres de boîtes sont une autre fonctionnalité bien prise en charge. Leur syntaxe ressemble à ceci:
-webkit-box-shadow: offset_x offset_y blur_radius couleur; -moz-box-shadow: offset_x offset_y blur_radius couleur; box-shadow: offset_x offset_y blur_radius couleur;
Une fois encore, nous devons utiliser les préfixes de vendeurs pour Webkit et Mozilla. Les premier et deuxième paramètres de la propriété box-shadow sont les positions de décalage par rapport aux coordonnées gauche et supérieure de l'élément. Définir une valeur positive sur ces propriétés déplace l'ombre vers la droite et vers le bas de l'élément, et définir une valeur négative déplace l'ombre vers la gauche et vers le haut de l'élément. Le flou_radius est la quantité de flou que vous souhaitez ajouter à votre ombre (quelle force ou quel flou vous voulez). Enfin, le dernier paramètre est la couleur que vous souhaitez que l'ombre soit. Ajouter une ombre à notre div arrondi précédemment utilisé créera un bel effet.
-webkit-box-shadow: 5 pixels 5 pixels 10 pixels # 555; -moz-box-shadow: 5px 5px 10px # 555; boîte-ombre: 5px 5px 10px # 555;
Une autre caractéristique intéressante des ombres de la boîte CSS est le mot clé encart. Lorsque le mot clé inset est présent, l'ombre est rendue à l'intérieur de la zone plutôt qu'à l'extérieur. Cela peut créer un joli look déprimé, en particulier pour les boutons. Voici à quoi ressemblerait notre div avec une ombre incrustée.
-webkit-box-shadow: 0 0 20px # 333 encart; -moz-box-shadow: 0 0 20px # 333 inset; box-shadow: 0 0 20px # 333 inset;
La dernière fonctionnalité à noter est la possibilité d’avoir plusieurs ombres sur le même élément. Ceci est très utile et permet d’éviter d’avoir des balises supplémentaires dans votre code HTML simplement pour appliquer une ombre supplémentaire. Tout ce que vous avez à faire pour créer plusieurs ombres est de les séparer par des virgules. Voici un exemple:
-webkit-box-shadow: 0 0 20px # 333 inset, 20px 15px 30px jaune, -20px 15px 30px citron vert, -20px -15px 30px bleu, 20px -15px 30px rouge; -moz-box-shadow: 0 0 20px # 333 inset, 20px 15px 30px jaune, -20px 15px 30px citron vert, -20px -15px 30px bleu, 20px -15px 30px rouge; box-shadow: 0 0 20px # 333 inset, 20px 15px 30px jaune, -20px 15px 30px citron vert, -20px -15px 30px bleu, 20px -15px 30px rouge;
Prise en charge du navigateur:
Les ombres de texte ressemblent aux ombres de case, à la différence qu’il s’agit d’ombres de texte plutôt que d’élément. Heureusement, aucun préfixe de fournisseur n'est nécessaire pour l'ombre de texte..
text-shadow: offset_x offset_y blur_radius couleur;
Les options pour l'ombre de texte sont les mêmes que pour l'ombre de boîte, sauf qu'il n'y a pas de prise en charge d'ombre de texte incrustée. Voici une démo qui fait apparaître du texte invisible sur la page..
color: #fff / * couleur du texte en blanc * / text-shadow: 0 0 50px # 333;
Cela crée l'effet suivant:
Comme avec les ombres de boîte, il est possible d'avoir plusieurs ombres de texte simplement en les séparant par des virgules. Voici un exemple qui crée un effet de texte enflammé.
text-shadow: 0 0 4px #ccc, 0 -5px 4px # ff3, 2px -10px 6px # fd3, -2px -15px 11px # f80, 2px -18px 18px # f20;
Les ombres de texte peuvent créer des effets impressionnants et peuvent très bien compléter d'autres effets..
Prise en charge du navigateur:
Les dégradés sont l’une des fonctionnalités les plus puissantes à votre disposition si vous souhaitez créer ces effets impressionnants. Bien que la prise en charge complète du navigateur n’existe pas encore, vous pouvez toujours fournir un style de repli aux navigateurs sans assistance. Rappelez-vous: les sites Web n'ont pas besoin d'être identiques dans tous les navigateurs. Vous pouvez créer deux types de dégradés: les dégradés linéaires et les dégradés radiaux. Comme vous vous en doutez, les gradients linéaires se déplacent le long d'une ligne droite et les gradients radiaux autour d'un cercle. Les dégradés peuvent être utilisés n’importe où vous avez déjà utilisé une image, par exemple pour l’arrière-plan, les images de bordure ou la liste..
Malheureusement pour les développeurs Web, il existe deux syntaxes différentes: une pour Mozilla et une autre pour Webkit..
Safari et Chrome utilisent tous deux le moteur de rendu Webkit, ils utilisent donc toujours la même syntaxe. Leur syntaxe de dégradé est assez simple:
-webkit-gradient (, [, ]?, [, ]? [, ] *)
Webkit utilise la même syntaxe pour les dégradés linéaires et radiaux. Il suffit de changer le type paramètre pour basculer entre eux.
Firefox utilise des syntaxes distinctes pour les dégradés linéaires et radiaux, qui sont tous deux très différents de leurs homologues Webkit..
-moz-linear-gradient ([|| ,]? , [, ] *) -moz-radial-gradient ([ || ,]? [ || ,]? , [, ] *)
Regardons ces syntaxes séparément.
Pour simplifier, voici la syntaxe d'un Webkit pour les dégradés linéaires.
-webkit-gradient (linear, start_x start_y, end_x end_y, stop, stop…)
La syntaxe de Firefox ressemble à ceci.
-moz-linear-gradient (angle start_x start_y, stop, stop…)
Dans la syntaxe Webkit, les paramètres start_x et start_y spécifient la position de départ du dégradé, et end_x et end_y spécifient la position de fin du dégradé. Vous pouvez utiliser toutes les valeurs de dimension CSS standard, y compris les pourcentages, ainsi que les mots clés left, top, bottom, right et center comme valeurs pour ces paramètres de position. Les arrêts vous permettent de spécifier des couleurs spécifiques à utiliser à des points spécifiques le long du dégradé. Vous pouvez avoir autant de couleurs que vous le souhaitez, mais vous devez en avoir au moins deux: une couleur de début et une couleur de fin. Pour des arrêts de couleur supplémentaires, vous pouvez utiliser la fonction color-stop () en fournissant une position sous forme de pourcentage ou de nombre décimal compris entre 0 et 1, ainsi qu’une couleur. Par exemple: Color-Stop (50%, noir) créerait un arrêt de la couleur noire exactement à la moitié du dégradé. Plutôt que d'écrire 0% et 100% pour les couleurs de début et de fin, les fonctions de commodité de () et de () existent. Tout ce que vous devez fournir à ceux-ci est la couleur.
La syntaxe de Firefox est beaucoup moins simple et propose de nombreuses manières d'atteindre le même objectif. La seule chose qui est statique dans la syntaxe sont les arrêts de couleur, qui sont juste une couleur suivie d'une position en pourcentage. Pour les positions de début et de fin, vous pouvez laisser 0% et 100%, et si vous laissez la position hors de toute autre couleur, la répartition est uniforme dans tout le dégradé. Contrairement à la syntaxe Webkit, la syntaxe de Firefox n'a pas de position de fin, mais seulement une position de départ et un angle. Le dégradé s’écoulera de la position de départ à l’angle spécifié. Si vous laissez cet angle, il s’écoulera perpendiculairement à partir de ce point. Si vous oubliez le point de départ, le dégradé se déroulera de haut en bas. Cette syntaxe est un peu déroutante et un peu moins flexible que la syntaxe simple de Webkit, il est donc préférable d'apprendre par l'exemple..
Voici un exemple simple de dégradés CSS en action. Ce dégradé va du coin supérieur gauche au coin inférieur gauche (en d’autres termes, de haut en bas) et du rouge au blanc.
-webkit-gradient (linéaire, gauche en haut, gauche en bas, de (rouge) à (blanc)); -moz-linear-gradient (rouge, blanc)
Définissant ceci comme propriété d'arrière-plan d'une div, nous obtenons le résultat suivant:
En ajoutant un arrêt de couleur et en modifiant l'angle du dégradé, nous pouvons obtenir un effet différent..
-webkit-gradient (linéaire, en haut à gauche, en bas à droite, de (rouge), couleur-stop (50%, blanc) à (rouge)); -moz-linear-gradient (gauche en haut, rouge, blanc, rouge);
Voici la syntaxe pour les dégradés radiaux dans Webkit.
-webkit-gradient (radial, inner_circle_center_x inner_circle_center_y, inner_circle_radius, outer_circle_center_x outer_circle_center_y, outer_circle_radius, arrêtez, arrêtez…)
La syntaxe de Firefox ressemble à ceci.
-moz-radial-gradient (center_x center_y, taille de la forme, stop, stop…)
La syntaxe Webkit est un peu plus compliquée que la syntaxe à dégradé linéaire, mais les mêmes principes s'appliquent toujours. Les gradients radiaux dans Webkit ont deux cercles: un cercle de départ et un cercle de fin. Vous spécifiez les positions centrale X et Y pour chacun de ces cercles ainsi que leurs rayons. Enfin, vous spécifiez les arrêts de couleur de la même manière que pour les dégradés linéaires..
La syntaxe de Firefox pour les dégradés radiaux est similaire à celle des dégradés linéaires, en ce sens que toutes ses parties, à l'exception des arrêts de couleur, peuvent être omises. Vous pouvez spécifier les positions centrale X et Y du dégradé de la même manière que les coordonnées du cercle intérieur dans la syntaxe Webkit, mais il n’existe pas de cercle extérieur dans Firefox. Au lieu de cela, vous pouvez spécifier une forme et une taille du dégradé. La forme peut être un cercle ou une ellipse, cette dernière n'étant actuellement pas possible de créer dans Webkit. La taille accepte de nombreux mots-clés différents, mais pas la taille de pixel souhaitée. Vous pouvez lire ce que chacune de ces constantes fait sur le Centre du développeur Mozilla. Pour ce tutoriel, nous allons simplement utiliser les valeurs par défaut. Encore une fois, si vous laissez les positions de centre X et Y à l'extérieur, elles seront considérées comme le centre de l'objet que vous remplissez avec un dégradé. Si vous omettez la forme et la taille, on suppose que le dégradé est un cercle qui remplit toute la case..
-webkit-gradient (radial, centre centre, 0, centre centre, 50, de (blanc) à (rouge)); -moz-radial-gradient (blanc, rouge)
Si nous appliquons ce dégradé à l’arrière-plan d’une div, c’est ce que nous obtiendrons..
Prise en charge du navigateur:
Plusieurs arrière-plans facilitent la création d'effets complexes en CSS sans qu'il soit nécessaire de créer un balisage supplémentaire dans votre code HTML. Cette prise en charge signifie que les éléments peuvent avoir plusieurs dégradés et arrière-plans d'image, ainsi que la couleur d'arrière-plan standard. Il n'y a pas de différence dans la syntaxe de plusieurs arrière-plans à partir d'arrière-plans uniques - séparez-les par des virgules et c'est parti!
Voici un exemple de div avec un fond dégradé et un bel effet texturé utilisant une image:
background: url (noise.png), -webkit-gradient (linéaire, gauche haut, bas gauche, de (# 999) à (# 333)); fond: url (noise.png), -moz-linear-gradient (# 999, # 333);
Nous devons le déclarer deux fois car, comme nous l'avons appris, il existe une syntaxe de dégradé différente pour chaque navigateur. Cela crée l'effet suivant:
Maintenant que nous disposons de cinq formidables outils électriques, combinons-les pour produire un effet encore plus impressionnant..
Il existe tellement de types de boutons que vous pouvez choisir de concevoir. Pour être simple, émulons quelque chose qui existe déjà - le style de bouton Mac OS X.
Nous allons commencer avec notre code HTML pour cette démo. C'est vraiment très simple, juste deux DIV et du texte.
Bouton
Nous allons maintenant commencer avec notre CSS de base. D'abord, appelons le panneau.
.panel background: -webkit-gradient (linéaire, gauche en haut, gauche en bas, de (#bbbcbb) à (# 959695)); arrière-plan: -moz-linear-gradient (#bbbcbb, # 959695); couleur de fond: # b7b9b7; largeur: 100px;
Le panneau est juste un joli conteneur pour notre bouton. Il a un dégradé allant de haut en bas entre deux jolies couleurs grises. Pour les navigateurs qui ne prennent pas en charge les dégradés, une couleur de fond de secours est donnée..
Maintenant, regardons le CSS pour le bouton réel.
.bouton display: inline-block; marge: 20px; rembourrage: 3px 6px; font-family: 'Lucida Grande', Arial, sans serif; taille de police: 13px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; bordure: 1px solide rgba (0, 0, 0, 0,6); arrière-plan: -webkit-gradient (linéaire, gauche en haut, gauche en bas, de (#fbfcfb), à (# 9d9e9d)); arrière-plan: -moz-linear-gradient (#fbfcfb, # 9d9e9d); couleur de fond: # c0c2c0; texte-shadow: rgba (255, 255, 255, 0.4) 0px 1px; -webkit-box-shadow: rgba (255, 255, 255, 0.4) 0 1px; -moz-box-shadow: rgba (255, 255, 255, 0.4) 0 1px; box-shadow: rgba (255, 255, 255, 0.4) 0 1px; -webkit-user-select: aucun; -moz-user-select: aucun; curseur: par défaut;
Il y a une bonne quantité de code ici, qui utilise tous les outils électriques que j'ai décrits ci-dessus, à l'exception de plusieurs arrière-plans. Il y a plusieurs sections dans ce code, que nous allons prendre une à une. Les deux premières lignes ne sont que quelques informations de mise en page simples. Paramétrer le bouton pour qu’il s’affiche: inline-block s’adapte automatiquement au contenu, quel que soit le texte inséré dans le bouton. La section suivante donne des informations sur les polices au bouton. Enfin, dans la troisième partie, nous utiliserons notre premier outil électrique: le rayon de la frontière. Dans le cas de notre joli bouton, nous lui donnons un joli rayon de 3px. Ensuite, nous donnons une bordure au bouton. Notez que nous utilisons rgba comme couleur ici. Cela nous permet de rendre la couleur partiellement transparente comme nous le faisons ici, créant une belle couleur grisâtre. Dans la section de code suivante, nous définissons l’arrière-plan du bouton. Nous lui donnons un fond dégradé ainsi qu'une couleur unie pour les replis dans les navigateurs qui ne supportent pas encore les dégradés. Ensuite, nous utilisons une ombre pour rendre le texte légèrement gravé dans le bouton. Une fois encore, nous utilisons ici rgba pour donner un blanc partiellement transparent à l’ombre du texte. La section finale du code crée une ombre de zone. À présent, cela ne ressemble pas vraiment à une ombre, mais à une seconde bordure, mais cela met en valeur le bas du bouton pour lui donner l’impression gravée à l’arrière-plan et complète la couleur de la bordure. C’est une astuce utile pour savoir si vous souhaitez que quelque chose ressemble à plusieurs frontières - je l’utilise beaucoup. Enfin, la dernière section du code CSS est une astuce intéressante qui empêche la sélection de texte dans les navigateurs Webkit et Firefox, et définit le curseur sur la flèche par défaut plutôt que sur le curseur de sélection de texte..
Jusqu'à présent, ce code donne à notre bouton l'aspect suivant:
OK, donc pas trop mal encore! Passons au look déprimé du bouton.
.bouton: actif arrière-plan: # B5B5B5; -webkit-box-shadow: rgba (255, 255, 255, 0.4) 0 1px, noir 0px 1px 3px inset, rgba (0, 0, 0, 0,4) 0px -5px 12px inset; -moz-box-shadow: rgba (255, 255, 255, 0.4) 0 1px, noir 0px 1px 3px inset, rgba (0, 0, 0, 0,4) 0px -5px 12px inset; box-shadow: rgba (255, 255, 255, 0.4) 0 1px, noir 0px 1px 3px inset, rgba (0, 0, 0, 0,4) 0px -5px 12px inset; texte-shadow: rgba (255, 255, 255, 0.3) 0px 1px;
Lorsque le bouton est enfoncé, nous changeons un certain nombre de choses. Premièrement, nous avons défini l’arrière-plan sur une couleur unie, en supprimant le dégradé défini précédemment. C'est parce que nous allons créer le look déprimé avec une ombre de boîte plutôt qu'un dégradé. La prochaine chose que nous faisons est de définir cette ombre ou plutôt plusieurs ombres. La première ombre de la liste est la même que celle que nous avions à l'état normal: la surbrillance au bas du bouton. Les deuxième et troisième ombres sont celles qui donnent l'impression que notre bouton est enfoncé. Le premier de ces éléments est une ombre incrustée noire située à partir du pixel le plus élevé et comportant 3 pixels de flou, une ombre plutôt sombre. La dernière ombre est également noire, mais un noir légèrement transparent est défini à partir des 5 pixels du bas avec 12 pixels de flou. Cela crée une apparence sombre au bas du bouton lorsque vous appuyez dessus. La dernière chose que nous devons faire lorsque ce bouton est enfoncé est simplement de réduire l’opacité de l’ombre du texte d’un cran afin qu’elle ne ressorte pas comme un pouce endolori..
C'est tout! Notre bouton est complet. Voici à quoi ressemble la version enfoncée:
Remplacer des images par CSS3 présente de nombreux avantages. Cela facilite votre travail en tant que développeur Web, car vous n'avez pas besoin d'ouvrir Photoshop à chaque fois que vous devez modifier votre interface utilisateur. Cela accélère le chargement de votre site Web ou de vos applications Web, car il n’a pas besoin de télécharger autant d’images lourdes. Et cela vous permet de créer une expérience plus riche, interactive et souhaitable pour les utilisateurs, de telle sorte qu'ils reviendront toujours plus longtemps..
Je vais vous laisser avec un peu d'inspiration de choses que vous pourriez faire avec CSS3. Ce ne sont pas nécessairement les exemples les plus réels du monde, mais ils montrent ce qui est possible avec un peu de travail.
La première démo, créée par Jeff Batterton, est un iPhone créé avec du CSS3 pur - aucune image utilisée. Il est très impressionnant, utilisant des dégradés CSS, des ombres de texte, des ombres de case, des transitions et des transformations. Malheureusement, cela ne semble actuellement correct que dans les navigateurs Webkit tels que Safari et Chrome. Il peut être de votre devoir de faire fonctionner la démo dans Firefox!
Une autre démo, peut-être encore plus étonnante, a été écrite par Louis Harboe. C’est une reconstitution de certaines icônes iOS en CSS pur, et des récréations très réalistes! Cette démo ne fonctionne également que dans les navigateurs Webkit. Si vous voulez savoir comment certaines de ces icônes ont été reproduites, vous pouvez vous rendre sur le blog de Louis Harboe où il décrit le processus..
J'espère que vous avez apprécié cet article! N'hésitez pas à me suivre sur Twitter ou à laisser vos commentaires dans les commentaires!
Accentsconagua