Home-theater-designers
CSS és el llenguatge que els desenvolupadors fan servir per dissenyar una pàgina web. Controla com es mostren els elements HTML en una pantalla, en paper o en qualsevol altra forma de suport. CSS proporciona tota la potència de personalització per dissenyar la pàgina web a la vostra pròpia imatge.
Podeu canviar el color de fons, l’estil de lletra, el color de la lletra, l’ombra de caixa, el marge i moltes altres propietats d’un element mitjançant CSS. En aquesta guia us explicarem alguns usos efectius de box-shadow.
Què és CSS box-shadow?
El ombra de caixa La propietat s’utilitza per aplicar una ombra als elements HTML. És una de les propietats CSS més utilitzades per dissenyar quadres o imatges.
Sintaxi CSS:
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];- desplaçament horitzontal: Si el desplaçament horitzontal és positiu, l'ombra serà a la dreta del quadre. I si el desplaçament horitzontal és negatiu, l’ombra estarà a l’esquerra del quadre.
- desplaçament vertical: Si el desplaçament vertical és positiu, l'ombra estarà a sota del quadre. I si el desplaçament vertical és negatiu, l’ombra estarà a sobre del quadre.
- radi de desenfocament: Com més alt sigui el valor, més borrosa serà l’ombra.
- radi de distribució: Significa quant s’ha d’estendre l’ombra. Els valors positius augmenten la difusió de l’ombra i els valors negatius disminueixen la difusió.
- color: Significa el color de l’ombra. A més, admet qualsevol format de color com rgba, hexadecimal o hsla.
Els paràmetres de desenfocament, difusió i color són opcionals. La part més interessant de box-shadow és que podeu utilitzar una coma per separar els valors de shadow-box cada vegada. Es pot utilitzar per crear vores i ombres múltiples als elements.
1. Afegiu una ombra de caixa Dim a l'esquerra, a la dreta i a la part inferior del quadre
Podeu afegir ombres molt fosques a tres costats (esquerra, dreta i part inferior) del quadre mitjançant el següent CSS box-shadow amb el vostre element HTML de destinació:
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;Sortida:
2. Afegiu una ombra de caixa Dim a Totes les cares
Podeu afegir ombres clares a tots els costats de la caixa mitjançant el següent CSS ombra caixa amb el vostre element HTML de destinació:
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;Sortida:
3. Afegiu una ombra de caixa prima als costats inferior i dret
Podeu afegir ombres a la part inferior i dreta del quadre utilitzant el següent CSS box-shadow amb el vostre element HTML de destinació:
transferir missatges de text a un telèfon nou
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;Sortida:
4. Afegiu una ombra de caixa fosca a Tots els costats
Podeu afegir ombres fosques a tots els costats del quadre mitjançant el següent CSS ombra quadre amb el vostre element HTML de destinació:
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;Sortida:
5. Afegiu Shadow Spread a Tots els costats
Podeu afegir ombra estesa a tots els costats del quadre mitjançant l'ordre següent amb l'element HTML de destinació:
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;Sortida:
6. Afegiu una ombra de vora fina a totes les cares
Podeu afegir una ombra de vora simple a tots els costats del quadre mitjançant el següent CSS amb el vostre element HTML de destinació:
box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;Sortida:
7. Afegiu una ombra de quadre als costats inferior i esquerre
Podeu afegir una ombra als costats inferior i esquerre del quadre mitjançant el següent CSS box-shadow amb el vostre element HTML de destinació:
box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;Sortida:
8. Afegiu una ombra de caixa fosca als costats superior i esquerre, ombra fosca a la part inferior i dreta
Podeu afegir una ombra clara a la part superior i esquerra del quadre, així com una ombra fosca als costats inferior i dret del quadre mitjançant el següent CSS amb el vostre element HTML de destinació:
box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;Sortida:
9. Afegiu una ombra de vora fina i de colors a totes les cares
Podeu afegir una ombra de vora simple de colors a tots els costats del quadre mitjançant el següent CSS ombra quadre amb el vostre element HTML de destinació:
box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;Sortida:
10. Afegiu diverses ombres de vores de colors als costats inferior i esquerre del quadre
Podeu afegir diverses ombres de vores de colors a la part inferior i esquerra del quadre mitjançant el següent CSS amb el vostre element HTML de destinació:
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;Sortida:
com saber si el vostre Facebook va ser piratejat
11. Afegiu diverses ombres de vores de colors a la part inferior
Podeu afegir diverses ombres de vores de colors a la part inferior del quadre mitjançant el següent CSS ombra quadre amb el vostre element HTML de destinació:
box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;Sortida:
12. Afegiu diverses ombres de vores de colors als costats inferior i dret del quadre
Podeu afegir diverses ombres de vores de colors a la part inferior i dreta del quadre mitjançant el següent CSS amb el vostre element HTML de destinació:
box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;Sortida:
13. Afegiu ombres clares als costats esquerre i dret, esteneu ombra al fons
Podeu afegir ombres clares als costats esquerre i dret i estendre les ombres a la part inferior del quadre mitjançant el següent CSS box-shadow amb el vostre element HTML de destinació:
box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;Sortida:
Integra CSS amb una pàgina HTML
Ara ja sabeu com afegir efectes d'ombra de caixa genials mitjançant CSS, podeu integrar-los fàcilment amb elements HTML de diverses maneres.
Relacionat: 11 Eines útils per comprovar, netejar i optimitzar fitxers CSS
Podeu incrustar-lo a la mateixa pàgina HTML o adjuntar-lo com a document independent. Hi ha tres maneres d’incloure CSS en un document HTML:
CSS intern
Els fulls d'estil incrustats o interns s'insereixen dins del fitxer secció d 'un document HTML mitjançant element. Podeu crear qualsevol nombre de fitxers elements en un document HTML, però han d'estar inclosos entre els fitxers i etiquetes. Aquí teniu un exemple que demostra com utilitzar CSS intern amb un document HTML:
CSS box-shadow
.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
Style 4
CSS en línia
El CSS en línia s’utilitza per afegir regles d’estil exclusives a un element HTML. Es pot utilitzar amb un element HTML mitjançant estil atribut. L'atribut style conté propietats CSS en forma de 'propietat: valor' separats per un punt i coma ( ; ).
Relacionat: Apreneu a construir llocs web bidimensionals amb la xarxa CSS
Totes les propietats CSS han d’estar en una línia, és a dir, no hi ha d’haver salts de línia entre les propietats CSS. Aquí teniu un exemple que demostra com utilitzar CSS en línia amb un document HTML:
CSS box-shadow
Style 4
CSS extern
CSS extern és la forma més ideal d'aplicar estils a documents HTML. Un full d’estil extern conté totes les regles d’estil d’un document separat (fitxer .css); aquest document s’enllaça al document HTML mitjançant etiqueta. Aquest mètode és el millor mètode per definir i aplicar estils als documents HTML, ja que el fitxer HTML afectat requereix canvis mínims en el marcatge. Aquí teniu un exemple que demostra com utilitzar CSS extern amb un document HTML:
Creeu un fitxer CSS nou amb el fitxer .css extensió. Ara afegiu el següent codi CSS dins d’aquest fitxer:
.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}Per últim, creeu un document HTML i afegiu el codi següent dins d’aquest document:
pantalla negra a l'arrencada de Windows 10
CSS box-shadow
Style 4
Tingueu en compte que el fitxer CSS està enllaçat amb el document HTML mitjançant etiqueta i href atribut.
Tots els tres mètodes anteriors (CSS intern, CSS en línia i CSS extern) mostraran la mateixa sortida.
Feu que la vostra pàgina web sigui elegant amb CSS
En utilitzar CSS, teniu un control total sobre l’estil de la vostra pàgina web. Podeu personalitzar tots els elements HTML mitjançant diverses propietats CSS. Els desenvolupadors de tot el món contribueixen a les actualitzacions de CSS i ho han fet des del seu llançament el 1996. Per tant, els principiants tenen molt a aprendre.
Per sort, CSS és ideal per a principiants. Podeu fer una pràctica excel·lent començant per algunes ordres simples i veient cap a on us porta la vostra creativitat.
Compartir Compartir Tweet Correu electrònic 10 exemples de codis CSS simples que podeu aprendre en 10 minutsNecessiteu ajuda amb CSS? Proveu aquests exemples bàsics de codi CSS per començar, i apliqueu-los a les vostres pròpies pàgines web.
Llegiu a continuació Temes relacionats- Programació
- Web Design
- CSS
Yuvraj és estudiant universitari en ciències de la computació a la Universitat de Delhi, Índia. És un apassionat del desenvolupament web Full Stack. Quan no escriu, explora la profunditat de les diferents tecnologies.
Més de Yuvraj ChandraSubscriu-te al nostre butlletí
Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
Feu clic aquí per subscriure-us