L'ombra paralela és un efecte que deixa caure o afegeix una ombra darrere dels elements HTML seleccionats quan es representen a la pàgina web. Aquest efecte es pot aconseguir mitjançant el ' gota d'ombra() ' mètode com a valor per a CSS ' filtre ” propietat o utilitzant la “ caixa-ombra ' propietat. Mitjançant l'ús de la propietat 'box-shadow', la millora visual, l'experiència de l'usuari, l'èmfasi i el focus es poden atreure a un element HTML específic.
Aquesta guia mostra el procediment per fer un efecte d'ombra amb la propietat box-shadow:
-
- Feu una ombra sòlida utilitzant la propietat box-shadow
- Feu una ombra borrosa amb la propietat box-shadow
- Amplieu l'àrea d'ombra paralela
Com fer ombres laterals a CSS3 utilitzant la propietat box-shadow?
El ' caixa-ombra ” permet al desenvolupador establir una jerarquia visual indicant la posició relativa dels elements a la pàgina. En utilitzar-lo, els creadors de pàgines web poden crear la il·lusió d'objectes que fan ombres a les superfícies, donant als elements una sensació més interactiva.
Sintaxi
La propietat 'box-shadow' té una sintaxi de:
caixa-ombra: [ desplaçament horitzontal ] [ desplaçament vertical ] [ radi de desenfocament ] [ radi de propagació ] [ color ] ;
Una explicació dels termes utilitzats en la sintaxi anterior:
-
- Inicialment, el ' desplaçament horitzontal ” recupera/emmagatzema la posició de l'eix X i el “ negatiu ” estableix l'ombra a l'esquerra i viceversa.
- El ' desplaçament vertical ' emmagatzema la posició de l'eix Y, el ' positiu ” estableix l'ombra en direcció cap avall, i viceversa en el cas del “ negatiu ” valor.
- A continuació, el ' radi de desenfocament ” valor com des del nom estableix la borrosa de l'ombra.
- El ' radi de propagació ” el valor especifica quant radi s'ha d'expandir l'ombra.
- El ' color ' estableix el color de l'ombra, pot estar en el ' HSL ' o ' RGB ” també format.
Ara, passem per un parell d'exemples per a una millor comprensió:
Exemple 1: Apliqueu una ombra sòlida utilitzant la propietat box-shadow
Per establir l'ombra sòlida, només s'insereixen les direccions i el color de l'ombra com a valor al ' caixa-ombra ' propietat:
< estil >.boxShadowExample {
amplada: 210 píxels;
vora: 2px seda de blat de moro sòlida;
alçada: 210px;
color de fons: #f0f0f0;
caixa-ombra: 10px 10px boscverd;
}
estil >
En el codi anterior:
-
- En primer lloc, l'element HTML es selecciona amb una classe de ' caixaOmbraExemple ”. I el valor de ' 210 píxels ' es proporciona a la ' alçada ' i ' amplada ” propietats. A més, utilitzeu el ' frontera ' i ' color de fons ” propietats per a una millor visualització.
- A continuació, establiu el valor de ' 10px 10px verd bosc ' fins al ' caixa-ombra ”Propietat CSS. El ' 10 píxels ” és el desplaçament horitzontal i vertical que determina la ubicació on s'ha d'aplicar l'ombra. I la ' verd boscós ” és el color de l'ombra.
Després de la compilació, la pàgina web apareix així:
La sortida confirma que s'ha col·locat una ombra de tipus sòlid mitjançant la propietat box-shadow.
Exemple 2: Apliqueu una ombra borrosa amb la propietat box-shadow
Per fer que l'ombra ja aplicada sigui borrosa, s'insereix un valor numèric més abans del color del ' caixa-ombra ' propietat. Visiteu el codi actualitzat a continuació:
< estil >.boxShadowExample {
amplada: 210 píxels;
vora: 2px seda de blat de moro sòlida;
alçada: 210px;
color de fons: fum blanc;
caixa-ombra: 10px 10px 15px boscverd;
}
estil >
Segons el codi anterior, l'ombra és ara ' 15 píxels ” borrosa. Un cop finalitzada la fase de compilació, la pàgina web té aquest aspecte:
La figura anterior mostra que l'ombra està ara borrosa.
Exemple 3: ampliació de l'àrea d'ombra paralela
El valor de propagació es proporciona al ' caixa-ombra ” propietat per expandir la regió de l'ombra. El valor del spread ha de ser en format numèric. Com en el fragment de codi següent, la regió d'ombra s'amplia a ' 20 píxels ”:
< estil >.boxShadowExample {
amplada: 210 píxels;
vora: 2px seda de blat de moro sòlida;
alçada: 210px;
color de fons: fum blanc;
caixa-ombra: 10px 10px 15px 20px boscos;
}
estil >
Després de l'execució, ara l'ombra apareix així:
Com podeu veure, la regió de l'ombra s'ha incrementat en 20 píxels.
Conclusió
El ' caixa-ombra La propietat s'utilitza per a la creació d'un gota d'ombra ” efecte sobre els elements HTML seleccionats. El ' gota d'ombra 'La propietat accepta cinc valors,' desplaçament horitzontal ”, “ desplaçament vertical ”, “ radi de desenfocament ”, “ radi de propagació ' i ' color ”. Els valors de 'desplaçament horitzontal' i 'desplaçament vertical' estableixen les dimensions de l'ombra des d'on hauria de sortir l'ombra vertical. El valor de 'radi borrós' fa que l'ombra sigui borrosa i el valor de 'radi difuminat' amplia la regió de l'ombra.