Elementlarga soya qo'shishingiz va uni o'zgartirishingiz mumkin tashqi ko'rinish box-shadow CSS xususiyatidan foydalanish. Ushbu uslub sizga qiziqarli effektlarni, masalan, blokning hajmi va uch o'lchamliligini amalga oshirishga imkon beradi. Mulk barcha zamonaviy brauzerlar tomonidan qo'llab-quvvatlanadi. Istisnolar IE8 va Opera Mini.

box-shadow xususiyati: sintaksis

Ushbu uslub quyidagicha yozilgan:

Box-soya: inset 4px 4px 8px 5px #333333;

Keling, har bir parametr nima uchun javobgar ekanligini ko'rib chiqaylik (chapdan o'ngga):

• Kalit so'z inset: ko'rsatilishi shart bo'lmagan parametr; soya tortadi ichida element.
• X ofset: Elementga nisbatan soyaning gorizontal ravishda siljish darajasini belgilaydi. Ijobiy qiymat o'ngga, salbiy - chapga siljishni anglatadi. 0 qiymati soyaning o'zgarmasligini bildiradi.
• Y Shift: Soyaning vertikal siljishi miqdorini belgilaydi. Ijobiy qiymat pastga siljishni anglatadi, salbiy qiymat yuqoriga siljishni anglatadi. 0 qiymati siljishsiz soyadir.
• Xiralashgan radius: Bu soyaning xiralashishi darajasi. Qiymat qanchalik baland bo'lsa, soya shunchalik loyqa bo'ladi. Agar parametr ko'rsatilmagan bo'lsa, standart qiymat 0 ga teng. Bunday holda, soya mukammal aniq bo'ladi.
• Kengaytma: soyani ikkala eksa bo'ylab cho'zish uchun mas'ul bo'lgan ixtiyoriy parametr; qiymat qanchalik baland bo'lsa, streç shunchalik katta bo'ladi. Kengaytma faqat oldingi parametr mavjud bo'lsa ishlaydi. Standart qiymat 0.
• Soya rangi: bu parametr bilan hamma narsa aniq - u element soyasining rangini o'rnatadi. Standart rang qora.

Eslatma. Android brauzerlari va kattaroq iPhone versiyalari Safari to'g'ri ishlashi uchun -webkit- prefiksi talab qilinadi CSS xususiyatlari quti soyasi.

Ushbu xususiyat bir nechta qiymatlar guruhini olishi mumkin (bir vaqtning o'zida bir nechta soyalarni yaratish). Buni amalga oshirish uchun siz vergul bilan ajratilgan ushbu parametrlar guruhlarini ro'yxatlashingiz kerak bo'ladi. Masalan:

Box-soya: 15px 15px 20px #8b0163, oʻrnatilgan 15px 15px 20px #630046;

Box-soya misollari

CSS box-shadow xususiyatining kuchi va go'zalligini yaxshiroq tushunishingizga yordam berish uchun biz sizga xavfsiz tarzda amalda qo'llashingiz mumkin bo'lgan bir nechta misollarni ko'rsatamiz. Bu xususiyat oddiy blokni sezilarli darajada o'zgartirishi mumkin!

Yengil soya

Box-soya: 0 2px 4px rgba(0, 0, 0, .25);

Qog'oz effekti

Box-soya: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .6), 23px 0 20px -23px rgba(0, 0, 0, .6), 0 0 40px rgba (0, 0, 0, .1) kiriting;

Ko'p qatlamlar

Box-soya: 6px 6px #ccc, 12px 12px #a3a3a3;

Uchta ramka

Box-soya: 0 0 0 7px rgb(118, 46, 177), 0 0 0 14px rgba(118, 46, 177, 0.6), 0 0 0 21px rgba(118, 46, 177, 0.4);

Burchaklar

Box-soya: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385;

