ساخت Button Gradient برای CSS3

مهر ۱۹, ۱۳۹۱ توسط : رضا فرهادیان

یکی از چیزایی که توی دنیای وب باحاش در ارتباط هستیم،دُکمه ها یا به زبان لاتین Buttonها هستن،که تقریبا تمام عملکردهای تغییرات پیکربندی به وسیله اونا انجام میشه.چیزی که فکر خیلی از ماها رو به خودش مشغول کرده،اینه که چطور اونارو کاربرپسند و کاربرد پذیر طراحی کنیم،طرح های اولیه،خبر استفاده از قابلیت زیبای فتو شاپ که gradient نام داره رو میداد،این طرح به عمل اومد و نمونه های فوق العاده زیبایی همراه با اون منتشر شد،اما چیزی که اونا نداشتن،کاربردپذیری بود،یعنی کاربر انگیزه ای برای کلیک بروی اون ها،بش از یکـ بار رو نداشت،همین یک مسئله باعث افت فروش فروشگاه های اینترنتی بر اثر عدم کلیک زیاد شد.تنها راه چاره استفاده از نکات کاربردپذیری بود.طرح gradient هنوز هم جز بهترین طرح ها برای جذب کاربره اما کملا نسبت به قبل فرق کرده.در استفاده از این دُکمه ها تغییراتی زیادی رخ داده،مثل استفاده بهینه از gradient.در وبسایت موزیلا،شرکت سازنده مرورگر شاهکار FIREFOX،یکی از این استانداردها رو میتونید ببینید،وقتی وارد این صفحه میشید،تنها چیزی که همش توی چشمتون باقی میمونه،رنگ سبز دُکمه دانلود فایرفاکس هستش،این دکمه با توجه به شرایط کنتراست و تنظیم سایه ها و نور اطرافش طوری طراحی شده تا نسبت به دیگر جزءِها،برجسته تر و به زبان آمیانه توش چشم تر دیده بشن.

خوب،برای استفاده از gradient،باید کمی به CSS3 تسلط داشته باشید. خیر!دیگه گذشت اون زمون!(البته خیلی بهتر بود،بچه های دست به کُد بود 😐 )،وبسایتی به آدرس زیر الان این امکان رو برای شما فراهم میکنه که بتونید طبق نکات UI/GUI (رابط کاربری،رابط کاربری گرافیکی)در به ساخت گردنیت برای دُکمه بزنید .در کل یک مطلبی رو یاد آور شم،همیشه استفاده از CSS3 به جای عکس کارساز بوده 🙂

http://cssgradientbutton.com

بازدید : ۱۴۳۸

مهر ۲۰, ۱۳۹۱ @ ۱۰:۲۳ ق.ظ

با این حرکت حال کردم کلی از دردسرام کم شد 🙂

پاسخ دادن
مهر ۲۰, ۱۳۹۱ @ ۶:۰۴ ب.ظ

از این سایت خوشم اومده.ممنون که مطالب بسیار خوبی ارائه میدین.:)

پاسخ دادن

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


*