طراحی Toggle Button کارتونی با HTML و CSS

  1. Home
  2. کد های آماده
  3. جزئیات نویسنده
طراحی Toggle Button کارتونی با HTML و CSS

طراحی Toggle Button کارتونی

برای طراحی Toggle Button عروسکی یا همان دکمه تغییر وضعیت عروسکی در این کد به هیچ وجه از java scrip استفاده نشده است و می توان مراحل آن را به شرح زیر دسته بندی نمود.

  1. ابتدا فایل HTML را ایجاد می نماییم
  2. چند DIV تشکیل می دهیم که مربوط به گوش، پا و باقی اعضای بدن این کارکتر می شود
  3. فایل CSS را ساخته و به HTML لینک می دهیم
  4. کد های CSS دارای دو بخش می باشد.
    4.1. هنگامی که کلید در وضعیت خاموش به سر می برد
    در این حالت علاوه بر بسته بودن چشم های کارکتر بالید رنگ صفحه تاریک باشد
    4.2. هنگامی که کلید در وضعیت روشن می باشد
    در این حالت چشم های کارکتر باز بوده و رنگ صفحه نمایش نیز روشن می باشد
  5. طراحی حالت دست پای کارکتر هنگام بیدار شدن و خوابیدن
  6. تنظیم حالت چرخش هنگام خاموش شدن دکمه
  7. تنظیم حالت لبخند و بازگشت به حالت روشن

 

 

 

رنگ ها در طراحی دکمه تغییر وضعیت کارتونی

رنگ های به کار رفته در طراحی Toggle Button عروسکی به شکل هوشمندانه ای به کار رفته است که نظر مخاطب و کاربر را به خود جلب کند، به این شکل که حتی زمینه مسیر حرکت کارکتر نیز مقداری با تغییر رنگ همراه می باشد، خود کارکتر نیز هنگامی که خاموش است تیره تر به نظر می آید و در زمان بیداری کمی به سمت رنگ سفید سوق می یابد، در کل استفاده از رنگ بندی های هوشمندانه در طراحی Toggle Button هایی به این شکل نقش مهمی را در جلب توجه کاربر ایفا می کند. این نوع کلید برای وبسایت های کودک و نوجوان و امسال این وبسیات ها که حالت کارتونی دارند کاربرد بسیاری دارد.

چرا از دکمه های ساده استفاده نکنیم؟

برای برخی این سوال پیش می آید که چرا از دکمه تغییر وضعیت ساده استفاده نکنیم که دارای CSS سبک تری نیز می باشند؟ در جواب به این سوال می توان گفت که انتخاب با شماست و دکمه های تغییر وضعیت انواع مختلفی دارند که ما انواع دیگر آن را نیز برای شما خواهیم ساخت و بر روی وب سایت قرار می دهیم اما نکته دقیقا همینجاست که این نوع کلید ها بیشتر جلب توجه می کنند تا دکمه های ساده و بی روح و باز هم شاید ترجیح شما بر این امر باشد که از CSS کمتری استفاده نمایید تا اینکه به زیبایی وبسایت خود اهمیت دهید.

لینک های دانلود:

لینک دانلود کد های Toggle Button

تگ ها : CSS HTML

taraneh ezatvar

نویسنده از: 

برنامه نویس frontend

دیدگاه خود را بنویسید