لطفا صبر کنید ...

طراحی Input Box با CSS3

الهام غایب

توسط الهام غایب

دیدگاه ها: 0
بازدید ها : 268
رایگان
هدف ما این است که شما، در بالاترین سطح طراحی و توسعه وب باشید.

ثبت نام کنید

گوگل متریال دیزاین در حال حاضر با معرفی Polymer برای ایجاد اپلیکیشن‌های انیمیشنی، بسیاری از برنامه نویسان را هیجان زده کرده است. در این مقاله از لیداوب، می‌خواهیم input boxهای پلیمر خود را با استفاده از CSS3 ایجاد کنیم. 


طراحی Input Box با CSS3

ما تمام مراحل طراحی Input Box را با کدهای css و جاوا اسکریپت انجام می‌دهیم. ابتدا کدهای html را نوشته و به آن استایل می‌دهیم و سپس انیمیشن‌ها و تغییرات را با css اضافه می‌کنیم.

کدهای HTML

کدهای html برای ساخت این پروژه بسیار ساده هستند. فقط باید آن را با دو گروه از inputها شکل دهیم. توجه کنید که ما با Codepen کار می‌کنیم:

<form>
  <div class="group">      
    <input type="text" required>
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Name</label>
  </div>

  <div class="group">      
    <input type="text" required>
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Email</label>
  </div>
</form>

ما در اینجا به چهار مولفه نیاز داریم:

- Input به عنوان ورودی عمل می‌کند

- highlight یک هایلایت کوچک است که اطرف ورودی برق می‌زند

- bar دو نواری که خط زیرین را تشکیل می‌دهند

- label به عنوان یک placeholder عمل می‌کند تا وقتی که ما روی ورودی کلیک کنیم سپس جا به جا شده و به یک لیبل تبدیل می‌شود.

با آماده شدن کدهای html ساده خود، حالا به انیمیشن‌ها و css transition می‌پردازیم.

متحرک سازی Input

ما این بخش را به سه قسمت تقسیم می‌کنیم، the lable/placeholder ،the underline و highlight. برای سهولت کار از پیشوندهایی مثل –moz- و –webkit- استفاده نمی‌کنیم:

/* form starting stylings ------------------------------- */
.group        { 
  position:relative; 
  margin-bottom:45px; 
}
input         {
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;
  border-bottom:1px solid #757575;
}
input:focus     { outline:none; }

ما فقط موارد را جایگزین کرده و به کدهای بالا padding اضافه میکنیم. همچنین، group را به صورت position:relative; تنظیم می‌کنیم تا بتوانیم المان‌های دیگر مرتبط با آن را هم جایگذاری کنیم. حالا به بخش‌های انیمیشنی می‌پردازیم. ما از دو تکنیک CCS transition و CSS animation استفاده می‌کنیم.

در زمان تمرکز روی input، تمام transitionها و animationها را فعال می‌کنیم. در CSS با استفاده از input:focus این قابلیت را فراخوانی می‌کنیم. حالا می‌خواهیم ببینیم هر بخش چگونه ایجاد و فعال می‌شود. ما لیبل مربوط به group را جایگذاری می‌کنیم. در اینجا کد مربوط به لیبل و زمانی که روی ورودی تمرکز می‌شود را داریم:

/* LABEL ======================================= */
label          {
  color:#999; 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
}

/* active state */
input:focus ~ label, input:valid ~ label     {
  top:-20px;
  font-size:14px;
  color:#5264AE;
}

حالا وقتی روی input تمرکز می‌کنیم، لیبل تغییر رنگ داده و به سمت بالا رفته و فونت‌ها کوچک‌تر می‌شوند. ما همچنین استایلی برای شبه کلاس :valid ایجاد می‌کنیم تا اگر input box پر شد از آن استفاده کنیم. این کار به لیبل این امکان را می‌دهد که در حالت فعال باقی بماند در غیر این صورت دوباره روی input را می‌گیرد. کار ما اینجا تمام شد حالا به سراغ underline می‌رویم.

