Árnyékok szöveghez és blokkokhoz
A mai cikkben arról beszélünk, hogyan készíthetünk árnyékot egy szövegben vagy blokkban a CSS3 használatával.
Kezdjük egy kis html jelöléssel.
Lorem ipsum dolor sit amet.
Most állítsuk be a stílusokat:
test háttér: #ccc;
>
p betűméret: 18px;
szöveg-árnyék: 0 1px 0 #eee;
>
A szöveg árnyékát a szöveg-árnyék tulajdonság határozza meg. ahol az első érték vízszintes, a függőleges második, a harmadik a homályban, a negyedik paraméter pedig az árnyék színe. Ha futtatod ezt a példát, akkor meglehetõsen érdekes hatása lesz az egy pixeles fehér árnyéknak, amelyet ma már gyakran használnak.
Több árnyékot is megadhat vesszővel:
p szöveges árnyék: 0 1px 0 #eee, 3px 3px 3px # 000;
>
Most beszéljünk arról, hogy miként állítsuk be a blokk árnyékát.
Először is megváltoztatjuk jelölésünket
És állítsunk be néhány kezdeti stílust
blokk háttér: # 333;
szélesség: 200px;
magasság: 200px;
margin: 20px;
>
Most dobjuk el a blokkunkat egy árnyék árnyékkal
blokk háttér: # 333;
szélesség: 200px;
magasság: 200px;
margin: 20px;
doboz árnyék: 7px 1px 7px 5px # 555, -7px 1px 7px 5px # c1ff05;
>
Abszolút mindent, amit mondtam a szöveg árnyékáról. Ugyanez vonatkozik a blokkok árnyékaira is. Ebben a példában az első árnyékot az x eltolással állítjuk be 7px-ra, az y tengely 1px-re, a 7px elmosódásra és a világos fekete színre. A második árnyékkal minden ugyanaz, csak az x tengely mentén történő elmozdulás nem jobb, hanem balra, mert negatív számot állítottunk be. Amint látja, van egy negyedik paraméter, amely az árnyék terjedésének sugarait jelzi, de ritkán használják.
Ezek külső árnyékok voltak. de vannak belsőek is
block box-shadow: beillesztés 9px 9px 3px # 112233;
>
Ahogy láthatja, az árnyék belsővé tétele érdekében csak be kell illeszteni a beszéd szót az elején.
Ez mind a mai cikk. Sok szerencsét!