Így keresztül css árnyék box egység, drop-árnyék
Üdvözlöm, hogy a blogomban. Ma megmutatom, hogyan mennek a dolgok css árnyékában blokk szintaktikai részletesen tárgyalja az ingatlan box-shadow, és milyen hatással lehet létrehozni vele. Vége felé a cikket, azt megmutatom egy másik tulajdonság - drop-árnyék. amelyek valamilyen módon még meredekebb
Árnyékok a css
Tehát először nézzük foglalkozik az ingatlan box-árnyék. Ez szintaxis a következő:
Most van itt az ideje, hogy nézd meg néhány példát az árnyékból, és milyen hatással lehet elérni vele.
egyszerű háromdimenziós
Nagyon gyakran az árnyékban használják, hogy a háromdimenziós egységet. Minden műveletet végzek egy üres html-dokumentum, amely csak akkor jön létre egy blokk div. Ezek a stílusok már definiálta:
Mivel az ilyen könnyen elmozdult, és kissé homályos árnyékok úgy tűnik, egy kis blokk konvexitás.

egyszerű ragyogás
Nagyon szeretem az értelemben, hogy van egy benyomást kelt, mintha a fény egység. Ő nagyon egyszerűen:

Tegye minden 0, kivéve blur. A színek jelzik ugyanaz, mint amire szüksége van. Ennek megfelelően minél több folt, annál nyilvánvalóbbá fog világítani. Például, ha 25 pixel blur:

többszörös keret
Jellemzően a képkocka blokkok adják tulajdonságok határon. de van néhány hátránya - mint keret növeli a méretei a blokk, és nem lehet kérni néhány képkocka egyetlen.
Box-árnyék lehetővé teszi, hogy teljes mértékben szimulálni a keretet. És hadd emlékeztessem, hogy árnyékot adhat korlátlan számú, így lehet, hogy tetszőleges számú képkocka, hozzátéve minden új árnyék egy vessző, egy nagy szakaszon. Ha szükséges, akkor még egy kicsit homályos.
Itt van egy kódot hozzá, hogy az elem a hármashatár:

Tartsuk szem előtt, hogy az árnyékban teljesen megfelel a tétel - ha kerek, és a kerek árnyéka is.

Hogy itt van egy ilyen ovális, árnyék. Ha a magasság és a szélesség a blokk ugyanaz, az egység lenne kerek, mint az árnyéka.
Drop shadow
Ezek mind nagyon, nagyon egyszerű példát árnyékban blokkokat. Mit szólnál hozzá egy árnyék egy png-kép? Ahogy emlékszem, box-shadow teheti csak egy árnyék alakú tömb. Természetesen elemeket lehet alakítani egy négyzet vagy téglalap alakú, de mindegy box-shadow lehetőségek korlátozottak. És itt jön a támogatás css nevű szűrővel drop-árnyék.
Találtam a neten kép PNG formátumban. Most pedig, hogy őt az oldalon segítségével img tag.

Hogy a szolgáltatás a munka, meg kell adni az előtagot -webkit eladóval verzió (ha dolgozik a Google Chrome vagy a Yandex Browser). Más böngészők szükséges, illetve egyéb előtagok.
Tehát itt mi történt:

Az árnyék megismétli a vázlatot a kép! Ez nem érhető el box-árnyék. Szeretném megjegyezni, hogy a drop-árnyék nem támogatja a nyújtás, de elhomályosítja támogat.
Példa fejlett az árnyékok
Most a óra feldolgozni bonyolultabb például árnyékok. Megmutatom, hogyan lehet, hogy a készülék emelt sarkok tiszta css.
A html létre egység ugolki osztály és kiegészítő osztály ug, amelyen keresztül az árnyékok hozzá kell adni a magyar humán minden világos volt.
Megjegyezzük, hogy a használt színek RGBA felvételi formátum. amely lehetővé teszi, hogy nem éles árnyékok, amelyek általában nagyon jól a szem által érzékelt. De eddig azt emelte át, de csak egy mondat, egy kis fény. Corners hozzátesszük a pszeudo.
Hozzátéve mindez farok a kódot a css-fájlt. Most mindent meg kell dolgozni. Ön szabadon módosíthatja a forgás az árnyékok és a színt.

Egg tiszta css
Sokat kísérleteztem itt és nézni a tojás fordult Itt megosztom veletek a kódot:
Ennek is van egy bejegyzett kereskedő változata előtagokat ingatlan dolgozni a legnépszerűbb böngésző.

Úgy néz ki, mint egy tojás, ugye?
De mi van, ha nem akarja, hogy megírják saját kódját az árnyékban? Használja vizuális generátor! Az egyik közülük írtam ide.
Ön is érdekelt

Ma a cikk egy ilyen piti téma, de talán valaki közületek hasznos lesz. -ban

Ma, azt javaslom, hogy egy szép keresési forma a CSS. Elfogadom, a szokásos regisztrációs űrlapok

Hello. Egy nagyon hosszú ideig nem írt hozzászólásokat a témában a munka html / css. Legutóbb csak most kezdődött


Minden megengedett. Ma fogok írni egy nagyon érdekes cikk arról, hogyan kell csinálni a css

Üdvözlégy. Úgy tűnik, az oldalakon a blog, én még nem ismertetett, hogyan lehet