Та элементүүдэд сүүдэр нэмж, өөрчлөх боломжтой Гадаад төрх box-shadow CSS шинж чанарыг ашиглан. Энэ хэв маяг нь блокийн хэмжээ, гурван хэмжээст байдал гэх мэт сонирхолтой эффектүүдийг хэрэгжүүлэх боломжийг олгодог. Энэ өмчийг орчин үеийн бүх хөтөч дэмждэг. Үл хамаарах зүйл бол IE8 болон Opera Mini юм.

box-shadow шинж чанар: синтакс

Энэ хэв маягийг дараах байдлаар бичнэ.

Хайрцаг-сүүдэр: оруулах 4px 4px 8px 5px #333333;

Параметр бүр юу хариуцах вэ гэдгийг дарааллаар нь авч үзье (зүүнээс баруун тийш):

• Түлхүүр үгоруулах: заавал зааж өгөх шаардлагагүй параметр; сүүдэр зурдаг доторбүрэлдэхүүн.
• X офсет: Элементтэй харьцуулахад сүүдэр нь хэвтээ байрлалтай байх зэргийг заана. Эерэг утга нь баруун тийш, сөрөг - зүүн тийш шилжих гэсэн үг юм. 0 утга нь сүүдрийг нөхөхгүй гэсэн үг.
• Y Shift: Сүүдрийн босоо шилжилтийн хэмжээг заана. Эерэг утга нь доошоо шилжих, сөрөг утга нь дээшээ шилжих гэсэн үг юм. 0-ийн утга нь шилжилтгүй сүүдэр юм.
• Бүдгэрүүлэх радиус: Энэ нь сүүдрийн бүдэгрэх зэрэг юм. Утга өндөр байх тусам сүүдэр бүдэгрэх болно. Хэрэв параметрийг заагаагүй бол анхдагч утга нь 0 байна. Энэ тохиолдолд сүүдэр нь бүрэн тодорхой болно.
• Өргөтгөл: хоёр тэнхлэгийн дагуу сүүдрийг сунгах үүрэгтэй нэмэлт параметр; утга өндөр байх тусам суналт их болно. Өргөтгөл нь өмнөх параметр байгаа тохиолдолд л ажиллана. Өгөгдмөл утга нь 0 байна.
• Сүүдрийн өнгө: энэ параметрээр бүх зүйл тодорхой байна - энэ нь элементийн сүүдрийн өнгийг тогтоодог. Өгөгдмөл өнгө нь хар байна.

Анхаарна уу. Android хөтчүүдба түүнээс дээш настай iPhone хувилбарууд Safari нь зөв ажиллахын тулд -webkit- угтварыг шаарддаг CSS шинж чанаруудхайрцаг-сүүдэр.

Энэ өмч нь хэд хэдэн бүлгийн утгыг авч болно (нэг зэрэг хэд хэдэн сүүдэр хийх). Үүнийг хийхийн тулд та эдгээр бүлгүүдийг таслалаар тусгаарласан параметрүүдийг жагсаах хэрэгтэй болно. Жишээлбэл:

Хайрцаг-сүүдэр: 15px 15px 20px #8b0163, оруулга 15px 15px 20px #630046;

Хайрцагны сүүдрийн жишээнүүд

CSS box-shadow өмчийн хүч чадал, гоо сайхныг илүү сайн ойлгоход тань туслахын тулд бид танд аюулгүйгээр хэрэгжүүлж болох цөөн хэдэн жишээг үзүүлэх болно. Энэ өмч нь ердийн блокийг ихээхэн өөрчилж чадна!

Хөнгөн сүүдэр

Хайрцаг-сүүдэр: 0 2px 4px rgba(0, 0, 0, .25);

Цаасан эффект

Хайрцаг-сүүдэр: 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) оруулах;

Олон давхарга

Хайрцаг-сүүдэр: 6px 6px #ccc, 12px 12px #a3a3a3;

Гурвалсан хүрээ

Хайрцаг-сүүдэр: 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);

Булангууд

Хайрцаг-сүүдэр: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385;

Таны харж байгаагаар хайрцагны сүүдрийн өмч нь төсөөлөхөд маш их зай үлдээдэг. Та блокуудыг хүссэнээрээ өөрчилж болно - гол зүйл бол пропорциональ мэдрэмжтэй байх явдал юм! 😉

