O'rtada Css soyasi. CSS ning ichki soyalari. 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 yordam uchun bunday soyalarni qanday yaratish kerakligi tasvirlangan, faqat bir necha qator kodlar.

Sintaksis

quti soyasi

gorizontal ofsetі vertikal ofset- gorizontal va vertikal siljish ko'rinadi. Qi ma'nolari shuni ko'rsatadiki, ba'zi bik ob'ektida siz soyani ko'rishingiz mumkin:

Xiralik radiusiі tarqalish radiusi bir oz ko'proq katlanadigan. Nima uchun farq bor? Ikki elementning dumbasiga qarang, de ma'nosi 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 badbo'y hid 0 turadi.

matn soyasi

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

Soya qutisiga kiriting

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

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:

Ushbu muammoni hal qilishning ba'zi usullaridan foydalaning, ba'zilar uchun terining ortiqcha va kamchiliklari bo'lishi mumkin. Keling, ulardan ikkitasini ko'rib chiqaylik. Birinchidan - birinchi navbatda rasmni o'ramang div:

Div (balandligi: 200px; eni: 400px; quti soyasi: inset 0px 0px 10px rgba(0,0,0,0.9); ) img (balandligi: 200px; eni: 400px; joylashuvi: nisbiy; ;)

Hammasi ishlaydi, lekin siz ozgina HTML belgilash va CSS qo'shishingiz kerak. Yana bir usul - kerakli blokning kulining tasvirini o'rnatish:

