Box-shadow generatori: foydalanish tartibi
- 1
Boshlangʻich soyani tanlang
“Yumshoq”, “Qatlamli” yoki “Koʻtarilish 2” kabi namunani bosing yoki odatiy qatlamni sozlang.
- 2
Har bir qatlamga shakl bering
Qatlamni tanlab, uning X va Y siljishi, xiraligi, yoyilishi, rangi, shaffofligi va inset holatini belgilang.
- 3
Oʻz sirtingizda tekshiring
Blok oʻlchami, burchak radiusi va ranglarini siz bezayotgan elementga moslang.
- 4
CSS ni nusxalang
box-shadow eʼlonini yoki Tailwind klassini kodingizga koʻchiring.
Cheklovlar va Pro
Bepul, roʻyxatdan oʻtishsiz: cheksiz qatlamlar, −100 dan 100 px gacha siljish, 200 px gacha xiralik va 12 ta tayyor soya.
Pro reklamani olib tashlaydi; soya muharriri barcha tariflarda toʻliq ishlaydi. Pro tarifini koʻrish
Box-shadow generatori haqida
CSS dagi box-shadow xossasi qatlamlar roʻyxatini qabul qiladi: har birida gorizontal va vertikal siljish, xiralik radiusi, yoyilish masofasi, rang va ixtiyoriy inset kalit soʻzi boʻladi. Tabiiy koʻrinadigan chuqurlikka erishish uchun bularning hammasini ikki yoki undan koʻp qatlamda muvozanatlash kerak, stil faylidagi raqamlarni qoʻlda oʻzgartirib buni qilish qiyin. Bu muharrir slayderlarni surayotganingizda natijani jonli namunaviy blokda koʻrsatadi, eʼlonni va Tailwind shadow-[…] klassini esa oʻzi yozadi.
Istalgancha qatlam qoʻshing, solishtirish uchun birini vaqtincha yashiring, yuqoriga yoki pastga suring — roʻyxatdagi birinchi qatlam eng ustda chiziladi — yoki bosilgan tugma va kiritish maydonlari uchun uni inset ga oʻtkazing. Siljishlar −100 dan 100 pikselgacha, xiralik 200 pikselgacha, yoyilish −100 dan 100 gacha boʻladi, har bir rangning oʻz shaffofligi bor. Manfiy yoyilish — zamonaviy yumshoq soyalarning siri: u soyani element ostiga tortadi va pastda faqat nozik nur koʻrinib qoladi.
Namunaviy blokning oʻlchamini, burchak radiusini, blok va fon rangini oʻzgartirish mumkin, shuning uchun soyani dizayningizning haqiqiy sirtida baholaysiz, jumladan soyalarga koʻproq shaffofsizlik yoki rangli nur kerak boʻladigan qorongʻi mavzularda ham.
Oʻn ikkita tayyor boshlanish nuqtasi bor: toʻrtta Material Design balandlik darajasi, yumshoq bitta qatlam, besh qatlamli silliq soya, qattiq neobrutalistik siljish, neomorfizm, ichki soya, rangli nur, fokus uslubidagi kontur halqa va suzuvchi kartochka. Gradiyentlar boshqa yorliqda; matn soyalari va drop-shadow() filtri qamrab olinmagan.
Maxfiylik
Soya butunlay shu sahifada yaratiladi va koʻrsatiladi, qatlamlaringiz esa sahifa yangilanganda yoʻqolmasligi uchun faqat shu brauzerning lokal xotirasida saqlanadi. Hech qanday sozlama yoki dizayn serverga yuborilmaydi.