Дараагийн бүлэгт та элементүүдийн хэмжээг тодорхойлдог өргөн ба өндрийн шинж чанаруудыг судлах болно.

Бичлэг хийх дараалал нь үндсэндээ чухал юм. Эхний утга нь үргэлж X тэнхлэгийн дагуух, хоёр дахь нь Y тэнхлэгийн дагуух офсет юм.

Хэрэв аль нэг тэнхлэгийн дагуу офсет хийх шаардлагагүй бол үүнийг тэг болгож тохируулна уу:

Class(box-shadow: 0 8px;) – сүүдрийг зөвхөн Y тэнхлэгийн дагуу шилжүүлнэ

Үр дүн

Анги(хайрцаг-сүүдэр: 8px 8px;) – хоёр тэнхлэгийн дагуу шилжих

Үр дүн

Хайрцаг-сүүдрийн тэнхлэгийн сөрөг утга

Сүүдэр эсрэг чиглэлд шилжих болно:

Class(box-shadow: -8px 8px;) – сөрөг утгатай сүүдрийг X тэнхлэгийн дагуу шилжүүлэх.

Үр дүн

Сүүдрийн бүдэгрэх радиус

Гурав дахь өмчийн параметр хайрцаг-сүүдэр. Хэрэв заагаагүй бол утга нь 0 байх ба сүүдрийн хэмжээ нь түүний хэрэглэж буй элементийн хэмжээтэй тэнцүү байна.

Анги(хайрцаг-сүүдэр: 0 48px 0;) – сүүдэр нь хэрэглэж буй элементийн хэмжээсийг хуулбарладаг.

Үр дүн

Утга нь тэгээс их байвал ирмэгүүд нь тодорхойгүй болж, сүүдэр томорч, илүү хөнгөн болно. Бүдгэрэлтийг бүх талаас нь хэрэглэнэ.

Анги(хайрцаг-сүүдэр: 0 0 8px;) – офсет байхгүй, зөвхөн бүдгэрүүлнэ

Үр дүн

Анги(хайрцаг-сүүдэр: 0 8px 8px;) – Y тэнхлэгийг офсет ба бүдгэрүүлэх

Үр дүн

Сөрөг утгыг алдаа гэж үзэх бөгөөд сүүдэр огт харагдахгүй.

Сүүдрийн суналтын радиус

Дөрөв дэх өмчийн параметр хайрцаг-сүүдэр. Элементтэй харьцуулахад сүүдрийн хэмжээг өөрчилдөг. Бүх чиглэлд сунадаг:

Анги(хайрцаг-сүүдэр: 0 0 0 8px;) – нүүлгэн шилжүүлэх, бүдгэрүүлэхгүй, зөвхөн сунадаг.

Үр дүн

Энэ тохиолдолд сүүдэр нь өргөн ба өндрийн элементээс 16 пикселээр том байна: 8px зүүн + 8px баруун, 8px дээд + 8px доод.

CSS дахь сүүдэр сунгах сөрөг утга

Сүүдэр нь сунадаггүй, гэхдээ заасан утгаар бүх талаас нь нарийсдаг.

Анги(хайрцаг-сүүдэр: 0 16px 0 -8px;) – сөрөг утгатай сүүдрийг бууруулна.

Үр дүн

Сүүдрийн өнгө

Анхдагч байдлаар, сүүдрийн өнгө нь үсгийн өнгийг хуулбарладаг: дээрх жишээнүүдийн адил.

Сүүдрийн өнгийг ямар ч боломжтой CSS форматаар зааж өгсөн болно:

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

Элементэд цэнхэр сүүдэр өгөх:

Анги(хайрцаг-сүүдэр: 0 8px #3a8fe7;)

Үр дүн

Дотоод сүүдэр

Параметр оруулахблок доторх сүүдрийг харуулдаг.

Дээр дурдсан сонголтуудаас ялгаатай нь бичих хатуу дараалал байхгүй. Хоёр сонголт хоёулаа ижил үр дүнг өгнө:

Хайрцаг-сүүдэр: 0 8px #3a8fe7 оруулга; хайрцаг-сүүдэр: оруулах 0 8px #3a8fe7;

Үр дүн

Хоёрдахь хувилбар нь кодыг уншихад ойлгоход хялбар байдаг.

Хэд хэдэн сүүдэр

Олон сүүдрийг таслалаар тусгаарлан зааж өгсөн. Дээшээс доош дарааллыг харуулах:

Анги( хайрцаг-сүүдэр: 0 8px #3a8fe7, 0 16px #3ae7af; )

Үр дүн

Хэрэв та газруудыг сольсон бол цэнхэр сүүдэр харагдахгүй:

Анги( хайрцаг-сүүдэр: 0 16px #3ae7af, 0 8px #3a8fe7; )

Үр дүн

Дотор болон гадаад сүүдрийг нэгэн зэрэг тохируулна.

Анги( хайрцаг-сүүдэр: 0 16px #3ae7af, оруулах 0 8px #3a8fe7; )

Үр дүн

Бөөрөнхий сүүдэр

Хэрэв элементэд өмч өгөгдсөн бол хилийн радиус, сүүдэр нь бөөрөнхий булантай болно.

Анги( хайрцаг-сүүдэр: 0 16px #3a8fe7; хүрээ-радиус: 8px; )

Үр дүн

Сүүдрийн суналтыг тохируулснаар бид түүний дугуйралтыг нэмэгдүүлнэ. Жишээлбэл, хилийн радиус нь 8px, сүүдрийн суналт нь 4 байна.

8+4=12px нь сүүдрийн дугуйрсан радиус юм.

Анги( хайрцаг-сүүдэр: 0 16px 0 4px #3a8fe7; хүрээ-радиус: 8px; )

Үр дүн

Сөрөг утгатай үед сүүдрийг багасгахад ижил зарчим үйлчилнэ.

8+(-4)=4px - бид хоёр дахин бага сүүдрийг бөөрөнхийлдөг.

Хэрэв сүүдрийн шахалт нь хилийн радиусаас их байвал бид зөв өнцгөөр сүүдэр авах болно. Жишээлбэл, шахалт нь 16px байна.

8+(-16)=(-8), гэхдээ филе сөрөг утгатай байж болохгүй бөгөөд тэгийг хэрэглэнэ.

Анги( хайрцаг-сүүдэр: 0 24px 0 -16px #3a8fe7; хүрээ-радиус: 8px; )

Үр дүн

CSS өмч хайрцаг-сүүдэр Opera Mini-аас бусад бүх алдартай хөтчүүд дэмжинэ.

Тогтмол сүүдэр нь хайрцаг-сүүдэр эсвэл текст-сүүдэр ашиглан хэрэгжүүлэхэд хялбар байдаг. Гэхдээ дотоод сүүдэр хийх шаардлагатай бол яах вэ? Энэ нийтлэлд эдгээр сүүдрийг хэдхэн мөр кодоор хэрхэн хийх талаар тайлбарласан болно.

Синтакс

Эхлээд CSS дээр сүүдрийг хэрэгжүүлэх хоёр үндсэн аргыг авч үзье.

хайрцаг-сүүдэр

Дизайн хайрцаг-сүүдэрхэд хэдэн өөр утгатай:

Хэвтээ офсетТэгээд босоо офсет- хэвтээ ба босоо нүүлгэн шилжүүлэлт. Эдгээр утгууд нь тухайн объект сүүдэрээ аль чиглэлд тусгахыг заана.

Бүдгэрүүлэх радиусТэгээд тархалтын радиусарай илүү төвөгтэй. Ялгаа нь юу юм? Хоёр элемент бүхий жишээг авч үзье, энд утгууд байдаг бүдэгрэх радиусялгаатай:

Сүүдрийн ирмэг нь зүгээр л бүдгэрсэн байна. Өөр өөр утгуудтай тархалтын радиусбид дараахь зүйлийг харж байна.

Энэ тохиолдолд сүүдэр нь том талбайд тархсан байгааг бид харж байна. Хэрэв та утгыг заагаагүй бол бүдэгрэх радиусТэгээд тархалтын радиус, тэгвэл тэдгээр нь 0-тэй тэнцүү байх болно.

текст-сүүдэр

Синтакс нь маш төстэй юм хайрцаг-сүүдэр:

Утга нь ойролцоо боловч тийм биш тархсан сүүдэр. Хэрэглээний жишээ:

Хайрцаг-сүүдэрт оруулах

Объект доторх сүүдрийг "эрвүүлэх" тулд та нэмэх хэрэгтэй оруулах CSS дээр:

Хайрцаг-сүүдрийн үндсэн синтаксийг ойлгосны дараа дотоод сүүдрийг хэрхэн хэрэгжүүлэхийг ойлгоход маш хялбар болно. Утга нь ижил хэвээр байгаа тул та өнгө нэмж болно (RGB зургаан өнцөгт):

Өнгө нь RGB форматтай, альфа утга нь сүүдрийн ил тод байдлыг хариуцдаг.

Сүүдэртэй зургууд

Зурган дээр дотоод сүүдэр нэмэх нь ердийн сүүдэр нэмэхээс арай илүү хэцүү байдаг div. Эхлэхийн тулд ердийн зургийн код энд байна:

Та иймэрхүү сүүдэр нэмж болно гэж үзэх нь логик юм.

Img ( хайрцаг-сүүдэр: оруулах 0px 0px 10px rgba(0,0,0,0.5); )

Гэхдээ сүүдэр харагдахгүй байна:

Энэ асуудлыг шийдэх хэд хэдэн арга байдаг бөгөөд тус бүр нь давуу болон сул талуудтай байдаг. Тэдгээрийн хоёрыг харцгаая. Эхнийх нь зургийг ердийн байдлаар боох явдал юм div:

Div (өндөр: 200px; өргөн: 400px; хайрцаг-сүүдэр: оруулах 0px 0px 10px rgba(0,0,0,0.9); ) img (өндөр: 200px; өргөн: 400px; байрлал: харьцангуй; z-индекс: -2 ;)

Бүх зүйл ажилладаг, гэхдээ та бага зэрэг нэмэх хэрэгтэй HTML тэмдэглэгээболон CSS. Хоёрдахь арга бол зургийг дэвсгэр болгон тохируулах явдал юм хүссэн блок:

Div (өндөр: 200px; өргөн: 400px; дэвсгэр: url(http://lorempixum.com/400/200/transport/2); хайрцаг-сүүдэр: 0px 0px 10px rgba(0,0,0,0.9); )

Дотоод сүүдрийг ашиглахад ийм зүйл тохиолдож болно.

Текст-сүүдэрт оруулах

Текстийн дотоод сүүдрийг хэрэгжүүлэхийн тулд код руу нэмэхэд л хангалттай оруулахАжиллахгүй байна:

Шийдвэрлэхийн тулд эхлээд толгой хэсэгт хэрэглэнэ h1суулгах бараан дэвсгэрмөн цайвар сүүдэр:

H1 (арын өнгө: #565656; өнгө: ил тод; текст сүүдэр: 0px 2px 3px rgba(255,255,255,0.5); )

Энд юу болох вэ:

Нууцлаг найрлагыг нэмж байна дэвсгэр клипЭнэ нь текстээс хэтэрсэн бүх зүйлийг тасалдаг (харанхуй дэвсгэр дээр):

H1 (арын өнгө: #565656; өнгө: ил тод; текст-сүүдэр: 0px 2px 3px rgba(255,255,255,0.5); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text ;)

Энэ нь бараг л бидэнд хэрэгтэй зүйл болсон. Одоо бид текстийг бага зэрэг харанхуйлж (альфа), үр дүн нь:

Өнөөдөр бид CSS сүүдэрийг зураггүйгээр хэрхэн хийхийг сурах болно. Энэхүү зааварчилгааг дуусгасны дараа танд CSS сүүдэр үүсгэгч хэрэггүй болно.

CSS3 ашиглан бүтээгдсэн сүүдрийн гол давуу тал нь хэрэгжүүлэхэд хялбар, серверт хандах хүсэлтийн тоог багасгах явдал юм (бид зураг ашиглахаа больсон). CSS сүүдэр хийхийн тулд бидэнд div таг болон CSS box-shadow шинж чанар хэрэгтэй. Бид үндсэн объектын ард (анги бүхий div) байрлуулах :after болон :before псевдо элементүүдийг үүсгэх тул танд нэмэлт тэмдэглэгээ хийх шаардлагагүй болно. блок).

Бид CSS3 сүүдэр үүсгэх HTML кодыг харна уу:

Дараа нь та харж болно бэлэн жишээнүүдмөн тэдгээрийг хэрэгжүүлэхэд шаардлагатай код. Хуудас дээрх текстийг багасгахын тулд бид хөтөчийн угтвар бүхий CSS шинж чанарыг орхих болно. Бүрэн кодыг жишээнд тохирох "Жишээ" холбоос дээр дарж харж болно.

.block (байрлал:харьцангуй; өргөн:40%; дэвсгэр:1эм; зах:2эм 10px 4em; дэвсгэр:#fff; хүрээ-радиус:4px; хайрцаг-сүүдэр:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) оруулах; ) .block:өмнө, .block:дараа ( агуулга:""; байрлал: үнэмлэхүй; z-индекс:-2; доод: 15px; зүүн: 10px ; өргөн:50%; өндөр:20%; хамгийн их өргөн:300px; хайрцаг-сүүдэр:0 15px 10px rgba(0, 0, 0, 0.7); хувиргах: эргүүлэх (-3deg); ) .block:дараа (баруун :10px; зүүн: автомат; хувиргах: эргүүлэх (3 градус); )

.block (байрлал:харьцангуй; өргөн:40%; дэвсгэр:1эм; зах:2эм 10px 4em; дэвсгэр:#fff; хайрцаг-сүүдэр:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) оруулах; border:1px хатуу #efefef; border-radius:0 0 120px 120px / 0 0 6px 6px; ) .block:before, .block:after (content:""; position:absolute ; z-индекс:-2; доод: 12 пиксел; зүүн: 10 пиксел; өргөн: 50%; өндөр: 55%; хамгийн их өргөн: 200 пиксел; хайрцаг-сүүдэр: 0 8px 12px rgba(0, 0, 0, 0.5); хувиргах: хазайх (-8 градус) эргүүлэх (-3 градус); ) .блок: дараа (баруун: 10 пиксел; зүүн: автомат; хувиргах: хазайлт (8 градус) эргүүлэх (3 градус); )

Сүүдэр ашиглан та блокийн хэтийн төлөвийг өгч болно. Жишээ харна уу.

.block (байрлал:харьцангуй; өргөн:40%; дэвсгэр:1эм; зах:2эм 10px 4em; дэвсгэр:#fff; хайрцаг-сүүдэр:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) оруулах; ) .block:өмнө, .block:дараа ( агуулга:""; байрлал: үнэмлэхүй; z-индекс:-2; ) .block:өмнө ( зүүн: 80px; доод: 5px ; өргөн:50%; өндөр:35%; хамгийн их өргөн:200px; хайрцаг-сүүдэр:-80px 0 8px rgba(0, 0, 0, 0.4); хувиргах: хазайлт (50deg); хувиргах эх: 0 100% ; ) .block:дараа (дэлгэц: байхгүй; )

CSS сүүдэрөргөгдсөн блок дээр. Жишээ харна уу.

.block (байрлал:харьцангуй; өргөн:40%; дэвсгэр:1эм; зах:2эм 10px 4em; дэвсгэр:#fff; хайрцаг-сүүдэр:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) оруулах; хайрцаг-сүүдэр: 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) оруулах; ) .block:өмнө, .block:дараа ( агуулга:""; байрлал: үнэмлэхүй; z-индекс:-2; )

Босоо атираат блокийн CSS3 сүүдэрийн жишээ. Жишээ харна уу.

.block (байрлал:харьцангуй; өргөн:40%; дэвсгэр:1эм; зах:2эм 10px 4em; дэвсгэр:#fff; хайрцаг-сүүдэр:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) оруулах; ) .block:өмнө, .block:дараа ( агуулга:""; байрлал: үнэмлэхүй; z-индекс:-2; ) .block:өмнө ( дээд:10px; доод:10px ; зүүн:0; баруун:50%; хайрцаг-сүүдэр:0 0 15px rgba(0,0,0,0.6); хүрээ-радиус:10px / 100px; )

.block (байрлал:харьцангуй; өргөн:40%; дэвсгэр:1эм; зах:2эм 10px 4em; дэвсгэр:#fff; хайрцаг-сүүдэр:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) оруулах; ) .block:өмнө, .block:дараа ( агуулга:""; байрлал: үнэмлэхүй; z-индекс:-2; ) .block:өмнө ( дээд:10px; доод:10px ; зүүн:0; баруун:0; хайрцаг-сүүдэр:0 0 15px rgba(0,0,0,0.6); хүрээ-радиус:10px / 100px; )

Хэвтээ атираат блокийн CSS3 сүүдэрийн жишээ. Жишээ харна уу.

.block (байрлал:харьцангуй; өргөн:40%; дэвсгэр:1эм; зах:2эм 10px 4em; дэвсгэр:#fff; хайрцаг-сүүдэр:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) оруулах; ) .block:өмнө, .block:дараа ( агуулга:""; байрлал: үнэмлэхүй; z-индекс:-2; ) .block:өмнө ( дээд:50%; доод: 0px; зүүн: 10px; баруун: 10px; хайрцаг-сүүдэр: 0 0 15px rgba(0,0,0,0.6); хилийн радиус: 100px / 10px; )

.block (байрлал:харьцангуй; өргөн:40%; дэвсгэр:1эм; зах:2эм 10px 4em; дэвсгэр:#fff; хайрцаг-сүүдэр:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) оруулах; ) .block:өмнө, .block:дараа ( агуулга:""; байрлал: үнэмлэхүй; z-индекс:-2; ) .block:өмнө ( дээд: 0px; доод: 0px ; зүүн: 10 пиксел; баруун: 10 пиксел; хайрцаг-сүүдэр: 0 0 15 пиксел rgba (0,0,0,0,6); хилийн радиус: 100px / 10px; )

Эргүүлсэн блокт зориулсан CSS3 сүүдэр. Жишээ харна уу.

.block (байрлал:харьцангуй; өргөн:40%; дэвсгэр:1эм; зах:2эм 10px 4em; дэвсгэр:#fff; хүрээ-радиус:4px; хайрцаг-сүүдэр:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) оруулах; хайрцаг-сүүдэр: байхгүй; хувиргах: эргүүлэх (-3deg); ) .block > :first-child:before ( агуулга:""; байрлал: үнэмлэхүй; z-индекс:-1; дээд:0px; доод:0; зүүн:0; баруун:0px; дэвсгэр:#fff; хайрцаг-сүүдэр:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba (0, 0, 0, 0.1) оруулах; ) .block:өмнө, .block:дараа ( агуулга:""; байрлал: үнэмлэхүй; z индекс:-2; доод: 15px; зүүн: 10px; өргөн: 50% ; өндөр:20%; хамгийн их өргөн:300px; хайрцаг-сүүдэр:0 15px 10px rgba(0, 0, 0, 0.7); хувиргах: эргүүлэх (-3deg); ) .block:дараа (баруун:10px; зүүн: автомат; хувиргах: эргүүлэх (3 градус); )

Блок сүүдэр нь вэбсайтын блокуудыг бодит байдал, эзэлхүүнийг өгдөг маш сайн гурван хэмжээст эффект юм. Би суралцаж эхлэхэд (ойролцоогоор 5-6 жилийн өмнө) оршин тогтнох талаар ямар ч ойлголтгүй байсан бөгөөд сайт үүсгэхдээ блокуудын сүүдрийг дүрс болгох хэрэгтэй болсон. Энэ нь маш эвгүй байсан бөгөөд үргэлж миний хүссэнээр бүтдэггүй. Вэб дизайнеруудын ажлыг хөнгөвчлөх CSS-ийн хүчинд баярлалаа. Өнөөдөр би CSS дээр блокуудад сүүдэр хэрхэн үүсгэхийг харуулах болно.

CSS-д сүүдэр нэмэхийн тулд өмчийг ашиглана уу хайрцаг-сүүдэр .

1. сүүдрийг хэвтээ чиглэлд шилжүүлэх (баруун тийш 100px хүртэл, зүүн тийш -100px хүртэл);
2. босоо шилжилт (100 пиксел хүртэл доош, -100 пиксел хүртэл);
3. сүүдрийн бүдэгрэл (0 - тод сүүдэр, 100 - маш бүдгэрсэн сүүдэр);
4. сүүдрийг сунгах (100px хүртэл - сунах, -100px хүртэл - шахалт);
5. сүүдрийн өнгө;
6. inset - сүүдэр нь элементийн дотор, оруулаагүй бол сүүдэр нь гадагшаа харагдах болно.

Үр дүн :

Сүүдэртэй хүснэгт:

код	Жишээ:
хайрцаг-сүүдэр: 0px 13px 17px -6px #000000;
хайрцаг-сүүдэр: 10px -10px 0px -6px #000000;
хайрцаг-сүүдэр: 10px 13px 0px -6px #000000;
хайрцаг-сүүдэр: 1px 1px 32px -6px #000000;
хайрцаг-сүүдэр: -1px 23px 41px -25px #000000;
хайрцаг-сүүдэр: -1px 23px 41px -25px #4dc13c;
хайрцаг-сүүдэр: -10px -10px 40px -6px #000000 оруулга;
хайрцаг-сүүдэр: 7px 10px 23px -8px #92a9e7;

Сүүдэр ашиглан та гурван хэмжээст блок үүсгэж болно.

Код	Жишээ
хайрцаг-сүүдэр: 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, rgb9(32,31px), 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);
хайрцаг-сүүдэр: -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 281px rgb13( ,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 588px rgb113 ,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,rgb181. ,28), -8px 8px rgb(185,160,0), -9px 8px rgb(212,187,27), -9px 9px rgb(184,159,0);
хайрцаг-сүүдэр: -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, );
хайрцаг-сүүдэр: 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 rgb113 ,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,rgb181. ,28), 8px -8px rgb(185,160,0), 9px -8px rgb(212,187,27), 9px -9px rgb(184,159,0);

Blok1 (өргөн: 70%; хамгийн их өргөн: 550px; захын зай: 10px автомат; дэвсгэр: 1em; хайрцаг-сүүдэр: 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) оруулах; )

Үр дүн :

Blok1 (өргөн: 30%; хамгийн их өргөн: 550px; захын зай: 2эм автомат; дэвсгэр: 1эм; дэвсгэр: #DADADA; хайрцагны сүүдэр: 6px 6px #BBBBBB, 12px 12px #919191; )

Үр дүн :

Blok1 (өргөн: 30%; захын зай: 0 автомат; дүүргэлт: 2эм; хайрцаг-сүүдэр: 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; )

Үр дүн :

Сүүдэр ашиглан та үзэсгэлэнтэй хүрээ хийж болно.

Үзэсгэлэнт хүрээг ашиглан шинж чанаруудхайрцаг- сүүдэр

Blok1 (өргөн: 20%; хамгийн их өргөн: 250px; захын зай: 0 авто; дэвсгэр: 1em; хүрээ: 2px тасархай #999; хайрцаг-сүүдэр: 0 0 0 1px #999, 0 0 0 1px #999; )
Үр дүн
:

Blok1 (өргөн: 30%; хамгийн их өргөн: 250px; захын зай: 2эм автомат; дэвсгэр: 4em; дэвсгэр: #dcc005; хайрцаг-сүүдэр: 0 0 4em 4em #fff оруулга; )
Үр дүн
:

Blok1 (хамгийн өргөн: 250px; захын зай: 0 автомат; дэвсгэр: 1em; хүрээ-радиус: 10px; дэвсгэр: rgb(100,100,100) радиаль-градиент(0 0-д тойрог, rgba(255,255,255,.65), rgba(255,255,255,.65), rgba525 .35)); хайрцаг-сүүдэр: 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; )
Үр дүн
:


 
 
 
 
 
 
 

 

 
вэб сайт
 

 

Үр дүн
:

Эдгээр нь эдгээр юм сайхан эффектүүд CSS-ийн сүүдэр ашиглан хүрч болно.  Шинэ, анхны зүйлийг санаарай, бүх зүйл таны гарт байна.  Танд мэдлэг, чадвар бий. 
Энэ өдрүүдийн нэгэнд би Photoshop ашиглахгүйгээр хэрхэн бүтээх талаар нийтлэл гаргах болно.  Тиймээс бүх зүйлийн төвд байж, миний блогын шинэчлэлтийг захиалаарай.  Таны сонирхсон сэдвийг бүү алдаарай.  За ингээд л боллоо, амжилт хүсье!!!