Ko'rib turganingizdek, quti-soya xususiyati tasavvur qilish uchun juda ko'p joy qoldiradi. Siz bloklarni xohlaganingizcha o'zgartirishingiz mumkin - asosiysi mutanosiblik hissi! 😉

Keyingi bobda siz elementlarning o'lchamini aniqlaydigan kenglik va balandlik xususiyatlarini o'rganasiz.

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 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 almashish yoki xiralashish 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 joylarni 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

Soyaning cho'zilishini o'rnatib, biz uning yaxlitligini 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.

Oddiy soyalarni quti-soya yoki matn-soya yordamida amalga oshirish oson. Ammo ichki soyalar qilish kerak bo'lsa-chi? Ushbu maqolada bu soyalarni bir necha qator kod yordamida qanday qilish kerakligi tasvirlangan.

Sintaksis

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

quti soyasi

Dizayn quti soyasi turli xil ma'nolarni o'z ichiga oladi:

Gorizontal ofset Va vertikal ofset- mos ravishda gorizontal va vertikal siljish. Ushbu qiymatlar ob'ekt qaysi tomonga soya solishini ko'rsatadi:

Xiralik radiusi Va tarqalish radiusi biroz murakkabroq. Farqi nima? Keling, ikkita elementli misolni ko'rib chiqaylik, bu erda qiymatlar loyqalik radiusi farq qiladi:

Soyaning chekkasi oddiygina xiralashgan. Turli qiymatlar bilan tarqalish radiusi biz quyidagilarni ko'ramiz:

Bunday holda, biz soyaning katta maydonga tarqalganligini ko'ramiz. Agar qiymatni belgilamasangiz loyqalik radiusi Va tarqalish radiusi, keyin ular 0 ga teng bo'ladi.

matn soyasi

Sintaksis juda o'xshash quti soyasi:

Ma'nolari o'xshash, ammo yo'q yoyilgan soya. Foydalanish misoli:

Soya qutisiga kiriting

Ob'ekt ichidagi soyani "aylantirish" uchun siz qo'shishingiz kerak kiritilgan CSS-da:

Asosiy quti-soya sintaksisini tushunganingizdan so'ng, ichki soyalarni qanday amalga oshirishni tushunish juda oson. Qiymatlar hali ham bir xil, siz rang qo'shishingiz mumkin (RGB olti burchakli):

Rang RGB formatida, alfa qiymati soyaning shaffofligi uchun javobgardir:

Soyalar bilan rasmlar

Tasvirga ichki soya qo'shish oddiy soya qo'shishdan ko'ra biroz qiyinroq div. Boshlash uchun bu erda odatiy rasm kodi:

Siz shunday soya qo'shishingiz mumkin deb taxmin qilish mantiqan to'g'ri:

Img (box-soya: inset 0px 0px 10px rgba(0,0,0,0.5); )

Ammo soya ko'rinmaydi:

Ushbu muammoni hal qilishning bir necha yo'li mavjud, ularning har biri o'zining ijobiy va salbiy tomonlariga ega. Keling, ulardan ikkitasini ko'rib chiqaylik. Birinchisi, rasmni muntazam ravishda o'rashdir 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; z-indeks: -2 ;)

Hamma narsa ishlaydi, lekin siz biroz qo'shimcha kiritishingiz kerak HTML belgilash va CSS. Ikkinchi usul - tasvirni fon sifatida o'rnatish kerakli blok:

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); )

Ichki soyalardan foydalanganda shunday bo'lishi mumkin:

Matn soyasiga kiritish

Ichki matn soyasini amalga oshirish uchun kodga shunchaki qo'shing kiritilgan ishlamayapti:

Yechish uchun avval sarlavhaga murojaat qiling h1 o'rnatish qorong'u fon va engil soya:

