close
تبلیغات در اینترنت
ساخت دکمه rollover با استفاده از فتوشاپ و css
loading...

.: دریــــا ســـافــــت :.

شاید سوالی که همین اول برای شما پیش اومده این هست که دکمه rollover چیست؟خوب بگذارید اینطور توضیح بدم ، حتما تا بحال دکمه هایی رو در سایت های مختلف…

ساخت دکمه rollover با استفاده از فتوشاپ و css

شاید سوالی که همین اول برای شما پیش اومده این هست که دکمه rollover چیست؟

خوب بگذارید اینطور توضیح بدم ، حتما تا بحال دکمه هایی رو در سایت های مختلف دیده اید که هنگامی که هدایتگر ماوس رو روی اونها قرار میدهید ظاهر دکمه یا رنگ اون تغییر میکنه و باعث زیبایی و جذابیت بیشتر میشه و دلتون خواسته که برای سایت یا وبلاگتون از این مدل دکمه ها استفاده کنید.این دقیقا همون چیزی هست که امروز برای شما تهیه کردیم پس با ما همراه باشید.



فتوشاپ عزیز! رو صدا بزنید و یک بوم شفاف در اندازه ۱۲۰پیکسل پهنا و ۱۰۰ پیکسل ارتفاع ایجاد کنید.

۱)با استفاده از راهنماهای فتوشاپ این بوم رو به دوبخش مساوی و افقی تقسیم کنید.(بر روی خطکش بالایی کلیک کنید و کلیک رو جایی که میخواهید راهنما در اونجا بمونه رها کنید) .


ساخت دکمه rollover با فتوشاپ و css


۲)با استفاده از ابزار Rounded Rectangle tool با میزان Radius 5px  یک مستطیل در نیمه بالایی ایجاد کنید.

ساخت دکمه rollover با فتوشاپ و css


۳)از پنجره لایه ها،بر روی لایه قبلی کلیک راست کنید و گزینه ی Duplicate Layer رو انتخاب کنید و با استفاده از ماوس اون رو در بخش پایینی قرار بدید.

ساخت دکمه rollover با فتوشاپ و css


۴)رنگ لایه پایینی رو به رنگ دلخواه تغییر بدید.

ساخت دکمه rollover با فتوشاپ و css


خوب حالا ما یک تصویر داریم که دارای ۲ دکمه به رنگ های مختلف هست و اندازه ی اونها دقیقا با هم برابر هست.این تصویر رو با نام image.png  در یک پوشه (فولدر) با نام rollover ذخیره میکنیم.
خوب کار ما با فتوشاپ تموم شد.حالا به بخش css  و html میرسیم.

<html>
<head>
<title>rollover</title>
<style type=”text/css”>
a:link.btn,a:visited.btn{
background:url(img.png) right top;
width:120px;
height:50px;
display:block;
text-decoration:none;
text-align:center;
line-height:2.7em;
color:#FFFFFF;
font-family:tahoma,sans-serif;
}
a:hover.btn{
background:url(img.png) right bottom;
width:120px;
height:50px;
display:block;
text-decoration:none;
text-align:center;
color:#000000;
}
</style>
</head>
<body>
<a href=”#” class=”btn” >نمونه</a>
</body>
</html>


توضیح مختصر کد بالا:
کد بالا رو در یک ویرایشگر متن (مثل notepad) کپی کنید و این فایل رو هم در پوشه قبلی (rollover) با نام index.html ذخیره کنید.پس حالا در پوشه rollover دو فایل داریم با نام های img.png و index.html !
در کد فوق ما ابتدا یک کلاس css با نام .btn ایجاد کردیم و این کلاس رو به تگ <a> که همون تگ لینک هست نسبت دادیم.(یعنی تگ های <a> که دارای کلاس btn هستند).
A:link.btn یعنی لینک هایی که کلاس btn به اونها نسبت داده شده.
A:visited.btn یعنی لینک هایی که یکبار توسط کاربر مشاهده شده اند و دارای کلاس btn هستند.
A:hover.btn یعنی وقتی نشانگر ماوس بر روی یک لینک با کلاس btn قرار بگیره!
با مشخصه background تصویری که ایجاد کردیم رو در زمینه لینک خودمون قرار میدیم و محل قرارگیری این تصویر را در سمت راست و بالا تنظیم می کنیم (right top).و اگر دقت کنید در a:hover این مشخصه رو برابر با right bottom قرار دادیم تا هنگامی که ماوس بر روی لینک قرار میگیره قسمت پایینی تصویر ما که رنگ قرمز داره ظاهر بشه. پهنا و ارتفاع تصویر رو تنظیم میکنیم و با استفاده از مشخصه display نحوه ی نمایش لینک رو بصورت یک بلوک تغییر میدیم.همونطور که در بالا اشاره کردم برای اینکه جزئیات رو بهتر درک کنید میتونید به بخش آموزش css سایت مراجعه کنید .
در بخش <body> مشاهده می کنید که لینکی با متن “نمونه” کلاس btn رو دریافت کرده ( class=btn ). ما انتظار داریم که وقتی فایل index.html رو در مرورگر فایرفاکس یا هر مرورگر دیگه ای باز کنیم این لینک به صورت یک بلوک با تصویر زمینه ای که ایجاد کردیم نمایش داده بشه.
میتونید در بخش پیوست ها در صفحه بعد ، فایل لایه باز فتوشاپ ، کد بالا و همچنین نمونه ی عملی این آموزش رو مشاهده کنید.

مشاهده نمونه دکمه rollover


منبع: http://www.asreelm.com

Admin بازديد : 779 شنبه 16 دي 1391 زمان : 13:26 نظرات ()
مطالب مرتبط
ارسال نظر براي اين مطلب

نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی
تبليغات
موضوعات

لينک دوستان

نظرسنجي
آیا با آموزش دروس دبیرستان در این وبلاگ موافقید؟