آموزش ساخت دکمه با CSS از روی فتوشاپ
در دنیای وب امروز با استفاده از کدهای CSS می توانیم به خلق آثار زیبای گرافیکی بپردازیم ، از همین رو دکمه ها یکی از پرکاربردی ترین اشیای گرافیکی وب محسوب می شوند و انواع آن را در دنیای وب مشاهده می کنیم . در این آموزش با ما همراه باشید تا نحوه ساخت یک دکمه گرافیکی که در فتوشاپ طراحی کرده ایم را با کدهای CSS آموزش ببنیم.
آموزش ساخت دکمه با CSS
امروز می خواهیم دکمه ای که توسط فتوشاپ از قبل ایجاد کرده ایم را توسط کدهای CSS ایجاد کنیم .
در اینجا ۳ نوع دکمه متفاوت داریم :
اولین دکمه وضعیت عادی دکمه می باشد.
حالت بعدی وقتی موس به روی دکمه می آید به این شکل باید نمایش داده شود . (رنگ خط های کناری دکمه تغییر پیدا می کنند)
و در وضعیت سوم حالت کلیک کردن با ماوس بر روی آن می باشد ، و رنگ پس زمینه آن عوض می شود .
ابتدا در فایل html خود باید از کلاس استفاده کنیم که من اینکار رو انجام دادم .
<html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <title> ساخت دکمه از روی فتوشاپ - لرن پارسی </title> </head> <body dir="rtl"> <a class="button" href="www.learnParsi.com"> متن دکمه </a> </body> </html>
حالا در فایل Style.Css المنت هایی با کلاس button را انتخاب می کنیم . ما سه وضعیت مختلف برای دکمه های خود داریم . پس از دو کلاس کاذب و حالت عادی کلاس button به صورت زیر استفاده می کنیم .
برای اینکه بخواهیم استایل دهی را شروع کنیم از داده های فتوشاپ استفاده می کنیم . رنگ پس زمینه دکمه های ما ffd1fa# می باشد که توسط کد background-color:#ffd1fa پس زمینه دکمه را مشخص می کنیم .
خاصیت none را برای خط زیر لینک ها توسط ویژگی text-decoration قرار می دهیم . سایز و نوع فونت را هم با کد فونت مشخص می کنیم .
کد ۵۶۵۶۵۶ هم برای رنگ متن دکمه قرار می دهیم .
خوب حالا برای اینکه فاصله بین متن با لبه های دکمه را چه بصورت افقی و چه عمودی تنظیم کنیم ، از کدهای padding چپ و راست در فایل css خود استفاده می کنیم .
عرض های ۰ و ۳۳ را برای کنارهای دکمه توسط ویژگی Padding انتخاب می کنیم و ارتفاع دکمه را هم با line-height تنظیم می کنیم .
در مرحله بعدی نیاز داریم رنگ های کناری کادر و borderهای آن را تنظیم کنیم .
در ابتدا رنگ ۴ جهت کادر را با استفاده از ویژگی border سفید می کنیم . و سپس توسط ویژگی border-right-color و border-bottom-color رنگ های کناری دکمه را تغییر می دهیم .
خوب حالت عادی دکمه را توسط کدهای زیر درست کردیم ، در مرحله بعدی نیاز داریم در حالتی که وقتی ماوس بر روی دکمه قرار می گیرد استایل های آن را تغییر بدهیم .
.button {
background-color: #ffd1fa;
text-decoration: none;
font: 17px 'b yekan';
color: #565656;
display: line-block;
padding: 0 33px;
line-height: 49px;
border: 1px solid #fff2fa;
border-right-color: #c393be;
border-bottom-color: #c393be;
}
نتیجه کدهای بالا ، دکمه ای به شکل زیر خواهد بود .
چیزی که نیاز به تغییر هست برای حالت hover تغییر رنگ کادرهای کناری سمت راست و وسط می باشد .
.button:hover {
border-color: #c393be;
border-right: #fff2fa;
border-bottom-color: #fff2fa;
}
در نتیجه کدهای بالا باعث تغییر حالت دکمه ما می شوند.
در مرحله آخر و حالت active تنها چیزی که تغییر کرده است رنگ بک گراند دکمه می باشد .
که با قطعه کد زیر آن را تغییر می دهیم .
.button:active {
background-color: #fae3fd;
}
در پایان ما یک دکمه کاربردی ساختیم ، که شما بسته به نیازهای خود می توانید با همین دانسته ها دکمه های زیباتری برای خود طراحی کنید .
کدهای کلی این درس به شکل زیر می باشند ، که توصیه می کنیم برای یادگیری بهتر ، خودتان مراحل را به ترتیب دنبال کنید.
body {
background-color: #aaaaaa;
padding : 40px;
}
.button {
background-color: #ffd1fa;
text-decoration: none;
font: 17px 'b yekan';
color: #565656;
display: line-block;
padding: 0 33px;
line-height: 49px;
border: 1px solid #fff2fa;
border-right-color: #c393be;
border-bottom-color: #c393be;
}
.button:hover {
border-color: #c393be;
border-right: #fff2fa;
border-bottom-color: #fff2fa;
}
.button:active {
background-color: #fae3fd;
}
- توصیه می شود : آموزش استایل دهی به فرم ها توسط CSS
کاربردی