H1 (fon rangi: #565656; rang: shaffof; matn soyasi: 0px 2px 3px rgba(255.255.255.0.5); )

Mana nima sodir bo'ladi:

Yashirin ingredientni qo'shish fon klipi bu matndan tashqariga chiqadigan har qanday narsani (quyuq fonga) kesib tashlaydi:

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 ;)

Bu bizga deyarli kerak bo'lgan narsa bo'lib chiqdi. Endi biz matnni biroz qoraytiramiz (alfa) va natija:

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:

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

.block (pozitsiya: nisbiy; kenglik: 40%; toʻldirish: 1em; chekka: 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) kiritish; ) .block:oldin, .block:keyin (kontent:""; pozitsiya:mutlaq; z-index:-2; pastki:15px; chap:10px ; eni:50%; balandlik:20%; maksimal kenglik:300px; quti soyasi:0 15px 10px rgba(0, 0, 0, 0.7); transform:aylantirish(-3deg); ) .blok:keyin ( oʻngda :10px; chap: avtomatik; aylantirish: aylantirish (3deg); )

.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; border:1px solid #efefef; border-radius:0 0 120px 120px / 0 0 6px 6px; ) .block:oldin, .block:after (content:""; position:absolute ;z-index:-2;pastki:12px;chap:10px;keng:50%;balandlik:55%;maks-keng:200px;box-soya:0 8px 12px rgba(0, 0, 0, 0.5); aylantirish: qiyshayish(-8deg) aylantirish(-3deg); ) .blok:keyin (o‘ngda:10px; chapda:avtomatik; o‘zgartirish: qiyshayish(8deg) aylantirish(3deg); )

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; ) .block:oldin, .block:keyin (kontent:""; pozitsiya:mutlaq; z-index:-2; ) .block:oldin (chapda:80px; pastki:5px ; kenglik: 50%; balandlik: 35%; maksimal kenglik: 200 piksel; quti-soya: -80px 0 8px rgba (0, 0, 0, 0.4); transform: egilish (50deg); transform-origin: 0 100% ; ) .block:keyin (displey:yo'q; )

CSS soyasi ko'tarilgan blokda. 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; quti soyasi: 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; ) .block:oldin, .block:keyin (kontent:""; pozitsiya:mutlaq; z-indeks:-2; )

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

.blok (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; ) .block:oldin, .block:so‘ng (kontent:""; pozitsiya:mutlaq; z-index:-2; ) .block:oldin ( top:10px; pastki:10px ; chap: 0; o'ng: 50%; quti-soya: 0 0 15px rgba (0,0,0,0,6); chegara radiusi: 10px / 100px; )

.blok (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; ) .block:oldin, .block:so‘ng (kontent:""; pozitsiya:mutlaq; z-index:-2; ) .block:oldin ( top:10px; pastki:10px ; chap: 0; o'ng: 0; quti-soya: 0 0 15px rgba (0,0,0,0,6); chegara radiusi: 10px / 100px; )

Gorizontal buklangan blok uchun CSS3 soyasiga misol. Misolga qarang.

.blok (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; ) .block:oldin, .block:keyin (kontent:""; pozitsiya:mutlaq; z-index:-2; ) .block:oldin ( tepa:50%; pastki: 0px; chap: 10px; oʻng: 10px; quti soyasi: 0 0 15px rgba (0,0,0,0.6); chegara radiusi: 100px / 10px; )

.blok (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; ) .block:oldin, .block:so‘ng (kontent:""; pozitsiya:mutlaq; z-index:-2; ) .block:oldin ( top:0px; pastki:0px ; chap: 10 piksel; o'ng: 10 piksel; quti soyasi: 0 0 15 piksel rgba (0,0,0,0,6); chegara radiusi: 100px / 10px; )

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; tepa:0px; pastki:0; chap:0; oʻng:0px; fon:#fff; quti-soya:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba (0, 0, 0, 0.1) kiritish; ) .block:oldin, .block:so'ng (kontent:""; pozitsiya:mutlaq; z-index:-2; pastki:15px; chap:10px; eni:50% ; balandlik: 20%; maksimal kenglik: 300 piksel; quti-soya: 0 15px 10px rgba (0, 0, 0, 0.7); transform: aylantirish (-3deg); ) .blok: keyin (oʻng: 10px; chap: avtomatik; aylantirish: aylantirish (3deg); )

Blok soyasi - bu veb-sayt bloklariga realizm va hajmni beruvchi ajoyib uch o'lchovli effekt. Men o'qishni boshlaganimda (taxminan 5-6 yil oldin) borligi haqida hech qanday tasavvurga ega emas edim va sayt yaratishda bloklarning soyasini tasvirga aylantirishim kerak edi. Bu juda noqulay edi va har doim ham men xohlagan tarzda ishlamadi. Veb-dizaynerlarning ishini osonlashtirgan CSS-ning kuchi tufayli. Bugun men sizga CSS-da bloklar uchun soyani qanday yaratishni ko'rsataman.

CSS-da soya qo'shish uchun xususiyatdan foydalaning quti soyasi .

1. soyani gorizontal ravishda siljitish (100px gacha o'ngga, -100px gacha chapga);
2. vertikal siljish (pastga 100px gacha, yuqoriga -100px gacha);
3. soyaning xiralashishi (0 - aniq soya, 100 - juda xiralashgan soya);
4. soyani cho'zish (100px gacha - cho'zish, -100px gacha - siqish);
5. soya rangi;
6. inset - soya element ichida bo'ladi, insetsiz soya tashqariga qaraydi.

Natija :

Soyalar bilan jadval:

kod	Misol:
quti soyasi: 0px 13px 17px -6px #000000;
quti soyasi: 10px -10px 0px -6px #000000;
quti soyasi: 10px 13px 0px -6px #000000;
quti soyasi: 1px 1px 32px -6px #000000;
quti soyasi: -1px 23px 41px -25px #000000;
quti soyasi: -1px 23px 41px -25px #4dc13c;
box-shadow: -10px -10px 40px -6px #000000 inset;
quti soyasi: 7px 10px 23px -8px #92a9e7;

Soya yordamida siz uch o'lchamli blok yaratishingiz mumkin:

Kod	Misol
quti soyasi: 1px 0px rgb(220.195.35), 1px 1px rgb (192.167.7), 2px 1px rgb (219.194.34), 2px 2px rgb (191.166.6), 3px 2px , rgb19(220,195,35), 3px rgb(190.165,5), 4px 3px rgb(217.192.32), 4px 4px rgb (189.164.4), 5px 4px rgb (216.191.31), 5px 5px rgb (188.163,rgb15), 30), 6px 6px rgb(187.162,2), 7px 6px rgb(214.189.29), 7px 7px rgb(186.161,1), 8px 7px rgb (213.188.28), 8px 8px, rgb180), rgb180), rgb (212,187,27), 9px 9px rgb (184,159,0);
quti soyasi: -1px 0px rgb(220.195.35), -1px 1px rgb (192.167.7), -2px 1px rgb (219.194.34), -2px 2px rgb (191.166.6), -3px 28, rgb12( ,33), -3px 3px rgb(190.165.5), -4px 3px rgb(217.192.32), -4px 4px rgb (189.164.4), -5px 4px rgb (216.191.31), -5px 588, rgb13 ,3), -6px 5px rgb(215.190.30), -6px 6px rgb(187.162.2), -7px 6px rgb(214.189.29), -7px 7px rgb(186.161.1), -8px 73, rgb1821 ,28), -8px 8px rgb(185.160.0), -9px 8px rgb (212.187.27), -9px 9px rgb (184.159,0);
quti soyasi: -1px -0px rgb(220.195.35), -1px -1px rgb(192.167.7), -2px -1px rgb(219.194.34), -2px -2px rgb(191.166.6), -3px -2px rgb(218.193.33), -3px -3px rgb(190.165.5), -4px -3px rgb(217.192.32), -4px -4px rgb(189.164.4), -5px -4px rgb(216.191, 31), -5px -5px rgb(188.163.3), -6px -5px rgb(215.190.30), -6px -6px rgb(187.162,2), -7px -6px rgb(214.189.29), -7px - 7px rgb(186.161,1), -8px -7px rgb(213.188.28), -8px -8px rgb(185.160.0), -9px -8px rgb(212.187.27), -9px -9px rgb(184.159, );
quti soyasi: 1px -0px rgb(220.195.35), 1px -1px rgb(192.167.7), 2px -1px rgb(219.194.34), 2px -2px rgb(191.166.6), 3px -28px rgb12( ,33), 3px -3px rgb(190.165.5), 4px -3px rgb(217.192.32), 4px -4px rgb(189.164.4), 5px -4px rgb(216.191.31), 5px -58px rgb13 ,3), 6px -5px rgb(215.190.30), 6px -6px rgb(187.162.2), 7px -6px rgb(214.189.29), 7px -7px rgb(186.161,1), 8px -73, rgb1821 ,28), 8px -8px rgb(185.160,0), 9px -8px rgb(212.187.27), 9px -9px rgb(184.159,0);

