پیشنمایش زنده (iframe sandbox)
تمامصفحه
<label class="radikalwp-hex-check"><input type="checkbox"><span class="radikalwp-hex-box"><//span>فعالسازی نوتیفیکیشن<//label>
.radikalwp-hex-check {
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: 14px;
color: #334155;
}
.radikalwp-hex-check input {
position: absolute;
opacity: 0;
}
.radikalwp-hex-box {
position: relative;
width: 28px;
height: 32px;
background: #e2e8f0;
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
transition: background .25s ease;
}
.radikalwp-hex-box::after {
content: '✓';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 800;
color: #fff;
opacity: 0;
transform: scale(.3);
transition: all .25s cubic-bezier(.34, 1.56, .64, 1);
}
.radikalwp-hex-check input:checked ~ .radikalwp-hex-box {
background: linear-gradient(160deg, #34d399, #059669);
}
.radikalwp-hex-check input:checked ~ .radikalwp-hex-box::after {
opacity: 1;
transform: scale(1);
}
درباره این اسنیپت
چکباکس ششضلعی با برش clip-path که در حالت انتخاب از خاکستری به سبز مرواریدی تبدیل میشود و تیک داخلش مینشیند. فرم هندسی متفاوت آن در فرمهای گیمینگ و تکنولوژی جلوه ویژهای دارد. برای انتخاب پلن، علاقهمندیها و گزینههای چندتایی کاربرد دارد. سایه و حاشیه داخلی به آن عمق ملایمی میدهد.
پرسشهای متداول
مقدار clip-path روی کلاس باکس را حذف یا با شکل دلخواه جایگزین کنید. بقیه افکت بدون تغییر کار میکند.
clip-path در مرورگرهای مدرن پشتیبانی میشود. در موارد بسیار قدیمی شکل مربعی جایگزین نمایش داده میشود و عملکرد حفظ است.
گرادیان سبز در حالت checked قرار دارد. آن را با رنگ برند خود جایگزین کنید تا با تم سایت بخواند.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۱۶ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!