8
تشکر

آموزش ساخت سوئیچ در CSS3

CSS3 - سی اس اس 3

CSS3 – سی اس اس 3

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

مشاهده دمو

در ادامه مطلب همراه ما باشید

HTML

ما به یک input و label احتیاج داریم:

<div>
  <input type="checkbox" id="switch1" class="switch" />
  <label for="switch1">First switch</label>
</div>

CSS

خب حالا به قسمت جالب کار میرسیم. ابتدا input را با استفاده از margin منفی از دید کاربر مخفی میکنیم. میتوان اینکار را با استفاده از display:none هم انجام داد، اما اینکار در این مورد باعث مشکلاتی در گوشی های هوشمند میشود.

* { direction: rtl; }
div { overflow: auto; }
input.switch {
  margin-right: -999px; 
}

حالا به label بعد از input استایل مناسب را میدهیم.

input.switch + label {
  position: relative;
  float: right;
  line-height: 1.6em;
  text-indent: 4em;
  direction: ltr;
  margin: 0.2em 0;
  cursor: pointer;
  user-select: none;
}

قسمت‌های مهم در کد بالا position, text-indent و line-height است. الان اگر نتیجه کار را مشاهده کنید، میبینید که یک فضای خالی در ابتدای label ایجاد شده است، که قرار است ما از این فضای خالی برای ساخت سوئیچ استفاده کنیم.

برای ساخت سوئیچ از شبه عناصر after و before استفاده میکنیم. خب ابتدا یک استایل عمومی هم برای شبه عنصر after و هم برای before در نظر میگیریم.

input.switch + label:before,
input.switch +label:after {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  content: '';
  width: 3.6em;
  background-color: #c33;
  box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.3);
  transition: all 100ms ease-out;
  border-radius: 3px;
}

در کد بالا ما هر دو شبه عنصر after و before را تبدیل به wrapper کردیم. اما با استفاده از کد زیر شبه عنصر after را تبدیل به سوئیچ میکنیم.

input.switch + label:after {
  width: 1.4em;
  top: 0.1em;
  bottom: 0.1em;
  margin-left: 0.1em;
  background-color: #fff;
  border-radius: 0.15em;
  box-shadow: inset 0 -0.2em 0 rgba(0, 0, 0, 0.2);
}

خوب، اگر نتیجه را ببینید، خواهید دید که سوئیچ درست شده است، اما کار نمیکند. پس کدهای زیر را هم اضافه میکنیم.

input.switch:checked + label:before {
  background-color: #393;
}
input.switch:checked + label:after {
  margin-left: 2em;
}

مشاهده دمو

دانلود دمو

  • محسن ف می‌گه:

    سلام ممنون میشه یک آموزش بزارید با استفاده از این دکمه بشه مثلا رنگ پس زمینه سایت رو لایت/دارک کرد ؟ یا مثلا تغییر رنگ کلی ؟

    • محسن شفیعی می‌گه:

      به راحتی میشه اینکارو کرد. برای مثال کد زیر رو به دموی بالا اضافه کنید.
      var switch1 = document.getElementById('switch1');
      var body = document.getElementsByTagName('body')[0];
      switch1 = document.addEventListener('change', function(e) {
      if(e.target.checked) {
      body.style.background = "#0A5200";
      } else {
      body.style.background = "#002E68";
      }
      },'false')

  • qqqamir می‌گه:

    ببخشید میشه این رو هم توی اموزش هاتون بزارید ..که با حرکت کردن این سوییچ یک انیمشینی به حرکت در بیاد
    ممنون …

  • hossein.fifty@yahoo.com می‌گه:

    سلام خیلی عالی بود دمت گرم.


  • نظرات این مطلب بسته است.