Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel des CSS

Mettre en place des dégradés radiaux

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
De la même manière que les dégradés linéaires et avec quelques paramètres en plus, la gestion des dégradés radiaux est simple à mettre en place. Vous allez aussi travailler en fonction de la dernière version retenue pour ce cours.
08:30

Transcription

Les dégradés radiaux fonctionnent de la même manière à ceci près qu'ils ont quelques informations de plus. On va les regarder en détail. Donc ici, toujours pour des navigateurs contemporains sur les dernières versions retenues d'utilisation des dégradés on va pouvoir utiliser radial-gradient avec deux couleurs : une de départ et une d'arrivée. Ici, si je visualise dans le navigateur on se retrouve avec un dégradé sous forme elliptique. Pourquoi ? Tout simplement parce qu'il est à l'intérieur d'un rectangle et qu'on a défini simplement deux couleurs. On va pouvoir revenir à cet endroit-là. On sait qu'on est sûr une hauteur de 60, si je place une largeur de 60 px, je fais un ctrl+S J'actualise ma page et bien entendu on est dans un dégradé circulaire. Pourquoi ? Parce qu'on est dans un carré ? Le dégradé par défaut va s'adapter à la forme de l'élément dans lequel on va être placé. Si on regarde du côté du W3C, on va voir qu'au niveau de sa déclaration, on a besoin de définir la forme sur laquelle on va terminer. On va prendre la main sur cette forme. Ce n'est pas le dégradé qui va définir s'il est dans un carré ou dans un rectangle. C'est nous qui allons dire si on veut un cercle ou une ellipse. On va pouvoir définir sa taille à la place. C'est à dire qu'on n'est pas obligé de définir une forme. On peut définir une taille. Attention, si on est dans une cercle, ce sera par défaut sur un cercle. Si on est sur une ellipse, il faudra définir l'horizontal et le vertical. Ensuite, on va pouvoir définir vers où va s'étendre cette taille. Pour cela, on va pouvoir utiliser si vous voulez, la possibilité d'utiliser les mots clés. Est-ce que je veux aller du côté le plus proche ou le côté le plus loin ? Est-ce que je veux aller sur le coin le plus proche ou sur le coin le plus loin ? C'est là où on peut définir après ensuite des dimensions. Bien entendu, ces dimensions seront différentes. Si je suis sur un cercle, ici vous le voyez bien, on va pouvoir définir une seule valeur par numéraire. Le pourcentage n'est pas utilisé. Par contre, si je suis sur une ellipse, on pourra définir des valeurs numéraires ou un pourcentage bien entendu Attention, il y a deux valeurs puisqu'on a des X et des Y. Ce que je vous expliquais juste avant. Ensuite le dernier élément, c'est où se situe la position du départ, du centre Vous avez vu que par défaut, c'était au centre du rectangle ou du carré. Là, on va pouvoir dire, non je suis à droite, à gauche, en px etc. Ensuite, on va énumérer l'ensemble des couleurs qui vont devoir composer ce dégradé. Avec bien entendu, chaque fois, la couleur et son pourcentage d'arrêt où l'on souhaite arrêter la couleur. Revenons sur tout ça, pour l'étudier. Ça peut paraître un peu confus quand on n'a pas l'habitude de ce genre d'expression régulière ici. Si on vient ici, on va définir notre background. Parfait, on va le faire sur une étude un peu large : 400 px. Et, ici, je vais dire : « Je veux un cercle. » On va définir que l'on souhaite un cercle quelque soit la dimension, c'est un cercle qui va se passer. J'enregistre. On bascule dans le navigateur. J'actualise. On a bien un cercle qui se place. Sauf que le cercle, lui, ne rentre pas dans l'élément. Puisque le cercle est grand, donc le cercle ferait tout ça. Si je souhaite que mon cercle soit à l'intérieur ici, il va falloir que je lui dise, tu vas t'arrêter au côté le plus proche. Alors pour le voir de manière plus explicite, ce que je vous propose c'est qu'on commence à dire : Ici toi tu t'arrêtes à 50 % Vous vous rappelez ? Pour les linéaires, on avait fait ça. Et ici, toi tu t'arrêtes à 50 % également. J'enregistre. Maintenant, si j'actualise ma page. On a bien notre cercle. Sauf que notre cercle dépasse de ce rectangle. Je vais faire un peu de place pour y voir un peu plus clair. Si maintenant je lui dis que je souhaite utiliser le closest side le bord le plus proche. Regardez si j'actualise ma page, il s'est mis à 50 % du bord le plus proche si je prends ici mon centre, car je suis en centre par défaut, le bord le plus proche ou le side, c'est celui-ci en haut. Il va prendre la moitié, 50 % de ce bord le plus proche. Si maintenant je lui dis le furthest le plus loin ; Je vais écrire le coin le plus loin, ce sera celui-là. Regardez il va se mettre à 50 % de ce coin le plus loin. Mon centre ici est bien à 50 % [inaudible] Là, je peux lui dire, attention, je veux une ellipse. Je vais changer mon idée maintenant. Je pars sur une ellipse, ctrl+S. Je suis bien sûr une ellipse, il est bien à 50 % du coin le plus loin. On peut utiliser les corner aussi. Les corner on est au centre, il n'y a pas de problématique. Le coin le plus loin va être sur la diagonale mais ça va juste agrandir l'ellipse, puisque mon centre est là, le coin est là, si je prends la diagonale qu'il y a ici, je vais être à 50 %. Une fois que vous avez capté ce principe, maintenant on va pouvoir définir une autre valeur. Ici je vais mettre un retour chariot pour mieux les voir. at-bottom-right par exemple. Je veux que le centre soit placé au bottom-right. Le centre de mon ellipse ne va plus être ici, il va être ici. Ici, le centre est là et toutes les valeurs vont s'adapter en conséquence en fonction de l'élément. Une fois qu'on a capté ce principe-là. On peut gérer toutes les données. Juste un dernier petit détail, puisqu'on est dans l'exploration ici : le bottom-right ici, on n'est pas obligé de dire ça. On pourrait dire at par exemple 20 % et à 300 %. on peut rentrer dans des pour cent qui sont un peu spectaculaire. Je vais positionner mon élément à 20 % du départ et je vais le mettre à 300 % Donc mon centre va venir à peu près ici. On n'est pas obligé de rentrer dans des valeurs qui seraient établies comme furthest, corner, size, etc. On peut rentrer dans des longueurs qui vont être définies. Rapidement pour brosser tous ces éléments, ce qu'on peut faire c'est rajouter ici d'avoir par exemple un cercle qui serait sur le côté le plus éloigné, en étant en bas à droite, avec des couleurs ctrl+S J'enregistre. On a notre élément ici qui donne ce dégradé. On pourrait avoir maintenant quelque chose d'assez sympa. On peut très bien se dire, en jouant comme ça je vais faire ici un élément en le plaçant en bottom-right Je vais en faire un second qui serait identique à ceci près que je vais utiliser un cercle et non pas une ellipse et je vais mettre des bordures arrêtées à 50 %. Ce qu'on a fait tout à l'heure. Je vais supprimer cette partie-là. Je vais actualiser la page ici et ramener le tout ici pour qu'on puisse le voir. Voilà, on a ces deux éléments. En fait, c'est exactement la même chose sauf que là, on va être placé en dur sur la rupture, à 50 % On pourrait avoir la même chose avec un direct simple c'est à dire sans passer par les paramètres pour avoir un cercle qui soit positionné au centre. Je n'ai ni la définition du cercle, ni le fait de quelle bordure, ni le positionnement de départ. J'enregistre. J'actualise. On a bien ce cercle qui est apparu au centre. On peut faire un masque. On peut jouer aussi avec trois éléments. Si je prends trois éléments, je vais faire le premier. Puis un second qui va venir juste en-dessous compléter. À chaque fois, ce que je vais faire, c'est dire, je suis dans les mêmes paramètres, sauf que mon point de départ, va être un coup le bottom-right, un coup le top-right, et enfin le dernier qui va être ici, un top-left Et regardez, on va avoir trois carrés qui vont être en vis-à-vis. Avec le centre du radial qui est ici. On va pouvoir jongler sur un radient qui impactera plusieurs éléments. On peut avoir dans notre composition de page, des éléments qui se complètent au travers de leur dégradé. Pour faire maintenant, une sphère, c'est exactement la même chose que ce qu'on avait tout à l'heure. Ici, pour faire la sphère je vais récupérer un background. Si j'actualise, j'ai ça, je n'ai pas de sphère. Il suffit simplement de venir lui dire qu'on a un border-radius à 50 % Dès cet instant-là, puisqu'on a un border radius à 50 % on va nous faire des coins arrondis, et ces coins arrondis dessinent une sphère. Maintenant, si on veut faire comme on avait fait un background qui se répète. On avait tout à l'heure utiliser le repeating-linear-radiant Ici on va faire le repeating-radial-gradient exactement de la même manière avec une couleur de départ. Une couleur à 10 % qui s'estompe, une couleur à 10 % qui s'estompe net, et on va définir la dimension de la répétition qui sera de 20 %. Et ici on a notre radial qui va être déposé.

L'essentiel des CSS

​Explorez et assimilez les outils de base des CSS pour en comprendre les interactions visuelles. Structurez et gérez ainsi l’apparence et le visuel de vos sites web.

5h09 (54 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :28 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !