uy
Sharhlar
Ichki soya css3. CSS-dagi ichki soyalar. Kichik masofani pastga siljiting va qattiq xiralashtiring

Ichki soya css3. CSS-dagi ichki soyalar. Kichik masofani pastga siljiting va qattiq xiralashtiring

CSS box-shadow xususiyati soyani o'rnatish imkonini beradi html elementi. U veb-sayt dizaynerlari tomonidan matn, tasvirlar bilan ramkalarni qandaydir tarzda bezash va ta'kidlash va kontentni yanada o'qilishi mumkin qilish uchun tez-tez ishlatiladi.

CSS qutisi-soya sintaksisi

... quti-soya: X Y R1 R2 rang; ...
  • X - X o'qi bo'ylab ofset (gorizontal)
  • Y - Y o'qi bo'ylab ofset (vertikal)
  • R1 - loyqalik (qiymat qanchalik baland bo'lsa, o'tish shunchalik silliq bo'ladi)
  • R2 - kengayish radiusi (agar musbat bo'lsa, u cho'ziladi, salbiy, siqiladi)
  • rang - rang (har qanday formatda ko'rsatilishi mumkin: #RGB, rang nomi)
  • inset - agar bu qiymat mavjud bo'lsa, soya blok (element) ichida joylashgan bo'ladi.

Misol 1. Ofsetsiz quti soyali HTML ramka

Quyida CSS box-shadow xususiyati yoqilgan holda soyadan foydalanishning eng oddiy usuli keltirilgan html sahifasi u butun ramka bo'ylab siljishsiz teng ravishda oqganda.

Пример №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

Тень под блочным элементом на странице обычно применяется для создания эффекта трёхмерности, привлечения внимания к элементу или как часть дизайна. Небольшая тень под элементами придаёт также странице объём и глубину.

Для добавления тени используется свойство box-shadow , у которого имеется шесть значений, из них только два являются обязательными. На рис. 1 показано свойство box-shadow со всеми возможными значениями, они пронумерованы для их идентификации.

Рис. 1. Значения свойства box-shadow

  1. ключевое слово inset устанавливает тень внутри элемента;
  2. сдвиг тени по горизонтали (5px - вправо, -5px - влево);
  3. сдвиг по вертикали (5px - вниз, -5px - вверх);
  4. радиус размытия тени (0 - резкая тень);
  5. растяжение тени (5px - растяжение, -5px - сжатие);
  6. цвет тени.

Обязательно следует указать только сдвиг по горизонтали и вертикали, все остальные параметры будут приниматься по умолчанию. В этом случае тень будет резкой без размытия и чёрного цвета.

За счёт комбинаций разных параметров и их значений можно получить широкое разнообразие видов теней. В табл. 1 представлен код и результат, к которому он приводит.

Табл. 1. Сочетания параметров тени
Код Результат Описание
box-shadow: 5px 5px; Резкая тень справа и снизу.
box-shadow: -5px -5px; Резкая тень слева и сверху.
box-shadow: 0 0 5px; Размытая тень вокруг элемента.
box-shadow: 0 0 5px 2px; Расширение тени на 2 пиксела.
box-shadow: 0 0 5px 2px red; Красное свечение вокруг элемента.
box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.5); Полупрозрачная тень.
box-shadow: inset 0 0 6px; Тень внутри.

Как видно из таблицы, сдвиг тени не обязательно задавать в пикселах, хотя это и удобно. Цвет тени можно указывать в любом доступном формате, так, для получения полупрозрачной тени подойдёт формат RGBA, такая тень будет хорошо смотреться на любом фоне. В примере 1 показано, как это сделать.

Пример 1. Тень на фоновом рисунке

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Блок с тенью

Dushmanning bayroqlari mukammal tartibda bo'lganda ularga qarshi chiqmang; dushman lageriga bostirib bo'lmaydigan holatda hujum qilmang; bu o'zgarishlarni boshqarish.

Sun Tzu, trans. Nikolay Konrad

Ushbu misolning natijasi rasmda ko'rsatilgan. 2. Soya blokning burchaklarining yaxlitlanishini kuzatib boradi.

Guruch. 2. Fon rasmida soyaning ko'rinishi

"Keng" soyani qo'shganda, u brauzer oynasining ko'rinadigan chegaralaridan tashqariga chiqishi va gorizontal aylantirish paneli paydo bo'lishiga olib kelishi mumkinligini yodda tuting.

Soxta elementlarga soyalar ham qo'shilishi mumkin, bu ba'zan murakkab tartiblar uchun talab qilinadi. Shaklda. 3-rasmda unga soya qo'shilgan sarlavha bloki ko'rsatilgan. Birlashmada chiziqlar paydo bo'lmasligi uchun psevdoelementdan keyin ::foydalanishingiz va unga soya qo'shishingiz kerak.

Guruch. 3. Soya bilan bloklash

2-misolda bunday blokni yaratish ko'rsatilgan.

Misol 2. Soya bilan bloklash

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Soya bilan bloklash

Sarlavha

Kontentni bloklash

Element bir nechta soyaga ega bo'lishi mumkin, ularning parametrlari box-shadow xususiyati qiymatida vergul bilan ajratilgan; 3-misol barcha tasvirlarga qo'sh soya qo'shishni ko'rsatadi.

Misol 2. Soya bilan bloklash

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Rasm

Ushbu misolning natijasi rasmda ko'rsatilgan. 4.

Guruch. 4. Ikki soyali tasvir

Birinchi soya tasvirning chap tomonida loyqalik radiusi 20px bilan ko'rsatiladi, uning o'lchami to'rtinchi parametrga (-20px) qisqartiriladi. Ikkinchi soyaning parametrlari o'nli nuqtadan keyin ko'rsatiladi va soya rasmning o'ng tomonida ko'rsatiladi va simmetriya uchun ham kamayadi.

Bugun biz CSS soyalarini tasvirlarsiz qanday qilishni o'rganamiz. Ushbu qo'llanmani tugatgandan so'ng, sizga CSS soya generatori kerak bo'lmaydi.

CSS3 yordamida yaratilgan soyalarning asosiy afzalligi - amalga oshirishning qulayligi va serverga so'rovlar sonining kamayishi (chunki biz endi tasvirlardan foydalanmaymiz). CSS soyasini yaratish uchun bizga div tegi va CSS box-shadow xususiyati kerak. Sizga qoʻshimcha belgilash kerak boʻlmaydi, chunki biz asosiy obʼyekt orqasiga qoʻyadigan :after va :before psevdo elementlarni yaratamiz (sinf bilan div). blok).

Biz CSS3 soyasini yaratadigan HTML kodini ko'rib chiqing:

Tarkib

Keyinchalik ko'rishingiz mumkin tayyor misollar va ularni amalga oshirish uchun zarur bo'lgan kod. Sahifadagi matnni minimallashtirish uchun biz o'tkazib yuboramiz CSS xususiyatlari brauzer prefikslari bilan. To'liq kod Siz buni misolga mos keladigan "Misol" havolasini bosish orqali ko'rishingiz mumkin.

.block (pozitsiya:nisbiy; kenglik:40%; toʻldirish:1em; chet:2em 10px 4em; fon:#fff; chegara-radius:4px; quti-soya:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset; ) .block:oldin, .block:so'ng (kontent:""; pozitsiya:mutlaq; z-index:-2; pastki:15px; chap:10px width:50%; box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); chap: auto;rotate;


.block (pozitsiya: nisbiy; kenglik: 40%; toʻldirish: 1em; chekka: 2em 10px 4em; fon: #fff; quti soyasi: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) chegara: 1px solid #efefef; border-radius:0 0 120px 120px / 0 0 6px 6px ) .block:fore, .block: after (content:""; position:absolute ; z-index:-2; chap: 10px balandlik: 0 8px 12px rgba(0, 0, 0.5) aylantirish (-3deg); o'ng: 10px; chap: avtomatik aylantirish: egilish (8deg)

Soya yordamida siz blokli istiqbolni berishingiz mumkin. Misolga qarang.


.block (pozitsiya: nisbiy; kenglik: 40%; toʻldirish: 1em; chekka: 2em 10px 4em; fon: #fff; quti soyasi: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) kiritish; width:50% balandligi:-80px 0 8px rgba(0, 0, 0.4 ) .block:after;

Ko'tarilgan blok uchun CSS soyasi. Misolga qarang.


.block (pozitsiya: nisbiy; kenglik: 40%; toʻldirish: 1em; chekka: 2em 10px 4em; fon: #fff; quti soyasi: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) inset box-soya: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0); , 0, 0, 0.1) kiritish;

Vertikal katlanmış blok uchun CSS3 soyasiga misol. Misolga qarang.


.block (pozitsiya: nisbiy; kenglik: 40%; toʻldirish: 1em; chekka: 2em 10px 4em; fon: #fff; quti soyasi: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) kiritish; ; chap: 0; o'ng: 50%;


.block (pozitsiya: nisbiy; kenglik: 40%; toʻldirish: 1em; chekka: 2em 10px 4em; fon: #fff; quti soyasi: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) kiritish; chap: 0; o'ng: 0 0 15px rgba(0,0,0,0,6);

Gorizontal buklangan blok uchun CSS3 soyasiga misol. Misolga qarang.


.block (pozitsiya: nisbiy; kenglik: 40%; toʻldirish: 1em; chekka: 2em 10px 4em; fon: #fff; quti soyasi: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) kiritish; 0px; chap: 10px; box-shadow:0 0 15px rgba(0,0,0,0,6) chegarasi: 100px / 10px;


.block (pozitsiya: nisbiy; kenglik: 40%; toʻldirish: 1em; chekka: 2em 10px 4em; fon: #fff; quti soyasi: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) kiritish; ; left:10px; o'ng: 0 0 15px rgba(0,0,0,0,6): 100px;

Aylanadigan blok uchun CSS3 soyasi. Misolga qarang.


.block (pozitsiya:nisbiy; kenglik:40%; toʻldirish:1em; chet:2em 10px 4em; fon:#fff; chegara-radius:4px; quti-soya:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset box-shadow:none; transform:rotate(-3deg .block > :first-child:fore (content:""; position:absolute; z); -indeks:-1; pastki: 0 1px 4px rgba (0, 0, 0, 0.3) :oldin, .block:after (kontent:""; pozitsiya:mutlaq; z-indeks:-2; pastki:15px; chap:10px; en:50%; balandlik:20%; maksimal kenglik:300px; box- shadow:0 15px 10px rgba(0, 0, 0, 0.7 transform:rotate(-3deg);

Yozib olish tartibi juda muhim. Birinchi qiymat har doim X o'qi bo'ylab ofset, ikkinchisi - Y o'qi bo'ylab.

Agar o'qlardan biri bo'ylab ofset kerak bo'lmasa, uni nolga o'rnating:

Class(box-shadow: 0 8px;) – soyani faqat Y o'qi bo'ylab siljitish

Natija

Class(box-soya: 8px 8px;) - ikkala eksa bo'ylab siljish

Natija

Box-soya o'qlari uchun salbiy qiymat

Soya teskari yo'nalishda harakat qiladi:

Class(box-soya: -8px 8px;) - soyani X o'qi bo'ylab salbiy qiymatga o'tkazish

Natija

Soyani xiralashtirish radiusi

Uchinchi xususiyat parametri quti soyasi. Agar ko'rsatilmagan bo'lsa, qiymat 0 ga teng va soya o'lchami u qo'llaniladigan elementning o'lchamiga teng.

Class(box-soya: 0 48px 0;) - soya qo'llaniladigan elementning o'lchamlarini takrorlaydi

Natija

Qiymat noldan katta bo'lsa, qirralarning aniqligi yo'qoladi, soya kattaroq va vizual ravishda engilroq bo'ladi. Blur har tomondan qo'llaniladi:

Class(box-soya: 0 0 8px;) - ofset yo'q, faqat xiralashgan

Natija

Class(box-soya: 0 8px 8px;) – Y oʻqini ofset va xiralashtirish

Natija

Salbiy qiymat xato deb hisoblanadi va soya umuman ko'rsatilmaydi.

Soya cho'zilish radiusi

To'rtinchi xususiyat parametri quti soyasi. Elementga nisbatan soyaning o'lchamini o'zgartiradi. Barcha yo'nalishlarda cho'ziladi:

Class(box-soya: 0 0 0 8px;) – joy oʻzgartirish yoki xiralashtirish yoʻq, faqat choʻziladi

Natija

Bunday holda, soya elementdan 16 piksel kenglik va balandlikda kattaroqdir: 8px chap + 8px o'ng va 8px yuqori + 8px pastki.

CSS-da soya cho'zilishining salbiy qiymati

Soya cho'zilmaydi, lekin belgilangan qiymat bo'yicha har tomondan torayadi:

Class(box-soya: 0 16px 0 -8px;) - soyani salbiy qiymat bilan kamaytiring

Natija

Soya rangi

Odatiy bo'lib, soya rangi shrift rangini takrorlaydi: yuqoridagi misollarda bo'lgani kabi.

Soya rangi har qanday mavjud CSS formatida ko'rsatilgan:

  • #ff0009
  • rgb(255, 0, 9)
  • hsl(358, 100%, 50%);

Elementga ko'k soya bering:

Sinf (quti-soya: 0 8px #3a8fe7;)

Natija

Ichki soya

Parametr kiritilgan blok ichidagi soyani ko'rsatadi.

Yuqorida sanab o'tilgan variantlardan farqli o'laroq, qat'iy yozish tartibi yo'q. Ikkala variant ham bir xil natijani beradi:

Box-soya: 0 8px #3a8fe7 inset; quti-soya: inset 0 8px #3a8fe7;

Natija

Kodni o'qiyotganda ikkinchi variantni tushunish osonroq.

Bir nechta soyalar

Bir nechta soyalar vergul bilan ajratilgan. Buyurtmani yuqoridan pastgacha ko'rsatish:

Sinf (box-soya: 0 8px #3a8fe7, 0 16px #3ae7af; )

Natija

Agar siz joyni almashtirsangiz, ko'k soya ko'rinmaydi:

Sinf (box-soya: 0 16px #3ae7af, 0 8px #3a8fe7; )

Natija

Ichki va tashqi soyalar bir vaqtning o'zida o'rnatiladi:

Sinf (quti-soya: 0 16px #3ae7af, kiritilishi 0 8px #3a8fe7; )

Natija

Dumaloq soya

Agar elementga xususiyat berilgan bo'lsa chegara radiusi, soyaning yumaloq burchaklari bo'ladi.

Class( quti soyasi: 0 16px #3a8fe7; chegara radiusi: 8px; )

Natija

Soya cho'zilishini o'rnatib, biz uning yaxlitlanishini ham oshiramiz. Masalan, chegara radiusi 8px va soyaning cho'zilishi 4 ga teng.

8+4=12px - soyaning yaxlitlash radiusi.

Class( quti soyasi: 0 16px 0 4px #3a8fe7; chegara radiusi: 8px; )

Natija

Xuddi shu tamoyil, qiymat salbiy bo'lsa, soyani qisqartirish uchun ham amal qiladi.

8+(-4)=4px - biz ikki barobar kichikroq soyani yaxlitlashni olamiz.

Agar soyaning siqilishi chegara radiusidan kattaroq bo'lsa, biz to'g'ri burchakli soya olamiz. Masalan, siqish 16px.

8+(-16)=(-8), lekin fileta manfiy qiymatga ega bo'lishi mumkin emas va nol qo'llaniladi.

Class( quti soyasi: 0 24px 0 -16px #3a8fe7; chegara radiusi: 8px; )

Natija

CSS xususiyati quti soyasi Opera Minidan tashqari barcha mashhur brauzerlar tomonidan qo'llab-quvvatlanadi.

Sharhlar

Sizga ham yoqishi mumkin