آموزش طراحی سوییچ با HTML و CSS

سوییچ در طراحی نرم‌افزارها و همین‌طور طراحی سایت کاربردهای متنوع و فراوانی دارد. به عنوان مثال می‌توان تم تاریک و تم روشن را با یک سوییچ ساده انتخاب کرد یا در سایت فروشگاهی با یک سوییچ ساده، کالاهای موجود را نمایش داد. برای طراحی سوییچ روش‌های مختلفی وجود دارد. یکی از روش‌های ساده، استفاده از HTML و CSS است.

در این مقاله به آموزش طراحی یک سوییچ ساده با استفاده از CSS می‌پردازیم. با ما باشید.

یکی از موضوعات جالب در مقوله‌ی CSS، شبه‌عنصر یا pseudoelement است. شبه‌عنصر می‌تواند بعد و قبل از یک عنصر باشد و البته انواع دیگری نیز وجود دارد. در این صورت برای تعریف کردن آن از ::before و ::after استفاده می‌شود. با استفاده از شبه‌عناصر می‌توان یک سوییچ ساده را به سادگی طراحی کرد. قبل از توضیح کامل مراحل طراحی، به کد HTML و استایل‌هایی که در CSS‌ نیاز است و همین‌طور خروجی نهایی کار توجه کنید:

چک‌باکس و برچسب‌های آن

هدف این است که یک چک‌باکس معمولی را به صورت یک سوییچ بازطراحی کنیم. در واقع می‌خواهیم زمانی که کاربر روی چک‌باکس کلیک می‌کند، سوییچ فعال و غیرفعال شود.

برای سهولت طراحی بهتر است چک‌باکس در تک Label قرار بگیرد. لذا کد HTML به صورت زیر است:

<label class="switch">
  Off
  <input type="checkbox">
  On
</label>

در آغاز استایل خاصی وجود ندارد و برای استایل دادن به input زیرمجموعه‌ی بلوکی با کلاس switch، کد زیر در فایل CSS اضافه می‌شود:

.switch input[type="checkbox"] {

}

در مرورگرهای مبتنی بر webkit، به صورت پیش‌فرض برای چک‌باکس‌ها استایل خاصی وجود دارد. به منظور کنار گذاشتن استایل پیش‌فرض می‌بایست از  -webkit-appearance: none; در تعریف استایل استفاده کرد.

مسأله‌ی بعدی مشخص کردن موقعیت سوییچ فعال و غیرفعال و فاصله‌ی بین این دو حالت است. هر موقعیت با یک المان از نوع شبه‌عنصر تعریف می‌شود. این دو موقعیت از نوع Absolute یا مطلق هستند و می‌خواهیم موقعیت مطلق را نسبت به بلوک بالادست که بلوک input است، تعریف کنیم. لذا موقعیت بلوک بالادست می‌بایست از نوع relative باشد.

برای تنظیم فاصله‌ بلوک input از کناره‌ها یا margin، برای بالا و پایین مقدار صفر و برای کناره‌ها مقدار 1rem مناسب به نظر می‌رسد. بنابراین تا این مرحله، CSS به صورت زیر است: 

.switch input[type="checkbox"] {
  -webkit-appearance: none;
  position: relative;
  margin: 0 1rem;
}

برای برچسب‌ها نیز استایل خاصی ضروری به نظر نمی‌رسد. البته می‌توانید فونت و اندازه‌ی فونت آن را تغییر بدهید.

استفاده از شبه‌عناصر before و after برای طراحی سوییچ

و اما نوبت به دو موقعیت سوییچ می‌رسد که می‌خواهیم با استفاده از دو شبه‌عنصر محبوب یعنی after و before تعریف کنیم. این دو شبه‌عنصر در صورت تعریف شدن در فایل CSS، قبل و بعد از تگ مربوطه قرار می‌گیرند. با توجه به اینکه می‌خواهیم فقط تگ input که زیرمجموعه‌ی عنصر با کلاس switch است، به سوییچ تبدیل شود، لذا شبه‌عنصر بعد از بلوک به صورت زیر در فایل CSS تعریف می‌شود:

.switch input[type="checkbox"]::after {

}

و به صورت مشابه می‌بایست استایل شبه‌عنصر before را تعریف کنیم. شبه‌عنصر after را برای تعریف کردن مستطیل پس‌زمینه که سوییچ روی آن حرکت می‌کند، در نظر می‌گیریم.

واما ۵ نکته‌ی مهم در تعریف کلاس CSS این شبه‌عنصر:

• هر شبه‌عنصر نیاز به محتوای داخلی دارد. برای این مثال، محتوا را خالی در نظر می‌گیریم و از content: '' استفاده می‌کنیم.
• نوع نمایش شبه‌عنصر، موضوع بعدی است که از نوع بلوک یا block است.
• ارتفاع بلوک شبه‌عنصر مورد بعدی است که در این مثال 0.5rem مناسب است.
• عرض بلوک نیز معادل 1rem در نظر گرفته می‌شود.
• در نهایت برای رنگ پس‌زمینه، از رنگ خاکستری استفاده می‌شود.

موارد فوق را به تناسب نیاز تغییر بدهید و به عنوان مثال از رنگ و عرض و ارتفاع دلخواهی استفاده کنید.

.switch input[type="checkbox"]::after {
  content: '';
  display: block;
  width: 1rem;
  height: 0.5rem;
  background-color: grey;
}

و حال نوبت به دستگیره‌ی سوییچ می‌رسد که به شکل دایره است. این دستگیره با شبه‌عنصر before تعریف می‌شود. 

.switch input[type="checkbox"]::before {

}

محتوای خالی، نمایش به صورت بلوک با عرض و ارتفاع یکسان، از ویژگی‌های دستگیر‌ه‌ی دایره‌ای‌شکل است:

.switch input[type="checkbox"]::before {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
}

اما دستگیره در حالت فعال و غیرفعال دارای دو موقعیت متفاوت و همین‌طور رنگ متفاوت است. لذا برای دو حالت چک‌باکس تیک‌خورده و بدون تیک یا به عبارت دیگر دو حالت :checked و  :unchecked، استایل را متفاوت تعریف می‌کنیم.

.switch input[type="checkbox"]:checked::before {
}

.switch input[type="checkbox"]:not(:checked)::before {
}

در حالت تیک خورده، فاصله‌ی دستگیره از سمت چپ را ۱۰ پیکسل فرض کنید و رنگ آن نیز در این حالت آبی است. البته استفاده از رنگ قرمز یا سفید یا زرد و غیره به تناسب نیاز، ضروری است. برای حالت بعدی، فاصله از سمت راست ۱۰ پیکسل می‌شود و رنگ به قرمز تغییر می‌کند:

.switch input[type="checkbox"]:checked::before {
  left: 10px;
  background-color: blue;
}

.switch input[type="checkbox"]:not(:checked)::before {
  right: 10px;
  background-color: red;
}

به جز موارد فوق، استایل شبه‌عنصر before در هر دو حالت یکسان است. به عبارت دیگر در هر دو حالت، موقعیت از نوع absolute است و شیوه‌ی نمایش از نوع بلوک و محتوا تهی است.

.switch input[type="checkbox"]::before {
  content: '';
  display: block;
  position: absolute;
  width: 1rem;
  height: 1rem;
}

برای اینکه سوییچ در وسط قرار بگیرد، فاصله از بالا نیز می‌بایست دقیق تنظیم شود. لذا top: -0.25rem را اضافه می‌کنیم:

.switch input[type="checkbox"]::before {
  content: '';
  display: block;
  position: absolute;
  top: -0.25rem;
  width: 1rem;
  height: 1rem;
}

و اما نوبت به گرد کردن بلوک و اضافه کردن سایه می‌رسد که آن را زیباتر و جالب‌تر می‌کند. برای گرد کردن می‌توانید شعاع گوشه‌ها را ۵۰ درصد تنظیم کنید. البته اگر از عدد بزرگی بر حسب پیکسل استفاده کنید هم گوشه‌ها گرد می‌شود. در صورت مربعی نبودن بلوک، استفاده از شعاع ۵۰ درصد موجب بیضی شدن بلوک می‌شود.

سایه با فاصله‌ی ۲ پیکسل در عرض و ارتفاع و شعاع ۵ پیکسل و رنگ مشکی با شفافیت ۲۵ درصدی مناسب است.

لذا تعریف کلی کلاس دستگیره‌ی سوییچ به صورت زیر است:

.switch input[type="checkbox"]::before {
  content: '';
  display: block;
  position: absolute;
  top: -0.25rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
}

برای حالتی که چک‌باکس فعال نیست هم استفاده از رنگ خاکستری دستگیره ضروری به نظر می‌رسد تا کاربر متوجه وجود سوییچ غیرفعال شود:

.switch input[type="checkbox"]:disabled::before {
  background-color: darkgrey;
}

و به این ترتیب استایل‌ها تکمیل می‌شود.

کد HTML و CSS سوییچ

کد HTML کامل برای سوییچ موردبحث:

<label class="switch">
  Off
  <input type="checkbox">
  On
</label>

و استایل کلی:

.switch input[type="checkbox"]:checked::before {
  left: 10px;
  background-color: blue;
}

.switch input[type="checkbox"]:not(:checked)::before {
  right: 10px;
  background-color: red;
}

.switch input[type="checkbox"]::before {
  content: '';
  display: block;
  position: absolute;
  top: -0.25rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
}

.switch input[type="checkbox"]::after {
  content: '';
  display: block;
  width: 1rem;
  height: 0.5rem;
  background-color: grey;
}

.switch input[type="checkbox"] {
  -webkit-appearance: none;
  position: relative;
  margin: 0 1rem;
}

.switch input[type="checkbox"]:disabled::before {
  background-color: darkgrey;
}

در استایل سوییچ برای حرکت آرام و روان دستگیره بین حالت شروع و پایان، استایلی در نظر گرفته نشده و ابعاد و رنگ‌بندی ممکن است متناسب با وب‌سایت شما نباشد. لذا CSS فوق نیاز به تغییراتی دارد.

dev.toسیاره‌ی ‌آی‌تی