CSS-shadow: hur man gör

Utan mörker finns det inget ljus utan skugga ingen form. Även den grundläggande make-up verktyg för kvinnor som kallas "skugga". Om du vill ta skönhet till dina sidor, måste du placera rätt vikt - Lägg CSS-skugga där det behövs.

Materialet presenteras nedan kommer att hjälpa dig att lära dig hur man installerar skuggan eller blockera bilder med hjälp av CSS-kod.

CSS-skugga. syntax

Egentligen box-skugga, där lådan - ett block och skugga - det är i sig en skugga.

Kod skriven i hängslen:

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

Linje berättar att enheten är inställd på Standard med en skugga pixel radie. Data dekrypteras på följande sätt:

• 11px - shadow förskjuten i förhållande till blocket på X-axeln (positivt värde (20 bildpunkter) kommer att flyttas till den högra skugga, negativ (-37px) - till vänster);
• 22px - skugga förskjutningar med avseende på Y-axeln för blocket (positivt värde (5px) leda till en förskjutning av skuggan ner negativa (-17px) - upp);
• 33px - denna parameter oskärpa, ju högre siffra, desto starkare är effekten;
• 44px - radien hos skuggorna, och är direkt proportionell;
• # 333333 - färgen, som är målad i skuggan.

De tre sista parametrarna är valfria och kan helt enkelt utelämnas i strängen, dvs {box-shadow: 10px 13px; } - .. En sådan linje är inte felaktig (skuggfärg är identisk med färgen på texten i blocket).

Således skapar skuggor på sidorna på din webbplats är inte ett problem, men många snygga effekter som du kan skapa! Gör ditt barn en unik, oefterhärmlig, eftersom konstruktionen är viktigt, varje detalj, varje detalj. Här verkar det, inget speciellt, men det är mycket mer intressant och attraktiv.

Överväga några illustrativa exempel, det ser ut som en skugga CSS-blocket i enlighet med kodnings:

1. {Box-shadow: 25px 25px;} - CSS-skugga offset axlar 25 pixlar.
2. {Box-shadow: 25px 25px 10px;} - CSS-skugga offset axlar 25 pixlar och oskärpa kanter 10 pixlar.
3. {Box-shadow: 25px 25px 10px 5px;} - CSS-skugga offset axlarna 25 pixlar, oskärpa kanter 10 pixlar och en förutbestämd radie på 5 pixlar
4. {Box-shadow: 25px 25px 10px 5px # 9e9e9e;} - CSS-skugga offset axlar 25 pixlar, oskärpa kanter 10 pixlar, anger en radie av 5 pixlar och färg.

skugga

För att skapa en vackrare, eleganta och originella nyanser har olika effekter. Du kan göra den inre skugga. Det är tillräckligt kod för att specificera parametrarna för "infälld", ytterligare beskrivning av parametrarna kommer att gå som vanligt:

{Box-shadow: infälld 4px 2px 6px # 9e9e9e;}.

Det är möjligt att sätta under blocket några skuggor med helt olika parametrar i koden, de (skuggorna) listas separerade med kommatecken:

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

skuggbilder

Förutom enheterna på plats kommer säkerligen att vara bilder, fotografier, bakgrunder - alla dessa element också se mycket mer intressant med skuggor. Du kan rita bilder i pre-bildredigerare och klistra in dem på en sida redan med skuggor. Men för det första är det inte alltid möjligt av olika skäl, bland annat på grund av bristande kompetens att arbeta med grafik, för det andra, någon manipulation av bilden läggs till honom, "vikt", och en sådan bild kan mycket väl bromsa sidan laddas. I det här fallet kan du göra en CSS-skuggbilder.

Det enklaste och syntaktiskt korrekt lösning på detta problem - skapandet av enheten, kommer bakgrunden i bilden Kotormo. Därefter du göra nödvändiga skugga för enheten och de visas på bakgrunden-image:

• .block1 {box-shadow: infälld 0 0 11px 9px # 9e9e9e; bredd: 480 x; höjd: x 360 bildpunkter; bakgrund: url (bilder / charlize_theron_2.jpg) 0 0 no-upprepning;}

I detta exempel, skapar vi en inre skugga utan förskjutning av axlarna, med oskärpa radie, definierad färg, höjd och bredd av blocket, och bakgrunden (bakgrunden) utsedd kuartinku. Som ett resultat, får vi en bild av inre skugga.

Överens om att skapa skuggor med hjälp av CSS-kod - det är ganska enkelt, men spännande, och viktigast av allt - nyttig övning.