O'rtada Css soyasi. Css-dagi ichki soyalar. Box-soya hokimiyati sintaksisi

Mustaqil ish

O'rtada Css soyasi. CSS-dagi ichki soyalar. Box-soya hokimiyati sintaksisi

Standart soyalarni quti-soya yoki matn-soya yordamida amalga oshirish oson. Ale, qanday buti, qanday qilib ichki soyalarni o'stirish kerak? Ushbu maqolada, bir qator kodlarni o'zgartirish uchun bunday soyalarni qanday yaratish tasvirlangan.

Sintaksis

Keling, CSS-da soyalarni amalga oshirishning ikkita asosiy usulini ko'rib chiqaylik.

quti soyasi

Qurilish quti soyasi turli ma'nodagi qasos spratlari:

gorizontal ofsetі vertikal ofset- gorizontal va vertikal siljish ko'rinadi. Qi ma'nolari qaysi bik ob'ekti ko'rinishini ko'rsatadi:

Xiralik radiusiі tarqalish radiusi bir oz ko'proq katlanadigan. Nima uchun farq bor? Keling, ikkita elementning ma'nosini ko'rib chiqaylik loyqalik radiusi tanbeh:

Zulmatning chekkasi shunchaki kengayib bormoqda. Turli qiymatlar bilan tarqalish radiusi bachimo olish:

Bu vaqtda, Bachimo, soya katta maydonda ko'tariladi. Qanday qilib ma'noni ko'rsatmaslik kerak loyqalik radiusiі tarqalish radiusi, keyin ular 0 ga teng bo'ladi.

matn soyasi

Sintaksis shunga o'xshash quti soyasi:

O'xshash ma'nolar, lekin emas yoyilgan soya. Vikoriston misoli:

Soya qutisiga kiriting

Ob'ekt ichidagi soyani "aylantirish" uchun uni qo'shish kerak kiritilgan CSS da:

Box-shadowning asosiy sintaksisini tushunganingizdan so'ng, ichki soyalarni amalga oshirish tamoyillarini tushunish oson. Qadriyatlar sizniki, siz rang qo'shishingiz mumkin (RGB olti burchakli):

RGB formatidagi rang, soyaning shaffofligi uchun alfa qiymati berilgan:

Soyalar bilan tasvir

Buklangan trochning tasviriga ichki soyani qo'shing, ajoyibidan pastroq. div. Kob o'qi uchun eng keng tarqalgan rasm kodi:

Siz shunday soya qo'shishingiz mumkinligini tan olish mantiqan:
Img (box-soya: inset 0px 0px 10px rgba(0,0,0,0.5); )
Ale qalay ko'rinmaydi:
G'olib ichki soyalar bilan nima qilish mumkinligi o'qi:

Matn-soyaning kiritilishi

Ichki soyani amalga oshirish uchun matn oddiygina kodga qo'shiladi kiritilgan ishlamaydi:

Boshning tepasi uchun sarlavhaga qadar to'xtash kerak h1 qorong'i tanaga va engil soyaga joylashtiramiz:
H1 (fon rangi: #565656; rang: shaffof; matn soyasi: 0px 2px 3px rgba(255.255.255.0.5); )
Kirish uchun o'q:

Dodaemo maxfiy moddasi fon klipi, unda matndan tashqaridagi hamma narsa tasvirlangan (qorong'i shiralarda):
H1 (fon rangi: #565656; rang: shaffof; matn-soya: 0px 2px 3px rgba(255,255,255,0.5); -webkit-fon-klip: matn; -moz-fon-klip: matn; fon-klip: matn ;)

Wiishlo talab qilinadiganlarni mayzhe. Endi faqat matnni (alfa) va pastki sumkani qoraytiring:

CSS box-shadow kuchi sizga soya o'rnatish imkonini beradi html elementi. Ko'pincha veb-sayt dizaynerlaridan matn, tasvirlar bilan ramkalarni bezash va ko'rish va tarkibni yanada o'qilishi mumkin qilish uchun shunday qilish so'raladi.
CSS sintaksisi quti soyasi
... quti-soya: X Y R1 R2 rangi; ...

• 
  X o'qi bo'ylab X - zsuv (gorizontal)
  
• 
  Y - Y o'qi bo'ylab ofset (vertikal)
  
• 
  R1 - atirgul (qiymat qanchalik baland bo'lsa, o'tish shunchalik yumshoq bo'ladi)
  
• 
  R2 - cho'zish radiusi (agar ijobiy bo'lsa, u holda cho'zish, salbiy - siqish)
  
• 
  rang - rang (siz uni istalgan formatda o'rnatishingiz mumkin: #RGB, rangni nomlash)
  
• 
  inset - qiymatning aniqligi uchun soya blokning (elementning) o'rtasiga joylashtiriladi.
  

`box-shadow` stil atribute boshqa CSS selektorlariga qo'shish orqali turli shakllarga nisbatan ta'sir etishga imkon beradi. Masalan, quyidagi kod yorlig'ida bir `button` selektoriga `box-shadow` stil atriubti qo'shilgan va u yorlig'ida `hover` turidan o'tib tushirilgan bo'lib, shu bilan birga `transition` stil atriubti bilan hover holatidan tushirilgandan so'ng uning o'zgarishiga o'tadi:

```css
button {

box-shadow: 2px 2px 10px #888888;
transition: box-shadow 0.3s ease-in-out;
}

button:hover {

box-shadow: 4px 4px 20px #888888;
}
```

Bu kod, bir tugma elementiga tuzilgan `box-shadow` yordamida, undagi qiymatlar bo'yicha bir shadowning qo'shadi. `transition` stil atribute orqali, `box-shadow` o'zgaruvchisiga qulay o'zgartirishlar qo'shilgan. `button:hover` selektoriga tuzilgan `box-shadow` yordamida, tushirilgan shadowning uzunligi va qalinligi ko'payadi, shuningdek, yangi rang bilan shadowningni o'zgartiradi.

`box-shadow` yordamida siz tashqi elementlarni o'zgartirish uchun boshqa stil atribute yordamidan foydalanishingiz mumkin. Shuningdek, `border-radius` yordamida elementlarga yuvarlak shakl berishingiz mumkin, `background-color` yordamida elementlarga fon rangi berishingiz mumkin. `box-shadow` yordamida shuningdek, HTML elementlarga ta'sir qilish uchun bir nechta tuzilishlarni birlashtirishingiz mumkin.