CSS lonbraj: ki jan yo desine

San yo pa fènwa, pa gen okenn limyè, pa gen okenn fòm san yo pa yon lonbraj. Menm zouti nan makiyaj prensipal pou fanm yo rele "lonbraj." Si ou vle ajoute bote nan paj sa yo nan sit ou a, ou bezwen mete aksan yo dwa - ajoute yon CSS-lonbraj kote sa nesesè.

Materyèl pi ba a ap ede ou aprann kijan pou mete lonbraj la pou yon blòk oswa foto lè l sèvi avèk CSS.

CSS-lonbraj. Sentaks

Aktyèlman bwat lonbraj, kote bwat se yon blòk, ak lonbraj se lonbraj nan tèt li.

Kòd la ekri nan parantèz Curly:

{Bwat-lonbraj: 11px 22px 33px 44px # 333333;}.

Fwèt la di nou ke blòk la gen yon lonbraj estanda ak yon reyon pixel. Done yo dekripte jan sa a:

• 11px - lonbraj konpanse relatif nan blòk la sou aks yo X (valè pozitif (20px) Ap lakòz lonbraj la chanjman sou bò dwat la, negatif (-37px) sou bò gòch la);
• 22px - lonbraj deplasman ki gen rapò ak Y-aks la nan blòk (valè pozitif (5px) plon an nan yon chanjman nan lonbraj la desann negatif (-17px) - moute);
• 33px - sa a paramèt flou, ki pi wo a nimewo a, pi fò nan efè a;
• 44px - reyon an nan lonbraj yo, epi ki se pwopòsyonèl dirèkteman;
• # 333333 - koulè a nan ki lonbraj la ki pentire.

dènye twa paramèt yo se si ou vle ak ka senpleman dwe retire nan fisèl la, sa vle di {bwat-lonbraj: 10px 13px; } - .. Tankou yon liy se pa kòrèk (koulè lonbraj se ki idantik ak koulè a nan tèks la nan blòk la).

Se konsa, kreye yon lonbraj nan paj sa yo nan sit ou a pa reprezante konpleksite, men ki jan anpil efè je-plezi ou ka kreye! Fè pitit ou plis inik, inik, paske chak ti bagay, tout detay enpòtan nan desen an. Isit la, li sanble, pa gen anyen espesyal, men li se pi plis enteresan ak atire.

Ann gade nan kèk egzanp ilistrasyon sou kouman CSS-lonbraj la nan blòk la sanble, ki depann sou kòd la:

1. {Box-lonbraj: 25px 25px;} - CSS-lonbraj ak yon konpanse nan 25 piksèl.
2. {Box-lonbraj: 25px 25px 10px;} - CSS-lonbraj ak 25-pixel konpanse ak 10-pixel flou.
3. {Box-lonbraj: 25px 25px 10px 5px;} - CSS-lonbraj ak yon konpanse nan 25 piksèl, blurring bor yo pa 10 piksèl ak yon reyon espesifye nan 5 piksèl
4. {Box-lonbraj: 25px 25px 10px 5px # 9e9e9e;} - CSS-lonbraj ak yon konpanse nan 25 piksèl, blurring bor yo pa 10 piksèl, yon reyon de 5 piksèl ak yon koulè.

Lonbraj efè

Pou kreye pi bèl, elegant, lonbraj orijinal gen efè diferan. Ou ka fè yon lonbraj enteryè. Pou fè sa, li se ase yo presize "antèt" anvan paramèt yo anvan paramèt yo, Lè sa a, deskripsyon an nan paramèt yo pral ale kòm dabitid:

{Box-lonbraj: inset 4px 2px 6px # 9e9e9e;}.

Li se posib yo mete plizyè lonbraj anba blòk la ak paramèt absoliman diferan, nan kòd la yo (lonbraj) yo ki nan lis pa vigil:

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

Foto lonbraj

Anplis de sa nan inite yo sou sit la pral sètènman gen foto, foto, orijin - tout nan eleman sa yo tou gade pi plis enteresan ak lonbraj. Ou ka fè foto alavans nan editè grafik epi mete yo sou paj la deja avèk lonbraj yo. Men, premyèman, sa a se pa toujou posib pou plizyè rezon, ki gen ladan mank de ladrès grafik, ak Dezyèmman, nenpòt manipilasyon nan imaj la ajoute nan li "pwa", ak tankou yon foto ka byen anpeche chaj la nan paj sa yo. Nan ka sa a, ou ka fè yon imaj CSS-lonbraj.

Solisyon ki pi senp epi ki pi senktaktikman kòrèk sou pwoblèm sa a se kreye yon blòk, background nan nan ki se foto ou. Next, ou fè lonbraj ki nesesè yo pou blòk la epi yo ap parèt sou background nan nan foto a:

• .block1 {bwat-lonbraj: inset 0 0 11px 9px # 9e9e9e; Lajè: 480px; Wotè: 360px; Istorik: url (imaj / charlize_theron_2.jpg) 0 0 pa-repete;}

Nan egzanp sa a, nou te kreye yon lonbraj entèn san okenn deplasman sou aks yo, ak blou ak reyon, nou detèmine koulè, wotè ak lajè blòk la, epi yo te asiyen yon foto. Kòm yon rezilta, nou te resevwa yon foto ak yon lonbraj enteryè.

Dakò, yo kreye lonbraj avèk èd nan kòd CSS se byen senp, an menm tan an kaptivan, ak pi enpòtan - yon leson itil.