CSS Shadow: kako pripraviti

Brez teme, ni svetlobe, brez sence ni oblike. Celo glavno ličilo za ženske se imenuje "senca". Če želite lepoto prinesti na strani vaše spletne strani, morate urediti pravilne poudarke - dodajte CSS-senco, kjer je to potrebno.

Spodnji material vam bo pomagal naučiti, kako nastaviti senco za blok ali sliko, ki uporablja CSS.

CSS-senca. Sintaksa

Pravzaprav je polje sence, kjer je polje blok, senca pa senca.

Koda je napisana v zavihkih:

{box-shadow: 11px 22px 33px 44px # 333333-}.

Niz nam pove, da je blok dobil standardno senco s polmerom pikslov. Podatki se razširijo na naslednji način:

• 11px - Premik sence glede na blok vzdolž osi X (pozitivna vrednost (20 pik) bo povzročila, da se senca premakne v desno, negativno (-37 pik) na levo);
• 22px - sSenčenje glede na blok vzdolž osi Y (pozitivna vrednost (5 pik) bo povzročila premikanje sence, negativno (-17 pik) - navzgor);
• 33px - to je parameter zamegljenosti, večje je število, močnejši učinek;
• 44px - radij sence je tudi neposredno sorazmeren;
• # 333333 - barva, v kateri je zasenčena senca.

Zadnji trije parametri so neobvezni in jih preprosto ni mogoče označiti v vrstici, to je {box-shadow: 10px 13px-} - ta linija ni napačna (barva senca je enako barvo besedila v bloku).

Tako ustvarjanje sence na straneh vašega spletnega mesta ni težko, ampak koliko lahko učinkuje prijeten učinek! Naj bo vaš otrok bolj edinstven, edinstven, saj je vsaka podrobnost, vsa podrobnosti pomembna pri oblikovanju. Tu se zdi, nič posebnega, vendar je veliko bolj zanimivo in privlačno.

Oglejmo si nekaj primerov, kako izgleda senca CSS v bloku, odvisno od kode:

1. {box-shadow: 25px 25px;} - CSS-senca s premikom 25 slikovnih pik.
2. {box-shadow: 25px 25px 10px;} - CSS-senca s pomikanjem s 25 slikovnimi pikami in 10-slikovnimi zameglitvami.
3. {senca: 25px 25px 10px 5px;} - CSS-senca z offsetom 25 slikovnih pik, 10-pikslovno zamegljenost robov in določen polmer 5 pikslov
4. {box-shadow: 25px 25px 10px 5px # 9e9e9e-} - CSS-senca z offsetom 25 slikovnih pik, 10-pikslovno zamegljenost, polmer 5 pikslov in barva.

Senčni učinki

Za ustvarjanje lepših, elegantnejših in izvirnih senc so različni učinki. Lahko narediš notranjo senco. To je dovolj, številka za določitev parametrov "vložka", dodaten opis parametrov, bo šel kot običajno:

{box-shadow: vstavi 4px 2px 6px # 9e9e9e-}.

V bloku je mogoče postaviti nekaj senc z absolutno drugačnimi parametri, v kodi, ki sta jo (sence) zapisana z vejico:

{Box-senca: -20px -10px 11px 15px # 800.080, -50px -40px 5px 10px # daa520, 20px 10px 11px 15px # 0700f9, 50px 40px 5px 10px # ffa500}.

Shadow slike

Poleg blokov na mestu zagotovo bodo slike, fotografije, ozadja - vsi ti elementi so videti bolj zanimivi s sencami. Slike lahko vnaprej naredite v grafičnih urednikih in jih že vstavite na stran s sencami. Toda, prvič, to ni vedno mogoče iz različnih razlogov, vključno z pomanjkanjem grafičnih veščin, in drugič, vsaka manipulacija s sliko dodaja, da je "teža", in takšna slika lahko ovira nalaganje strani. V tem primeru lahko naredite CSS senco.

Najpreprostejša in najbolj sintaktično pravilna rešitev te težave je ustvariti blok, katerega ozadje je vaša slika. Nato naredite potrebne sence za blok in se prikažejo na ozadju slike:

• .blok1 {box-shadow: vstavi 0 0 11px 9px # 9e9e9e- širina: 480px; višina: 360px; ozadje: url (slike / charlize_theron_2.jpg) 0 0 no-repeat-}

V tem primeru smo ustvarili notranjo senco brez premikanja vzdolž osi, z zamegljenostjo in polmerom, določili smo barvo, višino in širino bloka ter temu ozadju dodelili sliko. Kot rezultat smo dobili sliko z notranjo senco.

Strinjam se, da ustvarite sence s pomočjo CSS-kode, je precej preprosta, hkrati pa je fascinantna in kar je najpomembnejša - koristna lekcija.