متحرک سازی نوار Underline با استفاده از CCS Transition

ما از شبه کلاس‌های :before و :after برای استایل دادن به بخش‌های چپ و راست نوار استفاده می‌کنیم. آن‌ها از مرکز شروع شده و به سمت بیرون گسترده می‌شوند. این باعث ایجا افکت underline می‌شود:

/* BOTTOM BARS ================================= */
.bar  { position:relative; display:block; width:300px; }
.bar:before, .bar:after   {
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#5264AE; 
  transition:0.2s ease all; 
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}

متحرک سازی highlight با استفاده از CSS Animation

این بخشی از اپلیکیشن است که ما باید از انیمیشن در آن استفاده می‌کنیم. باید highlight را نمایش داده، به سمت چپ انتقال داده و آن را ناپدید کنیم. از آنجایی که برای این کار سه بخش وجود دارد، لازم است به جای transition از animation استفاده کنیم:

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@keyframes inputHighlighter {
  from  { background:#5264AE; }
  to    { width:0; background:transparent; }
}

 وقتی تمام بخش‌های CCS به خوبی کار کرد حالا یک input box مشابه input boxهای گوگل متریال دیزاین داریم.

استفاده از جاوا اسکریپت برای جایگذاری Label

این متد با متد زیر جایگزین شده است. فقط یک کار برای نهایی کردن پیاده سازی این input boxها باقی مانده است. وقتی سعی دارید وارد باکس ورودی شده و خارج آن کلیک می کنید، Label از روی ورودی کنار می‌رود. لیبل حالا روی متنی که نوشتیم را می‌پوشاند. ما از قبل با استفاده کلاس CSS input.used کلاسی ایجاد کردیم تا لیبل خود را در بالای input box قرار دهد. تمام کاری که باید بکنیم این است که آن را با استفاده از jQuery اعمال کنیم:

$(document).ready(function() {

  $('input').blur(function() {

    // check if the input has any value (if we've typed into it)
    if ($(this).val())
      $(this).addClass('used');
    else
      $(this).removeClass('used');
  });

});

 استفاده از JS ضروری نیست

می‌توان همین کار را بدون JS هم انجام داد. تمام کاری که باید انجام دهیم، افزودن ویژگی required به input box به صورت زیر است:

<input type="text" required>

وقتی آن را اضافه کردیم، می‌توانیم از شبه کلاس :valid برای بررسی اینکه آیا چیزی درون باکس ورودی تایپ شده است یا خیر، استفاده کنیم. حالا می‌توانیم کلاسی که قبلا ایجاد کرده‌ایم را برای انتقال لیبل به بالای input اعمال کنیم:

/* active state */
input:focus ~ label, input:valid ~ label {
  top:-20px;
  font-size:14px;
  color:#5264AE;
}

سایر مقالات ما در لیداوب:

در این مقاله آموزشی، نحوه طراحی Input Box با CSS3 را فرا گرفتید. در سایر مقالات آموزشی ما در لیداوب به سایر مواردی که می‌توان با CSS3 ایجاد کرد، پرداخته شده است. با آموزش‌های طراحی سایت ما همراه باشید.

5 از 3 رای

 مطالب مرتبط  

در قسمت زیر مطالبی وجود دارند که با مقاله فعلی مرتبط هستند



متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین مطالب

آموزش در لیداوب

از مقالات و ویدیو های آموزشی خودتان کسب درآمد کنید!

جدیدترین سرویس ما برای دوستان متخصص و خوش بیان در زمینه طراحی وب ارائه شد. این سرویس به شما این امکان را می دهد که به آسانی مقالات و یا ویدیو های آموزشی خود را در لیداوب منتشر کنید. فرصت مناسبی است که بدون داشتن وب سایت و یا وبلاگ و مهم تر از همه بدون هزینه، مطالب خود را در لیداوب منتشر کنید و مهم تر از همه با فروش آنها کسب درآمد کنید. همین حالا شروع کنید و این فرصت استثنایی را از دست ندهید.