Box Shadow генераторы

Алдын ала қарау блогында түсетін немесе ішкі көлеңке жасау үшін слайдерлерді реттеңіз, содан кейін жасалған box-shadow CSS кодын көшіріңіз. Көлденең және тік ығысуды, бұлдырлық радиусын, таралу радиусын, түс пен мөлдірлікті бір жерден басқарыңыз — аргументтер ретін жаттаудың немесе түстерді rgba() форматына қолмен түрлендірудің қажеті жоқ.

Бұл құрал не істейді?

box-shadow — элементтің артында (немесе ішінде) көлеңке салатын CSS қасиеті. Қолмен жазғанда ол ретпен бес мәнге дейін қабылдайды — көлденең ығысу, тік ығысу, бұлдырлық радиусы, таралу радиусы және түс — оған қоса міндетті емес inset кілт сөзі, мұның бәрін шатастыру немесе бірінші рет тым әлсіз/тым ауыр нәтиже алу оңай.

Бұл құрал мұны тікелей басқаруға айналдырады: слайдерді сүйреңіз, көлеңкенің тірі алдын ала қарау блогында өзгеруін бақылаңыз және ол дұрыс көрінген бойда дәл CSS кодын көшіріңіз. Түс таңдағыш пен мөлдірлік слайдері бірге дұрыс rgba() мәнін автоматты түрде жасайды, себебі мөлдір көлеңкелер әдетте толығымен мөлдір емес көлеңкелерге қарағанда жақсырақ көрінеді.

Оны неге пайдалану керек?

Тірі алдын ала қарау кез келген параметрді өзгерткенде бірден жаңарады — кодқа кірістірмес бұрын дәл көлеңкені көріңіз.
X-ығысу, Y-ығысу, бұлдырлық, таралу, түс және мөлдірлікті бір жерде толық басқару.
Бір басу қалқып тұрған көлеңкенің орнына батып тұрған көрініс үшін inset қосады.
Түсі сіз таңдаған мөлдірлікте rgba() форматына түрлендірілген, қоюға дайын CSS кодын шығарады.
Толығымен браузеріңізде жұмыс істейді — сіз баптаған ешнәрсе ешқайда жүктелмейді.
Тегін, тіркеусіз, мобильді құрылғыларда жұмыс істейді.

Оны қалай пайдалану керек

Көлеңкенің орнын анықтау үшін X және Y ығысуын орнатыңыз — оң мәндер оны оңға/төмен, теріс мәндер солға/жоғары итереді.
Көлеңкенің шетін жұмсарту үшін бұлдырлық радиусын арттырыңыз; көлеңкені элементтің өзінен үлкенірек ету үшін таралуды арттырыңыз.
Түсті таңдап, мөлдірлікті реттеңіз — көбіне шынайы көлеңкелер қою қара түстің орнына 15–40% мөлдірлікті қолданады.
Көлеңке элементтің шекарасының артында емес, ішінде көрінуін қаласаңыз, 'inset' құсбелгісін қойыңыз.
Жасалған CSS кодын көшіріп, стиль файлыңызға қойыңыз.

Мысал

Енгізу

Ығысу: 0px, 10px · Бұлдырлық: 20px · Таралу: 0px · Түс: 35% мөлдірліктегі қара

Нәтиже

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);

Көлденең ығысусыз, элементтің тура астындағы жұмсақ көлеңке — карточка/түймелер үшін ең кең тараған көлеңке стильдерінің бірі.

Бір көлеңке және қабатталған көлеңкелер

Бұл құрал бір көлеңке қабатын жасайды, бұл нақты қолданыстың басым бөлігін қамтиды — түймелер, карточкалар, модальді терезелер мен ашылмалы мәзірлер дерлік әрқашан бір көлеңкені пайдаланады. CSS терең эффекттер үшін бір элементте үтірмен бөлінген бірнеше көлеңкені де қолдайды (мысалы, тар, қою көлеңкені жұмсақ, кең көлеңкенің астына қою), бірақ бұл қолмен қосуға болатын нәзіктеу. Мұнда бір көлеңке жасаңыз, содан кейін жолды қайталаңыз, екінші мәндер жиынын реттеңіз және оларды үтірмен біріктіріңіз.

