CodePlus
عضو جدید
سلام دوستان .. امروز با شمام برای طراحی نمونه Css دکمه های زیبای زیر !
همونطور که میدونید دیگه دوره استفاده از عکس بجای دکمه تموم شده و با امکانات جدید CSS تقریبا هر کاری میشه کرد !
پس تا آخر این آموزش همراه باشید
برای شروع کد HTML دکمه ها .. نوشتن این کد بسیار ساده بوده و تقریبا از عهده گروه سنی الف! هم برمیاد
خب .. چیزی که تا اینجا ساختیم عبارت است از چند کلمه دانلود زیر هم .. بدون لینک!
قدم بعدی ساخت استایل اصلی CSS هست .. به این شکل :
در اینجا ما فقط دکمه خاکستری رنگ رو استایل میدیم .. شما براحتی میتونید کد زیر رو برای رنگهای دیگه هم استفاده کنید ..
حالا دابل کردن خط دور دکمه ها ...(توجه کنید که این همون کد بالاست ولی کاملتر !)
و رنگ خاکستری .. (توجه کنید که این همون کد بالاست ولی کاملتر !)
و حالا جادوی CSS یا همون رادیوس و گرادینت..!
و رنگ خاکستری ...
خدایی خوشگل نیستن ؟
اوه ! فکر نمیکنین یه چیزی رو فراموش کردیم ؟ ...
چرا .. حالت فعال بودن یا Active ..... برای اینکار به سایه احتیاج داریم تا حالت فرو رفتگی طبیعی تری رو بسازیم
پس از کد زیر استفاده کنید :
همونطور که میدونید دیگه دوره استفاده از عکس بجای دکمه تموم شده و با امکانات جدید CSS تقریبا هر کاری میشه کرد !
پس تا آخر این آموزش همراه باشید
برای شروع کد HTML دکمه ها .. نوشتن این کد بسیار ساده بوده و تقریبا از عهده گروه سنی الف! هم برمیاد
HTML:
<ul class="buttons">
<li><a href="#" class="button gray">Download</a></li>
<li><a href="#" class="button pink">Download</a></li>
<li><a href="#" class="button blue">Download</a></li>
<li><a href="#" class="button green">Download</a></li>
<li><a href="#" class="button turquoise">Download</a></li>
<li><a href="#" class="button black">Download</a></li>
<li><a href="#" class="button darkgray">Download</a></li>
<li><a href="#" class="button yellow">Download</a></li>
<li><a href="#" class="button purple">Download</a></li>
<li><a href="#" class="button darkblue">Download</a></li>
</ul>خب .. چیزی که تا اینجا ساختیم عبارت است از چند کلمه دانلود زیر هم .. بدون لینک!
قدم بعدی ساخت استایل اصلی CSS هست .. به این شکل :
کد:
ul { list-style: none; }
a.button {
display: block;
float: left;
position: relative;
height: 25px;
width: 80px;
margin: 0 10px 18px 0;
text-decoration: none;
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 25px;
text-align: center;
}در اینجا ما فقط دکمه خاکستری رنگ رو استایل میدیم .. شما براحتی میتونید کد زیر رو برای رنگهای دیگه هم استفاده کنید ..
کد:
/* GRAY */
.gray,
.gray:hover {
color: #555;
border-bottom: 4px solid #b2b1b1;
background: #eee;
}
.gray:hover { background: #e2e2e2; }حالا دابل کردن خط دور دکمه ها ...(توجه کنید که این همون کد بالاست ولی کاملتر !)
کد:
a.button {
display: block;
float: left;
position: relative;
height: 25px;
width: 80px;
margin: 0 10px 18px 0;
text-decoration: none;
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 25px;
text-align: center;
}
a.button:before,
a.button:after {
content: '';
position: absolute;
left: -1px;
height: 25px;
width: 80px;
bottom: -1px;
}
a.button:before {
height: 23px;
bottom: -4px;
border-top: 0;
}و رنگ خاکستری .. (توجه کنید که این همون کد بالاست ولی کاملتر !)
کد:
/* GRAY */
.gray,
.gray:hover {
color: #555;
border-bottom: 4px solid #b2b1b1;
background: #eee;
}
.gray:before,
.gray:after {
border: 1px solid #cbcbcb;
border-bottom: 1px solid #a5a5a5;
}
.gray:hover { background: #e2e2e2; }و حالا جادوی CSS یا همون رادیوس و گرادینت..!
کد:
a.button {
display: block;
float: left;
position: relative;
height: 25px;
width: 80px;
margin: 0 10px 18px 0;
text-decoration: none;
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 25px;
text-align: center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
کد:
a.button:before,
a.button:after {
content: '';
position: absolute;
left: -1px;
height: 25px;
width: 80px;
bottom: -1px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
a.button:before {
height: 23px;
bottom: -4px;
border-top: 0;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-webkit-box-shadow: 0 1px 1px 0px #bfbfbf;
-moz-box-shadow: 0 1px 1px 0px #bfbfbf;
box-shadow: 0 1px 1px 0px #bfbfbf;
}و رنگ خاکستری ...
کد:
/* GRAY */
a.gray,
a.gray:hover,
a.gray:visited {
color: #555;
border-bottom: 4px solid #b2b1b1;
text-shadow: 0px 1px 0px #fafafa;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#e2e2e2));
background: -moz-linear-gradient(top, #eee, #e2e2e2);
box-shadow: inset 1px 1px 0 #f5f5f5;
}
.gray:before,
.gray:after {
border: 1px solid #cbcbcb;
border-bottom: 1px solid #a5a5a5;
}
.gray:hover {
background: #e2e2e2;
background: -webkit-gradient(linear, left top, left bottom, from(#e2e2e2), to(#eee));
background: -moz-linear-gradient(top, #e2e2e2, #eee);
}خدایی خوشگل نیستن ؟
اوه ! فکر نمیکنین یه چیزی رو فراموش کردیم ؟ ...
چرا .. حالت فعال بودن یا Active ..... برای اینکار به سایه احتیاج داریم تا حالت فرو رفتگی طبیعی تری رو بسازیم
پس از کد زیر استفاده کنید :
کد:
/* ACTIVE STATE */
a.button:active {
border: none;
bottom: -4px;
margin-bottom: 22px;
-webkit-box-shadow: 0 1px 1px #fff;
-moz-box-shadow: 0 1px 1px #fff;
box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.3);
}
a.button:active:before,
a.button:active:after {
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
آخرین ویرایش:
