CSS-skaduwee: hoe om te maak

Sonder duisternis is daar geen lig sonder skaduwee geen vorm. Selfs die basiese grimering hulpmiddel vir vroue met die naam "die skaduwee." As jy wil skoonheid om jou bladsye te bring, moet jy die regte klem te plaas - Voeg CSS-skaduwee waar dit benodig word.

Die materiaal wat hieronder aangebied word, sal help om te leer hoe om die skaduwee te installeer of om beelde te sluit met behulp van CSS-kode.

CSS-skaduwee. sintaksis

Eintlik boks-skaduwee, waar die boks - 'n blok en skadu - dit is self 'n skaduwee.

Kode geskryf in draadjies:

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

Lyn sê vir ons dat die eenheid is ingestel op Standard met 'n radius skaduwee pixel. Die data word soos volg Ontcijferde:

• 11px - skaduwee verreken relatief tot die blok op die X-as (positiewe waarde (20px) sal na regs skuif skaduwee, negatiewe (-37px) - aan die linkerkant);
• 22px - skaduwee verplasings met betrekking tot die Y-as van die blok (positiewe waarde (5px) lei tot 'n verskuiwing van die skaduwee af negatiewe (-17px) - up);
• 33px - hierdie vervaag parameter, hoe hoër die nommer, hoe sterker is die effek;
• 44px - die radius van die skadu, en is direk eweredig;
• # 333333 - die kleur, wat geverf in die skaduwee.

Die laaste drie parameters is opsioneel en kan eenvoudig weggelaat word in die tou, dit wil sê {box-skaduwee: 10px 13px; } - .. So 'n lyn is nie korrek (skaduwee kleur is identies aan die kleur van die teks in die blok).

So, die skep van skadu op die bladsye van jou webwerf is nie 'n probleem nie, maar baie mooi kyk effekte wat jy kan skep! Maak jou kind 'n unieke, onnavolgbare, omdat die ontwerp is belangrik, elke detail, elke detail. Hier lyk dit, niks besonders nie, maar dit is baie meer interessant en aantreklik te maak.

Oorweeg 'n paar voorbeelde, dit lyk soos 'n skaduwee CSS-blok volgens die kodering:

1. {Box-skaduwee: 25 px 25 px;} - CSS-skaduwee geneutraliseer byle 25 pixels.
2. {Box-skaduwee: 25 px 25 px 10px;} - CSS-skaduwee geneutraliseer byle 25 pixels en vervaag kante 10 pixels.
3. {Box-skaduwee: 25 px 25 px 10px 5px;} - CSS-skaduwee geneutraliseer byle 25 pixels, vervaag rande 10 pixels en 'n voorafbepaalde radius van 5 pixels
4. {Box-skaduwee: 25 px 25 px 10px 5px # 9e9e9e;} - CSS-skaduwee geneutraliseer byle 25 pixels, vervaag rande 10 pixels, spesifiseer 'n radius van 5 pixels en kleur.

druppel skaduwee

Om te skep 'n mooier, elegante en oorspronklike skakerings het verskillende effekte. Jy kan die innerlike skaduwee maak. Dit is genoeg kode vir die parameters van "insetsel", verdere beskrywing van die parameters spesifiseer gaan soos gewoonlik:

{Box-skaduwee: insetsel 4px 2px 6px # 9e9e9e;}.

Dit is moontlik onder die blok 'n paar skadu met heeltemal verskillende parameters in die kode, hulle (die skadu) gelys geskei deur kommas te sit:

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

skaduwee foto's

In bykomend tot die eenhede op die terrein sal beslis foto's, foto's, agtergronde - al hierdie elemente ook baie meer interessant met skadu's kyk. Jy kan foto's te trek in die pre-beeld redakteurs en plak dit op 'n bladsy wat reeds met skadu's. Maar, in die eerste plek, is dit nie altyd moontlik om verskeie redes, insluitend as gevolg van die gebrek aan vaardighede in die werk met beelde, in die tweede plek, enige manipulasie van die beeld word by hom, "gewig", en so 'n prentjie dalk stadiger bladsy laai. In hierdie geval, kan jy maak 'n CSS-skaduwee beelde.

Die mees eenvoudige en sintakties korrekte oplossing vir hierdie probleem - die skepping van die eenheid, sal die agtergrond in jou prentjie Kotormo. Volgende, jy maak die nodige skaduwee vir die eenheid en hulle word op die agtergrond-beeld:

• .block1 {box-skaduwee: insetsel 0 0 11px # 9px 9e9e9e; breedte: 480px; hoogte: 360px; agtergrond: url (beelde / charlize_theron_2.jpg) 0 0 no-herhaal;}

In hierdie voorbeeld, skep ons 'n innerlike skaduwee met geen geneutraliseer van die byle, met vervaag radius, omskryf kleur, hoogte en breedte van die blok, en die agtergrond (agtergrond) aangestel kuartinku. As gevolg hiervan, kry ons 'n foto van die innerlike skaduwee.

Instem om skadu met behulp van CSS-kode te skep - dit is redelik eenvoudig, maar opwindende, en die belangrikste - nuttige oefening.