CSS-Komunikatioun: wéi ze maachen

Ouni däischter et kee Liicht ouni Schied keng Form. Och d'Basis fir Frae maachen-up Outil genannt "den Häng." Wann Dir Schéinheet op Är Säiten ze bréngen wëllen, brauche Dir d'Recht Schwéierpunkt op Plaz - Foto CSS-Komunikatioun wou et néideg ass.

D'Material ënnert presentéiert hëlleft Iech léieren, wéi de Schied ze installéieren oder Biller mat CSS-Code ze blockéieren.

CSS-Komunikatioun. Siwebiergen

Eigentlech Box-Komunikatioun, wou d'Linn drécke misst - eng Spär a Komunikatioun - dat selwer ass eng Komunikatioun.

Code an Klameren geschriwwen:

{Box-Komunikatioun: 11px 22px 33px 44px # 333333;}.

Linn seet eis, datt d'Unitéit ze Standard mat engem Komunikatioun Pixel Radius Formatioun ass. D'Daten ass wéi follegt decrypted:

• 11px - Komunikatioun amortiséiert relativ zu der Spär op der X Achs (positive Wäert (20px) Verréckelung wäert zu der rietser Komunikatioun, negativ (-37px) - bis déi lénks);
• 22px - Komunikatioun rullen mat Respekt fir den Y.-Achs vun der Spär (positive Wäert (5px) Virsprong op eng Verréckelung vun der Hallefschiet verwandelt negativ (-17px) - weider);
• 33px - dëst Blur Parameter, déi méi héich d'Zuel, déi méi staark den Effet;
• 44px - de Radius vun der Shadows, an ass direkt proportional;
• # 333333 - d'Faarf, déi am Schiet gemoolt ass.

De leschten dräi Parameteren sinn fakultativ an einfach kann am String ewech gelooss ginn, dh {Box-Komunikatioun: 10px 13px; } - .. sou Linn ass net falsch (Komunikatioun Faarf un d'Faarf vum Text vun der Spär sëlwecht ass).

Also, op de Säiten vun ärem Site Shadows schafen ass net eng Schwieregkeet, mä vill léif sicht Effekter Dir schafen kann! Maacht Äre Kand eng eenzegaarteg, inimitable, well den Design wichteg ass, all Detail, all Detail. Hei, et schéngt, näischt spezielles, mä et ass vill méi interessant an attraktiv.

Betruecht puer Schäffe Beispiller, gesäit et wéi enger Komunikatioun CSS-Spär no der coding:

1. {Box-Komunikatioun: 25px 25px;} - CSS-Komunikatioun amortiséiert Axen 25 Pixel.
2. {Box-Komunikatioun: 25px 25px 10px;} - CSS-Komunikatioun amortiséiert Axen 25 Pixel an Bord 10 Pixel Verknëppung.
3. {Box-Komunikatioun: 25px 25px 10px 5px;} - CSS-Komunikatioun 25 Pixel amortiséiert Axen, Blur Bord 10 Pixel an engem Prinzip Radius vun 5 Pixel
4. {Box-Komunikatioun: 25px 25px 10px 5px # 9e9e9e;} - CSS-Komunikatioun amortiséiert Axen 25 Pixel, Blur Bord 10 Pixel uginn engem Radius vun 5 Pixel an Faarf.

Lëscht Komunikatioun

Ze schafen eng méi schéin, elegant a original Faarftéin verschidden Effekter hunn. Dir kënnt de bannenzegen Häng maachen. Et ass genuch Code de Parameteren vun "inset", weider Beschreiwung vun der Parameteren ze bestëmme wäert wéi gewinnt goen:

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

Et ass méiglech, ënnert der Spär mat komplett verschiddene Parameteren am Code e puer Shadows bis Mëtt duerchgesat huet, si (d'Shadows) sinn duerch Gänseféissecher getrennt opgezielt:

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

Komunikatioun Biller

Nieft der Unitéiten op de Site wäert sëcher Biller, Fotoen, Hannergrënn ginn - all vun dësen Elementer och mat Shadows vill méi interessant Wanterschlof war. Du kanns Biller an der Pre-Bild Redaktoren molen an se op enger Säit scho mat Shadows Paste. Mä, éischtens, ass et net ëmmer méiglech fir verschidde Grënn, ënnert anerem wéinst dem Mangel u Kompetenzen an mat Grafiken schaffen, zweetens, all Manipulatioun vun der Bild him ass dobäi, "Gewiicht", an esou eng Foto ka gutt Säit haten lues verwandelt. An dësem Fall, kënnt Dir engem CSS-Komunikatioun Biller maachen.

De stäerkste einfach an syntactically richteg Léisung fir dëse Problem - d'Kreatioun vun der Eenheet, wäert Hannergrond an Ärem Bild Kotormo. Nächst, maachen Iech déi néideg Hallefschiet vun der Eenheet a se op der Hannergrond-Bild gewisen ginn:

• .block1 {Box-Komunikatioun: inset 0 0 11px 9px # 9e9e9e; Breet: 480px; Héicht: 360px; Hannergrond: URL (Biller / charlize_theron_2.jpg) 0 0 kee-widderhuelen;}

An dësem Beispill, schafe mer en zentrale Komunikatioun mat kee vun der Axen amortiséiert, mat Blur Radius, definéiert Faarf, Héicht an Breet vun der Spär, an der Hannergrond (Hannergrond) ernannt kuartinku. Als Resultat, kréien mir eng Foto vun der bannenzegen Häng.

Averstanen ze schafen Shadows CSS-Code benotzt - Et ass flott einfach, nach spannend, an Wichteg - nëtzlech Übung.