Transcription
1. Introduction: Maintenant, personne ne peut contester qu'
une bonne ombre portée peut accentuer votre design et vos manières
subtiles et insatisfaisantes. Mais l'utilisation des paramètres standard dans la plupart des constructeurs de pages
conduira à la
fois à des résultats limités et ombres portées
un peu Samy, dans la vidéo d'aujourd'hui, je vais
vous montrer comment vous pouvez très commencez rapidement et facilement à créer des ombres
portées plus uniques et souvent plus avancées. Normalement, ils ont l'air cool, mais en fait, ils ont l'air beaucoup plus
réalistes, intéressés, cool. Jetons un coup d'œil aux résultats
que nous cherchons à
atteindre aujourd'hui. Comme nous l'avons établi, les
ombres portées peuvent être plutôt cool, mais elles sont également assez limitées. Si vous utilisez un outil
tel qu'Elemental ou tout autre outil dans lequel vous utilisez l'un
des paramètres prédéfinis. Il est donc agréable d'avoir une façon plus flexible de
faire ces choses, en
plus de pouvoir faire des choses
plus avancées. Permettez-moi de
vous montrer rapidement les trois exemples que je vais vous montrer
dans la vidéo d'aujourd'hui, mais il existe des options presque
illimitées dans lesquelles vous pouvez l'emmener dans la direction que
vous voulez pour empiler différents effets
les uns sur les autres. Tout se fait à l'aide de
CSS à peu près , vous pouvez donc être aussi
créatif que vous le souhaitez. commencer, jetez un
œil à façon dont nous créons cette
première ombre portée. Et c'est vraiment le
plus simple du lot. Il s'agit d'un look plus réaliste dans l'ombre avec un
éclaircissement venant du haut. Nous avons une
ombre plus longue et vous
verrez qu'elle
tombe naturellement assez bien, mais soyez indulgents car elle a l'air beaucoup
plus réaliste. Alors, comment ferait-on cela ? Nous allons utiliser un
peu de CSS personnalisé, et nous allons également
utiliser une ressource en ligne gratuite qui vous permet de configurer
visuellement, modifier et d'obtenir
tout ce
que vous voulez, puis simplement
Prends ce code. Cependant, si vous êtes à l'aise pour le
faire manuellement, faites-le
par tous les moyens.
3. Brumm: Le premier type que nous
allons utiliser est le lien AF qui sera
dans la description. Vous pouvez donc
vérifier cela par vous-même. C'est un excellent
moyen de configurer, de créer
et de modifier
visuellement et obtenir exactement le type
d'effet d'ombre portée que vous souhaitez en utilisant
cette ressource gratuite. Ensuite, nous avons ce petit
bloc de code et il utilise le sélecteur CSS box shadow. Vous pouvez donc voir qu'il y a tous les différents paramètres
qui sont utilisés dans cette configuration particulière où nous avons toutes ces commandes
sur le côté droit, ce qui nous permet de vraiment
affiner et Configurez cela. Nous pouvons donc choisir la couche d' ombres et ce
type de superposition du nombre de couches d'ombre qu'il
y a pour créer un effet plus
réaliste. En général, plus vous avez
de
couches, plus
l'effet sera réaliste. Comme vous pouvez le voir, nous pouvons les
faire glisser vers le haut comme nous le faisons. Nos
définitions de box shadow augmentent. Il en va de même pour
les couches de notre ombre. Nous pouvons également ajuster la transparence
finale afin
que vous puissiez voir si nous voulons
créer une ombre beaucoup plus forte, vous pouvez facilement l'augmenter
comme bon nous semble. De toute évidence, tu ne
voudrais pas devenir fou avec ça. Mais il se peut que vous utilisiez quelque chose qui se trouve sur un
fond plus sombre et l'utilisation d'une transparence plus claire ne l'affiche
tout simplement pas. Donc tu peux le faire. Vous pouvez également inverser cela si vous voulez inverser l'
alpha et vous pouvez voir que cela inverse simplement l'ombrage la direction opposée. Vous pouvez même modifier la courbe de la
transparence réelle utilisée. Vous verrez qu'au fur et à mesure que nous ajustons cela, il devient plus fort dans les lieux. Nous pouvons l'adoucir si nous
voulons ajuster tout cela,
ajuster votre transparence. Ajustez vos couches
de transparence jusqu'à obtenir l'effet
exact que vous souhaitez. Comme je l'ai dit, vous avez très bons contrôles
à l'intérieur de ces constructeurs de pages. Et j'utilise Elementor
comme exemple, mais il existe de nombreux
autres créateurs de pages qui vous offrent cette
fonctionnalité. Mais ils ne sont pas aussi profonds
que cela nous permet de le faire. Une fois que vous avez fait cela,
vous allez George, distance
verticale,
que vous pouvez ajuster, vous pouvez voir que nous pouvons augmenter la distance verticale afin que
nous puissions faire croire que
la source de lumière est plus forte en haut
et nous pouvons ajuster notre transparence pour la
rendre encore plus forte, augmenter ou diminuer le
nombre de couches d'ombre. Nous pouvons donc faire en sorte que cela soit
aussi réaliste que possible. Alors retirons-le un peu en
arrière. Ensuite, vous avez à nouveau la courbe qui vous permet de régler cette distance
verticale finale. Vous pouvez voir en
ajustant que nous changeons l'aspect réel de
l'ombre elle-même. Et vous pouvez voir que nous
avons ce genre
de représentation
visuelle de ces blocs en arrière-plan qui apparaît un peu dans la chute que
nous allons créer. C'est une ombre beaucoup plus forte au début où
elles sont beaucoup plus rapides, tombent vers la fin. Il en va de même pour la force de frappe
finale. Vous pouvez ajuster cela et vous pouvez voir si nous allons trop loin, nous commençons à obtenir cet effet de boîte
fou. Reprenons cela pour que ce
soit tout à fait réaliste. Et encore une fois, tu as
ta force bleue. Il s'agit
de la zone
la plus nette sur le côté droit et l'atténuation sur
le côté gauche. Et encore une fois, nous pouvons ajuster
cette courbe pour créer un aspect beaucoup plus réaliste dans ombre jusqu'à ce que nous soyons
vraiment satisfaits. Ensuite, vous avez enfin, vous pouvez réduire la
propagation. s'agit donc d'une sorte de resserrement de Il s'agit donc d'une sorte de resserrement de
l'ombre, de sorte
que la lumière semble plus brillante du haut
vers le
bas et que
les bords ne sont donc pas
tout à fait dans l'ombre. Mais la partie
centrale, encore une fois, comme je l'ai dit, vous pouvez contrôler et ajuster
la transparence de tous ces éléments pour obtenir un effet vraiment
cool. Une fois que vous êtes satisfait de cela, nous devons le prendre
en charge dans notre constructeur de pages pour l'
appliquer via CSS. Vous pouvez maintenant l'utiliser dans
votre thème si vous le souhaitez. Vous devez simplement vous assurer
que vous utilisez une classe CSS ou un ID. Ensuite, vous associez cela l'
élément particulier que vous voulez, qu'il
s'agisse d'une image, d'une boîte
ou de à
quoi vous voulez qu'il s'applique. Une fois
que nous l'avons, prenons ce petit bloc de
code comme copie. Revenons à
Elemental. Et comme je l'ai dit, j'
utilise simplement cet exemple élémentaire. Vous n'avez pas besoin de passer
à l'option CSS personnalisé. Et vous pouvez voir que j'
ai déjà toutes les options à ce sujet. Débarrassons-nous
complètement de ça pour le moment. Maintenant que cela a été supprimé,
je veux appliquer ceci à l'image
que nous avons ici, qui est, comme vous pouvez le voir, c'est
ce qui a été sélectionné. Donc, ce que nous devons
faire quand il s'agit élémentaire, c'est de
commencer par le sélecteur. Et cela dit simplement deux
éléments ou c'est
l'élément spécifique que je
veux cibler avec ce CSS. Maintenant que nous voulons associer
ce style à l'image, nous allons simplement
mettre la balise HTML pour image, qui est IMG. Ouvrez nos accolades, fermez nos accolades. Et maintenant, nous avons envoyé
le sélecteur CSS pour récupérer cette image et faire
ce que nous devons faire pour elle. Donc, avec cela en place, il suffit de
coller ce code à l'intérieur. Vous pouvez voir qu'il y a
notre ombre portée. Nous avons créé ce look
plus réaliste dans l'ombre et l'avons appliqué spécifiquement à cette image
directement à l'intérieur de l'élémentaire. Mais vous pouvez utiliser tous les
outils que vous voulez. Vous pouvez également
entrer et sélectionner différents éléments et
attribuer leurs propres classes CSS. Et vous pouvez probablement l'
attribuer via votre personnalisateur réel
pour votre thème. Ensuite, vous pouvez l'appliquer quand et quand vous le souhaitez. Je vous montre simplement ceci
parce que je veux vous montrer comment le code interagit
avec l'élément lui-même. C'est ainsi que nous pouvons créer cette ombre plus
réaliste à l'aide cette
ressource en ligne gratuite et du point f. Voyons maintenant
l'option suivante. Alors on va revenir. Et la prochaine option que nous voulons est cette option d'
ombre portée plus flexible. Nous avons vu comment ajouter
cela à une image. Que diriez-vous si vous
vouliez réellement le
placer sur le conteneur lui-même ? Vous pouvez donc voir que nous
avons cette section et que nous voulons y appliquer
une ombre portée. À l'intérieur, nous avons un
titre et un texte. Nous allons sélectionner
cette section en particulier. Nous allons
revenir à avancé et à nouveau à
notre CSS personnalisé. Donc nous refaisons la même chose, nous allons faire un sélecteur. Mais au lieu de mettre IMG ou quoi que ce soit de ce genre
pour l'élément HTML, nous allons le laisser vide. Et nous allons simplement le
mettre dans l'accolade, fermer l'accolade. Nous avons donc ciblé cette section en particulier et nous pouvons y appliquer le
style CSS. J'ai donc créé une
légère variation à ce que nous avons créé auparavant. Je vais copier
ceci et nous allons revenir en arrière et
simplement le coller dans
notre sélection de la zone. Et vous pouvez voir
que notre ombre portée est appliquée
à cette section. Vous disposez donc d'
une grande flexibilité. Vous n'êtes pas limité à
l'appliquer uniquement aux éléments HTML. Vous pouvez toujours l'appliquer à
l'intérieur de l' élément en forme d'outil
sur le conteneur lui-même. Et laissez cela envelopper
différents éléments, comme je l'ai dit dans cet exemple, nous avons le titre, nous avons du texte
en dessous. Nous pouvons y ajouter
tout ce que nous voulons. Nous pouvons dire, passons simplement par ici. Je ne sais pas. Disons simplement que nous allons y
déposer une image. Et nous allons simplement
choisir une image et nous allons simplement l'insérer
à l'intérieur. Là-bas. Allons-y. Donc, si nous faisons un peu
d'espace pour cela maintenant, juste pour avoir
assez de place pour voir, tout
placera simplement 100 pixels de
marge intérieure. Vous pouvez voir que
notre ombre portée est appliquée pour indiquer
l'ensemble du conteneur. C'est tellement cool. Maintenant que
nous avons vu comment procéder.
6. Utilisez une autre façon de créer l'ombre: Que diriez-vous de quelque chose d'un
peu plus avancé ? Vous pouvez voir que nous
avons ce logo ACF. Maintenant, si je vous disais que
cette ombre portée fait partie du format PNG ou SVG, vous penseriez probablement que cela
semble assez raisonnable. Cependant, ce n'est pas le cas. Tout se fait via CSS. Nous allons donc le faire, je vais vous montrer
comment vous pouvez l'utiliser. Une autre ressource
en ligne pour cela. Et comment nous avons obtenu la
différence entre le box-shadow et
un autre sélecteur CSS. Jetons donc un coup d'
œil à cela ensuite. C'est ainsi que nous
allons mettre les choses en place. Vous pouvez voir que si je supprime
ce petit bout de code, nous reviendrons à ce que nous
devrions commencer, qui est simplement
un PNG transparent. Si nous mettons un fond de
couleur différente ici, vous verrez exactement ce que je veux dire. Alors nous allons simplement dire, c'est parti. Voici votre PNG transparent. Je vais juste mettre un peu de couleur là-dedans pour que tu
puisses voir ce que je fais. Maintenant. Nous devons cibler cette
image à l'intérieur de cette zone. Nous allons donc refaire
la même chose. Nous allons en venir à notre CSS personnalisé. Nous pouvons sélectionner cette zone.
Nous pouvons sélectionner cette option. Peu importe la façon dont vous
voulez vous y prendre. Je vais revenir
et nous allons sélectionner un modèle comme nous l'avons fait auparavant. Img, comme nous l'avons fait avant. Nous voulons sélectionner uniquement l'image et ouvrirons et fermerons
ces accolades. Nous avons donc mis les choses en place. Nous allons donc utiliser une variante
légèrement différente. Nous avons vu Box-Shadow. Cette fois, nous
allons utiliser de l'ombre portée. L'ombre portée respecte la
forme des images PNG et SVG. C'est donc ici que
vous avez un fichier PNG transparent ou un logo
SVG par exemple, et que vous souhaitez
appliquer une ombre portée. Cela pourrait être une façon vraiment
cool de le faire. Je vais maintenant vous
montrer un exemple très simple, mais je vous recommande de
jeter un œil à ce site. Je vais laisser tomber un lien dans
la description, qui va dans beaucoup plus de
détails sur ce que vous pouvez faire, comment vous pouvez configurer les
choses et toutes ces choses vraiment
utiles. Ce que nous allons
faire, c'est
prendre ce petit bout de code qui dit qu'un filtre est
appliqué, un filtre CSS. Et nous allons
utiliser Ombre portée
, puis nous aurons toutes les
options par la suite. Donc le décalage,
la transparence, les couleurs utilisées, toutes
ces choses. Nous allons donc simplement copier ceci
comme nous l'avons déjà fait auparavant. Nous allons revenir en arrière. Nous avons notre centre Select a. Supposons que si vous
n'utilisez pas Elemental, vous pouvez le configurer pour cibler
cet objet spécifique très facilement. Il est donc tombé
à l'intérieur et boum, notre ombre est appliquée. Respecter la
forme réelle de l'image PNG , son contenu et ignorer la transparence qui l'entoure. Donc, si vous le souhaitez, vous pouvez
facilement régler le décalage. Disons simplement que
nous allons régler cela sur un. Et vous pouvez voir que
les ensembles de décalage feront la même
chose sur la valeur suivante. Réglez-le sur deux, et nous
avons maintenant un effet bien plus puissant. Nous pouvons ajuster d'autres
valeurs par étapes. Nous allons régler cela sur un
et vous pouvez voir que le bleu
est maintenant réduit. Ou on pourrait
régler ça sur quelque chose comme, disons huit. Nous obtenons un bleu beaucoup plus doux, puis vous pouvez ajuster
les autres valeurs. Nous pouvons donc dire que nous
voulons définir ce paramètre sur un et vous pouvez voir que maintenant vraiment le réduire ou
augmenter la transparence, rend beaucoup moins évident. Vous pouvez les ajuster,
les configurer, obtenir exactement ce que vous voulez. Jouez jusqu'à ce que vous obteniez l' effet
exact dont
vous êtes satisfait. Mais vous pouvez voir que c'est
un très bon moyen de modifier des images
sans nuire, tout en leur appliquant des éléments
tels que des ombres portées. Effet vraiment cool. Et ce ne sont là que quelques-unes des
choses que vous pouvez faire avec CSS en utilisant ce type de
techniques que nous avons abordées aujourd'hui. Je vais mettre tous les
liens vers tous ces différents sites qui
ont fait la démonstration. Vous pouvez donc
l'essayer vous-même. Maintenant, je pense que vous pouvez convenir ces ombres portées sont bien plus convaincantes que celles standard des
tourbières que
nous utilisons probablement pour absolument. Les âges ont toujours été
jusqu'à la prochaine fois. Prends soin de toi
Gabriel Gomes, Web Designer