box-shadow-дың кең тараған үлгілері

Карточканың жеңіл көтерілуі: шағын ығысу (0–4px), орташа бұлдырлық (8–16px), 10–20% мөлдірліктегі қара түс.
Көтерілген модаль/ашылмалы мәзір: үлкенірек ығысу (4–10px) және бұлдырлық (20–30px), қалқып тұру сезімін күшейту үшін 20–35% мөлдірлік.
Басылған/батып тұрған түйме: inset құсбелгісін қойыңыз, аздап 'теріс' сезілетін ығысу мен орташа бұлдырлықты қолданыңыз, сонда көлеңке көтерілу емес, ойық ретінде қабылданады.
Түсті жарқырау: қара түстің орнына бренд түсін таңдаңыз, мөлдірлікті 40–60%-ға дейін көтеріңіз және түймелердің айналасында жұмсақ жарқырау эффектісі үшін таралуды аздап арттырыңыз.
Өткір/қатты көлеңке: жұмсақ көлеңкенің орнына тұтас, ығысқан силуэт алу үшін бұлдырлықты 0-ге, таралуды 0-ге орнатыңыз.

Дөңгеленген бұрыштармен үйлестіру

Көлеңкелер мен дөңгеленген бұрыштар үнемі бірге қолданылады — карточкалар, түймелер мен модальдер дерлік әрқашан екеуін де біріктіреді. Сол элементтің бұрыштарын дөңгелету үшін Border Radius генераторын пайдаланыңыз, содан кейін екі жасалған CSS декларациясын бірге қолданыңыз.

→ Border Radius генераторы

Жиі қойылатын сұрақтар

Бұлдырлық пен таралудың айырмашылығы неде?

Бұлдырлық радиусы көлеңкенің шетін жұмсартады — жоғарырақ мәндер оны бірте-бірте көбірек соңдырады. Таралу радиусы бұлдырлыққа дейін көлеңкенің өлшемін өзгертеді — оң таралу көлеңкені барлық жағынан элементтен үлкенірек етеді, теріс таралу оны кішірейтеді. Күнделікті көлеңкелердің көбі бұлдырлықты қолданады, ал таралу 0-де қалады.

Көлеңке үшін жай hex түсінің орнына неге rgba() қолдану керек?

Толығымен мөлдір емес көлеңке қатал және шынайы емес көрінеді — нақты көлеңкелер әрқашан біршама мөлдір болады, артындағыны сәл көрсетеді. rgba() осы мөлдірлікті тікелей орнатуға мүмкіндік береді, сондықтан бұл құрал әрқашан түсті тұтас hex түрінде емес, альфа мәнімен шығарады.

inset кілт сөзі не істейді?

inset болмаса, көлеңке элементтің шекарасынан тыс салынады, элемент беттің үстінде қалқып тұрғандай. inset болғанда көлеңке керісінше шекараның ішінде салынады, бұл элементті басылған немесе батып тұрған сияқты көрсетеді — көбіне белсенді/басылған түйме күйлері немесе енгізу өрістері үшін қолданылады.

Бір элементке бірнеше көлеңкені қабаттауға бола ма?

Иә — CSS-тегі box-shadow үтірмен бөлінген тізімді қабылдайды, ал браузерлер оларды берілген ретпен көрсетеді (бірінші көлеңке үстінде болады). Кең тараған тәсіл — жалғыз көлеңкенің беретінінен гөрі шынайырақ тереңдік үшін тар, қоюрақ көлеңкені кеңірек, жұмсағырақ көлеңкемен қабаттау.

box-shadow орналасуға әсер ете ме, әлде тек сыртқы көрінісіне ғана ме?

Тек сыртқы көрінісіне — box-shadow үлкен бұлдырлық немесе таралу мәндерінде де элементтің өлшеміне немесе айналасындағы элементтердің орнына ешқашан әсер етпейді. Егер көлеңке визуалды түрде кесілген болып көрінсе, көлеңкенің өз мәндерінің орнына аталық элементте overflow: hidden бар-жоғын тексеріңіз.