معرفی css 3

pouya saadeghi · Jul 9, 2010

ساخت دکمه با css3

چطور بدون استفاده از تصاویر، دکمه های زیبا درست کنیم؟
:wink:

با استفاده از CSS3 میتونیم دکمه هایی درست کنیم که با حرکت موس تغییر کنن:

آموزش:
اول یه لینک در HTML میسازیم:

HTML:

<div><a href="http://www.pasargad-graphic.com">Pasargad-Graphic</a></div>

حالا میریم سراغ CSS و برای لینکمون که کلاس btn داره ، طول ، حاشیه ، فونت و رنگ تعیین میکنیم:

کد:

a.btn {width: 250px; padding: 10px 25px 10px 25px;
 font-family:Constantia;
 font-weight:bold;
 font-style:italic;
 font-size: 20px;
 text-decoration: none;
 color: #370000;

بعد متن لینک رو سایه دار میکنیم و یه رنگ بکگراند اضافه میکینم.
قبلا درمورد اضافه کردن سایه به متن گفته بودیم
رنگ بکگراند هم باعث میشه مرورگرهایی مثل اپرا ، اینترنت اکسپلورر و بقیه مرورگرهای قدیمی که گرادینت رو ساپورتن میکنن، دکمه رو به درستی (اما بدون گرادینت) نشون بدن.

کد:

text-shadow: 0px 1px 0px #d90404;
background-color:#bf0000;

حالا گرادینت رو برای فایرفاکس و کروم و سافاری ایجاد میکنیم:

کد:

background: -moz-linear-gradient(#ff0000, #bf0000 35%, #7e0000);
 background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ff0000),color-stop(.35, #bf0000),color-stop(1, #7e0000));

خوب! تا اینجا کد سی اس اس btn شده این:

کد:

a.btn {  width: 250px;
padding: 10px 25px 10px 25px;
font-family:Constantia;
font-weight:bold;
font-style:italic;
font-size: 20px;
text-decoration: none;
color: #370000;
text-shadow: 0px 1px 0px #d90404;
background-color:#bf0000;
background: -moz-linear-gradient(#ff0000, #bf0000 35%, #7e0000);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ff0000),color-stop(.35, #bf0000),color-stop(1, #7e0000));
border: 1px solid #7e0000;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;}

حالا برای وقتی که موس روی دکمه حرکت میکنه، باید رنگ ها عوض بشه. پس این کد رو هم تو CSS مینویسیم:

کد:

a.btn:hover {
  color: #2f4300;
  text-shadow: 0px 1px 0px #a3db21;
  background-color:#7eab13;
  background: -moz-linear-gradient(#c6ff62, #7eab13 35%, #425909);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c6ff62),color-stop(.35, #7eab13),color-stop(1, #425909));
  border: 1px solid #89b100;
}

تبریک میگم! تموم شد!

کد کامل صفحه:

کد:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Pure CSS3 Buttons</title>
 
<style>
.linear{width:300px; margin:0 auto; height:100px;}
a.btn {
width: 250px;
padding: 10px 25px 10px 25px;
font-family:Constantia;
font-weight:bold;
font-style:italic;
font-size: 20px;
text-decoration: none;
color: #370000;
text-shadow: 0px 1px 0px #d90404;
background-color:#bf0000;
background: -moz-linear-gradient(#ff0000, #bf0000 35%, #7e0000);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ff0000),color-stop(.35, #bf0000),color-stop(1, #7e0000));
border: 1px solid #7e0000;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
 
a.btn:hover {
color: #2f4300;
text-shadow: 0px 1px 0px #a3db21;
background-color:#7eab13;
background: -moz-linear-gradient(#c6ff62, #7eab13 35%, #425909);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c6ff62),color-stop(.35, #7eab13),color-stop(1, #425909));
border: 1px solid #89b100;
}
 
</style>
</head>
 
<body>
<br>
 
<div class="linear">
<a href="http://www.pasargad-graphic.com" class="btn">Pasargad-Graphic</a>
</div>
 
</body>
</html>

vahidalemi · Jul 21, 2010

سلام و خسته نباشید
آقا میشه کد لینک عکس رو هم بذاری ؟ مثلا کل عکس های لینک دار دورشون یک کادر بیاد ؛ یا اگه از روش رد بشی یک افکتی داشته باشه ؟
ممنون میشم بذارید با تشکر :rose:

pouya saadeghi · Jun 11, 2011

اسکرول‌بار برای وبکیت

منبع: پاسارگاد گرافیک / پویا صادقی

سلام

امروز ساخت اسکرول‌بار با استفاده از CSS رو با هم یاد میگیریم

این ویژگی هنوز به صورت رسمی برای CSS منتشر نشده و فعلا فقط تو مرورگرهای وبکیت (گوگل کروم و اپل سافاری) ساپورت میشه ، اما در نسخه های آینده فایرفاکس هم پشتیبانی خواهد شد.

روش‌های دیگه‌ای که قبلا استفاده میشد و تو بیشتر مرورگرها اجرا میشه، استفاده از جاوا اسکریپت یا استفاده از پلاگین jQuery بود.
این روش فقط با استفاده از کدهای CSS انجام میشه و کدهای -webkit- هم که برای webkit هستن ، پس طبیعتا برای IE و Opera و Firefox کار نمیکنن

ابتدا این کدها رو در CSS قرار میدیم:

کد:

 ::-webkit-scrollbar {background:#fff;}
::-webkit-scrollbar-thumb {background:#999; }

خط اول رنگ بکگراند اسکرول رو مشخص میکنه و خط دوم هم رنگ دستگیره اسکرول:

همونطور که می‌بینید اسکرول ها خیلی پهن هستند. با تنظیم width و height سایز اسکرول رو تنظیم میکنیم:

کد:

 ::-webkit-scrollbar {
background:#fff;
width:10px;height:10px;
}
::-webkit-scrollbar-thumb {
background:#999;
}

خاصیت width پهنای اسکرول عمودی رو مشخص میکنه و خاصیت height ، پهنای اسکرول افقی رو .

حالا گوشه اسکرول ها رو گرد میکنیم و یه سایه داخلی بهش اضافه میکنیم:

کد:

 ::-webkit-scrollbar {
background:#fff;
width:10px;height:10px;
}
::-webkit-scrollbar-thumb {
background:#999;
border-radius:5px;
box-shadow:inset 0 0 10px #333;
}

با استفاده از خاصیت corner میتونید برای گوشه سمت راست صفحه استایل تنظیم کنید ، من این قسمت رو سفید میکنم:

کد:

 ::-webkit-scrollbar-corner {
    background:#fff;
}

با استفاده از خاصیت track میتونیم استایل نوار بکگراند اسکرول (نواری که اسکرول روی اون حرکت میکنه) رو تغییر بدیم؛ در اینجا رنگ بکگراند ، سایه داخلی و border-radius روتنظیم کردم:

کد:

 ::-webkit-scrollbar-track{
background:#eee;
border-radius:5px;
box-shadow:inset 0 0 10px #aaa;}

این هم همه کدهایی که استفاده کردیم:

کد:

 ::-webkit-scrollbar {
background:#fff;
width:10px;height:10px;
}
::-webkit-scrollbar-thumb {
background:#999;
border-radius:5px;
box-shadow:inset 0 0 10px #333;
}
::-webkit-scrollbar-corner {
background:#fff;}
::-webkit-scrollbar-track{
background:#eee;
border-radius:5px;
box-shadow:inset 0 0 10px #aaa;}

hasanak852 · Aug 12, 2011

ست کردن سایت با IE همیشه مشکل همه طراحهاست
به نظر من ما(جامعه طراحان وب :neutral:

) خودمون باید دست به دست هم بدیم و این مشکل بزرگ رو از صفحه روزگار محو کنیم

مثلا فوتر هر سایتی که میسازیم بنویسیم:" لطفا برای مشاهده بهتر مطالب سایت از مرورگر پراشکال IE استفاده نکنید! " :green:

اینجوری هر کاربری تو چندتاسایت اینو ببینه باورش میشه و قبول میکنه که IE مشکل داره و میره سراغ یه مرورگر بهتر

یا به پسرعمو ، پسردایی ، دختر خاله :rose:

و ... که از IE استفاده میکنه بگیم از Firefox استفاده کنه.
بلکه یه روز همین جور که همه از table دست کشیدن از IE هم دست بردارن.

برای اینکه به مرورگر بفهمونیم داریم از css استفاده میکنیم بهتره این کد رو اول همه صفحات بذاریم:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >

scup · Aug 13, 2011

hasanak852 گفت:
ست کردن سایت با ie همیشه مشکل همه طراحهاست
به نظر من ما(جامعه طراحان وب) خودمون باید دست به دست هم بدیم و این مشکل بزرگ رو از صفحه روزگار محو کنیم

مثلا فوتر هر سایتی که میسازیم بنویسیم:" لطفا برای مشاهده بهتر مطالب سایت از مرورگر پراشکال ie استفاده نکنید! "
اینجوری هر کاربری تو چندتاسایت اینو ببینه باورش میشه و قبول میکنه که ie مشکل داره و میره سراغ یه مرورگر بهتر
یا به پسرعمو ، پسردایی ، دختر خاله و ... که از ie استفاده میکنه بگیم از firefox استفاده کنه.
بلکه یه روز همین جور که همه از table دست کشیدن از ie هم دست بردارن.