Div (balandligi: 200px; eni: 400px; fon: url(http://lorempixum.com/400/200/transport/2); quti-soya: inset 0px 0px 10px rgba(0,0,0,0.9); )

G'olib ichki soyalar bilan nima qilish mumkinligi o'qi:

Matn soyasiga kiriting

Boshning yuqori qismi uchun sarlavhaga qadar to'xtash kerak h1 quyuq tanani va engil soyani o'rnatamiz:

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 soyasi: 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 - X o'qidan foydalanish (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 (har qanday formatni o'rnatishingiz mumkin: #RGB, rangni nomlash)
• inset - qiymatning aniqligi uchun soya blokning (elementning) o'rtasiga joylashtiriladi.

Misol 1. Foydalanilmasdan yupqa quti soyali HTML ramka

Quyida qorong'ulikni tanlashning eng oddiy varianti keltirilgan CSS kuchi quti soyasi yoqilgan uchinchi tomon html ovozsiz butun ramkani bir tekis o'ramasangiz.

Пример №1. Рамка с тенью

Пример №1. Рамка с тенью

Пример 2. HTML рамка со смещенной тенью box-shadow

Практически тот же пример, что и первый, но только со смещением рамки.

Пример №2. Рамка со смещенной тенью

На странице преобразуется в следующее

Пример №2. Рамка со смещенной тенью

Пример №3. Свечение рамки html

Реализация тени в виде свечения

Пример №3. Свечение

На странице преобразуется в следующее

Пример №3. Свечение

Пример 4. Внутреннее свечение границы html

Свечение, которое направлено внутрь блока и никак не выходит за его пределы. Эффект создается за счет атрибута inset .

Пример №4. Внутреннее свечение

На странице преобразуется в следующее

Пример №4. Внутреннее свечение

Пример 5. Совмещение теней в html

Эффект тени можно совмещать через запятую. В таком случае образуется очень интересные результаты. Например, можно сделать разноцветную рамку в стиле 3D.

Пример №5. Совмещение теней

На странице преобразуется в следующее

Пример №5. Совмещение теней

IE младше 9 версии не поддерживают box-shadow. Префиксы браузеров для box-shadow

• -webkit-box-shadow - для Chrome до 10, Safari до 5.1, Android до 4 и iOS до 5
• -moz-box-shadow - для Firefox до версии 4.0

Добавляет тень к элементу. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius , то тень также получится с закруглёнными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.

Краткая информация

Синтаксис

Box-shadow: none | <тень> [,<тень>]*

где <тень>:

inset <сдвиг по x> <сдвиг по y> <размытие> <растяжение> <цвет>

Обозначения

Значения

none Отменяет добавление тени. inset Тень выводится внутри элемента. <сдвиг по x> Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задаёт сдвиг тени вправо, отрицательное - влево. <сдвиг по y> Смещение тени по вертикали относительно элемента. Положительное значение задаёт сдвиг тени вниз, отрицательное — вверх. <размытие> Задаёт радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет чёткой, а не размытой. <растяжение> Положительное значение растягивает тень, отрицательное, наоборот, её сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент. <цвет> Цвет тени в любом доступном CSS формате, по умолчанию тень чёрная.

Допускается указывать несколько теней, разделяя их параметры между собой запятой. Учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке - в самом низу.

Пример

Dumbaning natijasi rasmda ko'rsatilgan. bitta.

Guruch. 1. Zulmatga qarash

Ob'ekt modeli

Ob'ekt.style.boxShadow

Eslatma

Safari 5.1 versiyasigacha, Chrome 10.0 versiyasigacha, Android 4.0 versiyasigacha hammasi -webkit-box-shadow quvvatini qo'llab-quvvatlaydi.

Firefox 4.0 versiyasigacha -moz-box-shadow quvvatini qo'llab-quvvatlaydi.

9.0 versiyasidan oldingi Internet Explorer box-shadow quvvatini qo'llab-quvvatlamaydi, lekin siz filtr quvvatini o'zgartirishingiz mumkin:

Filtr: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, rang=#000000);

Bu erda: offX - qorong'ulikni gorizontal ravishda siljitish; offY - soyani vertikal ravishda siljitish; rang - soya rangi.

Ko'lanka filtrini o'rnatish aniq soyani beradi, shuning uchun soya effekti uchun siz soya filtrini o'zgartirishingiz mumkin.

Filtr: progid:DXImageTransform.Microsoft.shadow(yo'nalish=120, rang=#000000, quvvat=10);

Bu erda: yo'nalish - to'g'ridan-to'g'ri tíny víd 0 dan 360 ° gacha kesish; rang - soya rangi; kuch - ohangni piksellarda o'rnating.

Spetsifikatsiya

Teri o'ziga xosligi qishki uyqu bosqichlaridan o'tish.

• Tavsiya (Tavsiya) - spetsifikatsiya W3C tomonidan yuqori baholangan va standart sifatida tavsiya etilgan.
• Nomzod tavsiyasi ( Mumkin bo'lgan tavsiya) - standartga mos keladigan, o'z maqsadlarini qo'llab-quvvatlayotgandek, qoniqqan, ammo standartni amalga oshirish uchun chakana sotuvchilarning qo'shimcha yordamiga muhtoj bo'lgan guruh.
• Taklif etilayotgan tavsiya ( Taqdim etilgan tavsiya) - qaysi bosqichda hujjat qoldiq qotib qolish uchun W3C maslahatiga topshiriladi.
• Ishchi loyiha (Ishchi loyiha) - yaxshiroq ko'rinish uchun ushbu tuzatishlarni muhokama qilgandan keyin loyihaning kattaroq etuk versiyasi.
• Tahririyat loyihasi ( tahririyat qorasi) - loyihaga tahririyat tomonidan kiritilgan o'zgartirishlardan so'ng standartning qora versiyasi.
• qoralama ( Chernetka texnik xususiyatlari) standartning birinchi qora versiyasidir.

tomonida blok elementi ostida soya elementi yoki dizayn qismi sifatida hurmat berib, arzimas ta'sir yaratish zastosovuetsya tovushlar. Elementlar ostidagi soya ham kichik, shuning uchun biz tomonlarga hajm va chuqurlik beramiz.

G'alabalarning kichik sonini qo'shish uchun oltita ma'noga ega bo'lishi mumkin bo'lgan quti-soyaning kuchi, ulardan faqat ikkitasi obov'azkovymi. Shaklda. 1 eng mumkin bo'lgan qiymatlar bilan quti soyasining kuchini ko'rsatadi, hidlar ularni aniqlash uchun raqamlangan.

Guruch. 1. Box-soya yorqinligi qiymati

1. inset kalit so'zi o'rta element turini belgilaydi;
2. zsuv soyani gorizontal (5px – o‘ngga, -5px – chapga);
3. zsv vertikal (5px - pastga, -5px - tepaga);
4. soyaning kengligi radiusi (0 - o'tkir soya);
5. yupqa cho'zish (5px - cho'zish, -5px - tutqich);
6. soya rangi.

Obov'yazkovo faqat gorizontal va vertikal ravishda zsuvni ko'rsatish uchun siljiydi, qolgan barcha parametrlar sukut bo'yicha qabul qilinadi. Ushbu mavsumda, bu qora rangni o'zgartirmasdan, soya keskin bo'ladi.

Kombinatsiyalar uchun turli parametrlar Bu qiymat soyalarning keng ko'rinishi sifatida qabul qilinishi mumkin. Stolda 1 sharob ishlab chiqarish uchun kod va natijani ko'rsatadi.

Jadvallardan ko'rinib turibdiki, ovozni qo'lda bo'lsangiz, piksel qo'yish obov'azkovo emas. Soyaning rangi har qanday mavjud formatda ko'rsatilishi mumkin, shuning uchun soyaning shaffof soyasini tanlash uchun RGBA formati, bunday soyaga shira mehribonlik bilan qaraydi. 1-ilovada qanday qilib robiti ko'rsatilgan.

Butt 1. Fon chaqaloqqa qalay

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Natija bu dumba shaklda ko'rsatilgan. 2. Soya blokdagi kutochkí ning yaxlitlanishini takrorlaydi.

Guruch. 2. Orqa fonga qarash kichkintoy

"Keng" ko'rish chizig'i qo'shilishi bilan siz brauzerning ko'rinadigan oynasidan tashqariga chiqishingiz va uni gorizontal aylanishning ko'rinishiga olib kelishingiz mumkin.

Soxta elementlarga qorong'ulik ham qo'shilishi mumkin, ba'zida bu katlama tartibi uchun kerak bo'ladi. Shaklda. 3 ta ko'rsatkich íz sarlavhasini bloklaydi, unga tín qo'shiladi. Xo'sh, soxta elementni :: keyin yutib olish va yangisiga ohang qo'shish uchun bekasi uchun boshqa chiziqlar bo'lmasligi uchun.

Guruch. 3. Tunneldan blokirovka qilish

2-sonda blok ko'rsatiladi.

Misol 2. Tunneldan blok

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Elementning soyasi bitta emas, balki sprat bo'lishi mumkin, ularning parametrlari quti-soya kuchi qiymatida kim orqali o'tkaziladi. Butt 3da soya barcha tasvirlarga qo'shilganligi ko'rsatilgan.

Misol 2. Tunneldan blok

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Ushbu dumbaning natijasi rasmda ko'rsatilgan. to'rtta.

Guruch. 4. Metro tunnelining tasviri

Birinchi soya radiusi 20 piksel bo'lgan kichik soyaga o'xshaydi va to'rtinchi parametrning o'lchami o'zgartirildi (-20 piksel). Boshqa soyaning parametrlari Komidan keyin belgilanadi, soya chaqaloq kabi o'ng qo'lda ko'rinadi va simmetriya uchun o'zgartiriladi.

Box-soyaning kuchi elementga bir yoki bir nechta soyani beradi. Tín ê elementning nusxasi, ko'rsatilgan satrda zmíschenu. Tín_ buvayut zvnishny yoki vnutryshny, razmyty abo tekis, badbo'y kontur bloksiv íz yumaloq burchaklarni vykonuvat mumkin. Inset kalit so'zining yordamidan keyin elementning o'rtasida soyalar hosil bo'ladi;

Qo'shimcha quvvat qutisi-soya uchun blokni qanday talon-taroj qilish kerak

Brauzerlar tomonidan qo'llab-quvvatlash

IE: 9.0
chekka: 12.0
Firefox: 4,0, 3,5 -moz-
Chrome: 10.0, 4.0 -veb-kit-
safari: 5.1, 3.1 -veb-kit-
opera: 11.5
iOS Safari: 5.1, 3.1 -veb-kit-
Android brauzeri: 4.0, 2.1 -veb-kit-

1. Quvvat qutisi-soya sintaksisi

Box-soyaning kuchi blokga bir yoki bir nechta soyani biriktiradi. Quvvat yo yo'q qiymatini qabul qiladi, chunki u soyalar mavjudligini ko'rsatadi yoki koma orqali soyalar ro'yxatini kobdan oxirigacha tartiblaydi.

Teri rangi va krem ​​rangi, yoshning 2 dan 4 gacha bo'lgan qiymati, neobowy rangi va neobowy kalit so'z kiritilgan. Ruxsat etilgan qiymat 0; rangning teng qiymatlarini qulflash uchun o'tkazib yuborilgan ranglar.

Quvvat pasaymaydi.

Sukunatning ta'siri bu kabi turg'undir: birinchi soya hayvonga ma'lum, reshta esa orqada. Ingichkalar tartibga qo'shilmaydi va boshqa elementlarni yoki noziklarni buzishi mumkin. Aranjirovkaning kontekstiga nazar tashlaydigan bo'lsak, elementning tashqi soyalarini bo'yash element kuli ostida o'rtasiz bo'yalgan va elementning ichki soyalari element kuli ustida o'rtasiz bo'yalgan (pastda). chegara va chegara-tasvir, masalan, ê).

Element sifatida qutilarning sepilishi bo'lishi mumkin, barcha badbo'y hid soyalar ustidan hukmronlik qiladi va shunga qaramay, u erda soyalar kamroq bo'yalgan, shuning uchun bo'yalgan chegaralar bo'ladi; div. quti-bezak-tanaffus.

Tíní aylantirish uchun qo'ng'iroq qilmang yoki aylantirilayotgan maydon hajmini oshirmang.

2. Blok uchun soyani qo'llang

2.1. Ichki zulmat

2.2. Bir tomondan tekis soya

tekis

tekis

2.3. "Material dizayni" uslubidagi qorong'ulik