آموزش ساخت دکمه شب و روز سایت

67

0

طراحی دکمه شب و روز سایت

اخیرا تعبیه ی یک دکمه ی خاموش و روشن و یا کلید شب و روز در بخش بالایی سایت بسیار مرسوم وجالب توجه است امروز می خواهیم نحوه ی طراحی این دکمه را فرا گیریم.
قبل از هرچیز باید بدانیم برای طراحی یک المان در وب سایت 2 مرحله در پیش داریم :

  1. بخش ظاهری
  2. بخش عملکردی

طراحی ظاهر دکمه

شاید اغراق نکرده باشیم که بگوییم ظاهر هر چیز در وب تاثیر زیادی روی میزان استفاده ی کاربر از آن دارد ، لذا در این مورد با وسواس خاصی باید عمل نمود. قبل از هرچیزی به سراغ کد html این کلید می رویم و کد زیر را درون آن قرار می دهیم :

<div class="ondisplay">
  
  <section title=".Tutsxen">
    <!-- .slideThree -->
    <div class="slideThree">  
      <input type="checkbox" value="None" id="slideThree" name="check" checked onclick="myFunction()"/>
      <label for="slideThree"></label>
    </div>
    <!-- end .slideThree -->
  </section>
  
</div>

 

برای شخصی سازی می توانید اتریبیوت title در تگ section را تغییر یا حذف کنید.

حال نوبت استایل های دکمه می باشد :

/* $activeColor: #c0392b; //red */
$activeColor: #27ae60; //green
$darkenColor: darken($activeColor, 20%);
/* $background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/13460/dark_wall.png'); */
$background: #3498db;


/* .slideThree */
.slideThree {
  width: 80px;
  height: 26px;
  background: #333;
  margin: 20px auto;
  position: relative;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
  &:after {
    content: 'OFF';
    color: #000;
    position: absolute;
    right: 10px;
    z-index: 0;
    font: 12px/26px Arial, sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 0px rgba(255,255,255,.15);
  }
  &:before {
    content: 'ON';
    color: $activeColor;
    position: absolute;
    left: 10px;
    z-index: 0;
    font: 12px/26px Arial, sans-serif;
    font-weight: bold;
  }
  label {
    display: block;
    width: 34px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 1;
    background: #fcfff4;
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    border-radius: 50px;
    transition: all 0.4s ease;
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
  }
  input[type=checkbox] {
    visibility: hidden;
    &:checked + label {
      left: 43px;
    }
  }    
}
/* end .slideThree */

// ** Page Styling - Nothing to do with the Radio Buttons **
*{box-sizing: border-box;}
body {
  background: $background;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  h1, h2, em {
    color: #eee;
    font-size: 30px;
    text-align: center;
    margin: 20px 0 0 0;
    -webkit-font-smoothing: antialiased;
    text-shadow: 0px 1px #000;
  }
  em{
    font-size: 14px;
    text-align: center;
    display: block;
    margin-bottom: 50px;
  }
  .ondisplay{
    text-align:center;
    padding:20px 0;
    section{
      width:100px;
      height:100px;
      background: #555;
      display:inline-block;
      position: relative;
      text-align: center;
      margin-top:5px;
      border: 1px solid gray;
      border-radius: 5px;
      box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.3), 
        0 0 40px rgba(0, 0, 0, 0.1) inset;
      &:after{
/*         visibility: hidden; */
        content:attr(title);
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 3px;
        color: #fff;
        font-size: 12px;
        font-weight: 400;
        -webkit-font-smoothing: antialiased;
        text-shadow: 0px 1px #000; 
      }
    }
  }
}

توجه کنید کد های فوق بصورت SCSS و مرورگر نمیتواند مستقیما این کد هارا اجرا کند ، لذا اگر میخواهید این کد هارا مستقیما استفاده کنید باید یا بصورت دستی یا با ابزار های مخصوص اینکار کد های SCSS را به CSS تبدیل کنید.
ضمن اینکه اگر میخواهید از کد های بالا بعنوان دکمه ی شب و روز استفاده کنید توصیه می شود بجای کلمه on از کلمه Day یا روز و بجای کلمه ی off از کلمه dark یا شب استفاده کنید.

بخش عملکرد

راه های زیادی برای اعمال تغییرات وجود دارد اما ساده ترین راه ممکن اعمال تغییرات با کد JavaScript یا JQuery است ، در این آموزش از روش JavaScript استفاده میکنیم .

کد زیر را در بخش اسکریپت ها (یا فایل مجزا یا بین تگ script) کپی میکنیم :

function myFunction() {
 var checkBox = document.getElementById("slideThree");

// If the checkbox is checked, display the output text 
 if (checkBox.checked == true){ 
  var element = document.body;
  element.classList.add("light-mode");
  element.classList.remove("dark-mode");
 }
 else { 
  var element = document.body;
  element.classList.add("dark-mode");
  element.classList.remove("dark-mode");
 }
}

 

حال به کد های css برگردید و تغییراتی را که دوست دارید با روشن یا خاموش شدن این دکمه رخ دهد را مشخص نمایید برای مثال :

.light-mode{
 background:#fff;
 color:#000;
}
.dark-mode{
 background:#000;
 color:#fff;
}

 

خب این آموزش هم به اتمام رسید اگر سوال یا ابهامی داشتید در بخش کامنت ها پذیرا خواهیم بود.

مهندس محسن حسن پور

1سال در کنار تاتژن

دیدگاه بگذارید

avatar
  اشتراک  
اطلاع از
ارسال تیکت