تبلیغات
آموزش شبکه - BonBon، دکمه هایی از جنس CSS 3.0
 
آموزش شبکه
درباره وبلاگ
یکشنبه 28 فروردین 1390 :: نویسنده : شبکه و ارتباطات مدیر
نگاهی به دکمه های زیر بیندازید، این ها دکمه هایی هستند که با خصوصیات CSS 3 طراحی شده اند و طراح اون ها نام BonBon را برای این دکمه ها در نظر گرفته. جالبه نه؟

bonbon03
 
 
BonBon به صورت مجموعه ای از کلاس های css مختلف پیاده سازی شده و به راحتی قابل استفاده است و تنها با اختصاص دادن نام کلاس مربوطه می توان دکمه هایی با اشکال و رنگ های مختلف ایجاد کرد. البته هنوز کمی زود است که بخواهیم از این دکمه ها در پروژه های طراحی وب استفاده کنیم اما بررسی استایل های نوشته شده و درک قدرت و انعطاف پذیری CSS 3 مسلما برای بعضی از افراد علاقه مند جالب است.

برای استفاده از این دکمه ها ابتدا این فایل را دانلود کنید و فایل buttons.css موجود در فایل zip را به صفحه ی وب خود اختصاص بدید. برای ایجاد یک دکمه می توانید از تگ a یا تگ های button  یا input استفاده کنید. به طور مثال:

<a href="" class="button">Label</a>

با اختصاص دادن کلاس button به تگ a یک دکمه به صورت زیر ایجاد می شود، به همین سادگی:

bonbon01

همانطور که در ابتدا ذکر شد، bonbon شامل چندین کلاس مختلف برای ایجاد دکمه های متنوع است. این کلاس ها شامل کلاس هایی برای ست کردن رنگ، شکل کلی دکمه، اندازه و ... می باشند که در لیست زیر بیان شده اند:

    Color: orange, pink, blue, green, transparent
    Font: serif
    Material: glossy, glass
    Size: xs, xl
    Shape: round, oval, brackets, skew, back, knife, shield, drop, morph
    Disabled: disabled

فکر نمیکنم در مورد کلاس ها توضیح بیشتری نیاز باشد اما نکته ی قابل ذکر این است که شما می توانید از یک آیکن نیز در کنار دکمه ی خود استفاده کنید. این آیکن می تواند هر کاراکتری باشد، از حروف و اعداد گرفته تا Unicode symbol ها. به مثال زیر توجه کنید:

bonbon02

 

<a href="" class="button pink skew glossy" data-icon="❆">irpcn</a>

همانطور که مشاهده می کنید در کد بالا برای اختصاص دادن آیکن، از خصوصیتی با نام data-icon استفاده شده است.

 html5 دارای خصوصیتی است که اصطلاحا به آن custom data attribute گفته می شود، به این معنی که شما می توانید داده های خود را به یک خصوصیت سفارشی در یک تگ اختصاص دهید و در زمان نیاز در صفحه وب توسط css یا جاوا اسکریپت به آن دست پیدا کنید. طبق استاندارد این خصوصیت با پیشوند data- شروع می شود و هر نامی میتوان برای ادامه ی آن در نظر گرفت. در این مثال نیز از نام icon به عنوان پسوند استفاده شده است. اگر نگاهی به کد های css کلاس button بیندازید مشاهده خواهید کرد که کاراکتر اختصاص یافته به خصوصیت data-icon توسط کلاس کاذب before مورد استفاده قرار گرفته است:

.button:before 
 {
     content: attr(data-icon); 
 }

برای اطلاعات بیشتر به سایت طراح این دکمه ها مراجعه کنید.

و نکته ی آخر اینکه برای مشاهدۀ صحیح استایل ها حتما از نسخۀ آخر مرورگر ها استفاده کنید. ^_^

منبع :http://www.irpcn.com/web/bonbon.html





نوع مطلب : آموزش، اخبارIT، 
برچسب ها :
لینک های مرتبط :
جمعه 24 شهریور 1396 08:54 ق.ظ
This text is invaluable. When can I find out
more?
سه شنبه 17 مرداد 1396 11:09 ب.ظ
Very good article! We are linking to this great article on our website.

Keep up the good writing.
جمعه 11 فروردین 1396 02:26 ق.ظ
Wow, marvelous blog layout! How lengthy have you ever been blogging for?
you made running a blog glance easy. The whole glance of your site is great,
as neatly as the content!
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر


آمار وبلاگ
  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :