پیشنمایش زنده (iframe sandbox)
تمامصفحه
<label class="radikalwp-tgl-stripes"><input type="checkbox"><span class="radikalwp-tgl-stripes-track"><span class="radikalwp-tgl-stripes-knob"><//span><//span><//label>
.radikalwp-tgl-stripes { display: inline-block; cursor: pointer; }
.radikalwp-tgl-stripes input { position: absolute; opacity: 0; }
.radikalwp-tgl-stripes-track {
display: block;
width: 62px;
height: 30px;
padding: 3px;
background: repeating-linear-gradient(90deg, #e2e8f0 0 8px, #f1f5f9 8px 12px);
border-radius: 8px;
transition: background .3s ease;
}
.radikalwp-tgl-stripes-knob {
display: block;
width: 24px;
height: 24px;
border-radius: 6px;
background: #fff;
border: 1px solid #cbd5e1;
box-shadow: 0 2px 5px rgba(15, 23, 42, .2);
transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.radikalwp-tgl-stripes input:checked + .radikalwp-tgl-stripes-track {
background: repeating-linear-gradient(90deg, #fdba74 0 8px, #ffedd5 8px 12px);
}
.radikalwp-tgl-stripes input:checked + .radikalwp-tgl-stripes-track .radikalwp-tgl-stripes-knob {
transform: translateX(-32px);
border-color: #fb923c;
}
درباره این اسنیپت
سوییچ عریض با مسیر آجری که دستگیره آن روی خطوط عمودی میلغزد و حس کلید پلهای میدهد؛ ظاهری متفاوت برای فرمهایی که میخواهند از قالب سوییچهای معمول خارج شوند. رنگبندی خنثی با تاکید نارنجی در حالت روشن است. برای تنظیمات خلاقانه، صفحات شخصی و پروفایلهای شبکه اجتماعی مناسب است.
پرسشهای متداول
گرادیان تکرارشونده عمودی با دو رنگ متناوب و عرض ۸+۴ پیکسل، الگوی آجر میسازد؛ وقتی حالت روشن میشود نسخه نارنجی همان الگو جاگزین میشود.
بله؛ گوشههای ۶ پیکسلی با الگوی آجری هماهنگ است و حس کلید پلهای میدهد. گرد کردن به 999px ظاهر کلاسیک میدهد.
دو رنگ نارنجی در گرادیان checked و رنگ border دستگیره را تغییر دهید؛ الگوی خطخورده ثابت میماند.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۹ از ۳ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!