L'essentiel des CSS

Aborder l'ombrage de boîte

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Pour conclure sur la couleur et l'ornementation des boîtes, vous allez aborder l'ombre portée, que celle-ci soit interne ou externe.
03:11

Transcription

Si vous ne faîtes pas partie de la mouvance du flat design, vous allez être intéressés par donner un peu de relief ou de volume, on l'avait déjà vu avec des dégradés sur des éléments par exemple, donc on pourra s'appuyer sur des ombres portées ou des ombres internes. La différence c'est juste qu'on va ajouter le paramètre inset ou pas à une ombre pour dire si c'est une ombre intérieure ou extérieure. Pour l'ombre, la propriété c'est box-shadow et cette propriété est commune, que ce soit une ombre portée ou une ombre interne. On va définir quatre paramètres principaux qui sont, d'une part, le décalé en pixels sur les x, donc on pourrait partir par exemple 10px sur les x, sur l'axe h, et puis 20 px sur l'axe y par exemple. On pourrait avoir ensuite une période de flou, une sorte de dégradé qui va donner un peu la matière pour avoir cette ombre portée autour de l'élément, et puis une couleur. Alors la couleur qu'on m'a donnée, ici je pars sur un rouge, #873434, j'enregistre et j'actualise la page. Voilà, vous avez l'ombre portée qui s'est bien diffusée sur l'élément. Sauf que, j'aime bien ce côté dégradé sur le côté un peu long, mais je n'aime pas cette intensité qu'on peut avoir sur les éléments. On a donc ce quatrième paramètre optionnel donc je vous parlais, qui pourrait être négatif d'ailleurs, -10px, pour dire que je reviens sur les dimensions que j'ai apportées, j'applique tout et je décale tout ça sur l'intérieur et regardez, j'atténue une partie de mon ombre portée. Alors ça peut être très intéressant, notamment avec un bouton qui s'enfonce ou s'affaisse, donc jouez sur ces paramètres. Maintenant, on va pouvoir utiliser une ombre interne de la même manière. Donc si on fait un box-shadow toujours... et cette fois-ci, on va partir sur du inset. Alors le inset peut être mis en fin ou au début, on va partir sur -5px par exemple, ici... ça fait un peu beaucoup, on va partir sur -4px sur l'axe des x, 6px sur l'axe des y, on va partir sur un 65px au niveau de ce flouté, de ce dégradé et on va revenir à moins de la moitié, à 34px, pour cacher la partie forte de la couleur. Ensuite on va mettre une couleur, ici par exemple, on va partir sur du... #382F2F. Voilà, on enregistre, on actualise notre page... et voilà, on a une ombre intérieure qui peut être placée assez rapidement, simplement en rajoutant le paramètre inset ici. Personnellement, j'aime bien utiliser des éditeurs externes, parce que c'est des fois plus facile de caler une ombre portée, que d'aller la calculer comme ça, avec des chiffres. Donc vous allez utiliser n'importe quel générateur CSS3 online qui vous propose d'avoir le box-shadow ici, vous allez cocher si vous voulez un inset ou pas, et, forcément, le drop shadow, et on va pouvoir générer intégralement avec tous les préfixages, si vous travaillez avec des vieux navigateurs, et surtout, vous allez voir en temps réel ce que vous allez obtenir simplement en jouant sur les paramètres. Donc c'est beaucoup plus souple de travailler sur ce générateur-là, parce que ça va vous donner directement le résultat en temps réel. Il ne vous restera plus qu'à copier le code ici et venir le coller directement dans le fragment de code là où vous en avez besoin.

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 !