Blok1 (kenglik: 70%; maksimal kenglik: 550px; chekka: 10px avtomatik; toʻldirish: 1em; quti soyasi: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0) , 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) kiritish; )

Natija :

Blok1 (kenglik: 30%; maksimal kenglik: 550px; chekka: 2em avtomatik; toʻldirish: 1em; fon: #DADADA; quti soyasi: 6px 6px #BBBBBB, 12px 12px #919191; )

Natija :

Blok1 (kengligi: 30%; hoshiya: 0 avtomatik; toʻldirish: 2em; quti soyasi: 0 0 0 1px #ccc, 0 -20px 0 -10px #00FF00, 20px 0 0 -10px #FF0000, 0 20px 0 -10px # FFFF00, -20px 0 0 -10px #FF3399; )

Natija :

Soya yordamida siz chiroyli ramka yasashingiz mumkin.

Xususiyatlardan foydalangan holda chiroyli ramkaquti- soya

Blok1 (kenglik: 20%; maksimal kenglik: 250px; hoshiya: 0 avtomatik; toʻldirish: 1em; chegara: 2px chiziqli #999; quti soyasi: 0 0 0 1px #999, 0 0 0 1px #999; )
Natija
:

Blok1 (kenglik: 30%; maksimal kenglik: 250px; chekka: 2em avtomatik; toʻldirish: 4em; fon: #dcc005; quti soyasi: 0 0 4em 4em #fff inset; )
Natija
:

Blok1 ( maksimal kenglik: 250px; hoshiya: 0 avtomatik; toʻldirish: 1em; chegara radiusi: 10px; fon: rgb(100,100,100) radial-gradient (0 0 da doira, rgba(255,255,255,.65), rgba(255,255,255,.65), rgba, 52,55 .35)); quti-soya: inset rgba(0,0,0,.5) -3px -3px 8px, inset rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px; )
Natija
:


 
 
 
 
 
 
 

 

 
veb-sayt
 

 

Natija
:

Bular chiroyli effektlar CSS-da soyalar yordamida erishish mumkin.  Yangi va original narsani o'ylab toping, hamma narsa sizning qo'lingizda.  Sizda bilim va imkoniyatlar mavjud. 
Va shu kunlarning birida men Photoshop-dan foydalanmasdan qanday qilib yaratishingiz mumkinligi haqida maqola nashr etaman.  Shunday qilib, narsalarning markazida bo'ling va mening blogim yangilanishlariga obuna bo'ling.  Sizni qiziqtirgan mavzuni o'tkazib yubormang.  Xo'sh, shunday, omad tilaymiz!!!