آموزش ساخت یک آیکون با CSS3

[nefrat]

خب براتون یه فایل آموزشی درست کردم که میذارم تا همه ازش استفاده کنید ...
میخواییم با Css3 یه آیکن خیلی باحال بسازیم ... مراحل کار و قدم به قدم برید جلو...

1.یه فایل جدید باز کنید و اسمشو بذارید هرچی دلتون میخواد مثلا MY ICON

MY ICON.html


2. ساخت کلاس اولمون به این شکل »
<a class="docIcon" href="#">Document Icon</a>


+ میخوایم آیکن ما اندازه اش 40x56px باشه پس »

3.مشخصات کلاس اول رو کامل میکنیم که چه خصوصیاتی داشته باشه


.docIcon
{
background:#eee;
background: linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
border:1px solid #ccc;
display:block;
width:40px;
height:56px;
position:relative;
margin:42px auto;
}




خب حالا ما اینجا یه موقعیت فعلی دادیم و باید یه شکل رسمی تر بهش بدیم و در ضمن باید طوری باشه که توی مرورگرهای دیگه خراب نشه !!!و اینکه از همه مهمتر سرعت لود هست!!!
خب یه سایت خـــــــــــــوب معرفی میکنم که شما کد بالا رو بدید بهش و اون براتون Prefixr (http://barnamenevis.org/Prefixr.com)میکنه !!! و تحویلتون میده
کدی که داد بهتون و جایگزین قبلی کنید ...
یعنی »

4.الان باید اینو بنویسید »



.docIcon {
background: #eee;

background: -webkit-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
background: -moz-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
background: -o-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
background: -ms-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
background: linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);

border: 1px solid #ccc;
display: block;
width: 40px;
height: 56px;
position: relative;
margin: 42px auto;
}




5 حالا بهش سایه و درخشش خاص و اضافه میکنم ( بی نظیره )

کد های بالا رو اینجوری ویراش کنید »


.docIcon
{
...
-webkit-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
-moz-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;

text-indent:-9999em;
}









حالا باید اینو داشته باشید »

87017

6 حالا میخوام اون لبه بالا رو گردش کنم
اینجوری ویرایش کن »


.docIcon
{
...
-webkit-border-radius:3px 15px 3px 3px;
-moz-border-radius:3px 15px 3px 3px;
border-radius:3px 15px 3px 3px;
}






این جوری میشه !!! به به !!! :D

87019

[nefrat]

جای خوش گل قضیه مونده !!

7. بیایید لبه رو تا کنیم مثلا »


.docIcon:before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
width: 15px;
height: 15px;
background: #ccc;

background: -webkit-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
background: -moz-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
background: -o-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
background: -ms-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
background: linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);

-webkit-box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
-moz-box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;

border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
}




البته تموم نشده من کلیاتش و گفتم

8: بیا این مقادیر و جایکزین کن توو کد بالا


-webkit-border-radius:3px 15px 3px 3px;
-moz-border-radius:3px 15px 3px 3px;
border-radius:3px 15px 3px 3px;



چــــــــــــــــــــــــ ــــــــی شدا !!! نه؟

87020


عالی شد نه ؟:خجالت:

هنوز مونده 3 تا خط ناقابل درست میکنیم میندازیم توش میشه آیکن DOCUMENT

به همین سادگی به همین خوش مزگی!!! نه ؟


خیلی باید توی CSS به اندازه و چیدمان ها و فاصله ها دقت کنید از بالا و پایین
در این حد که واستون میذارم !!!

87021

9.
.docIcon:after
{
content:"";
display:block;
position:absolute;
left:0;
top:0;
width:60%;
margin:22px 20% 0;
height:15px;
}




به این صورت ادیت کن و اینا رو بهش اضافه کن !»


.docIcon:after
{
...
background:#ccc;
background: -webkit-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
background: -moz-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
background: -o-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
background: -ms-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
background:linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
}




اوه اوه ببین چی ساختی .... !!!

87022

دفعه دیگه اگه ببینم طرفدار داره کلی کار میذارم باشه ؟

کل پروژه » گذاشتم ضمیمه دانلود کنید !!!87023

[nefrat]

کد کل پروژه »



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="reset.css" />
<title>ساخت یک آیکون زیبا در CSS3</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body{
width:600px;
margin:0 auto;
}
body
{
font:13px/22px Arial;
color:#444;
}
h2{
font:bold 30px/50px Arial;
text-align:center;
margin:30px 0 0;
}
a{
color:#000;
}
.stage
{
height:150px;
width:200px;
border:1px solid #f0f0f0;
background:#fafafa;
margin:60px auto;
}
footer{
position:absolute;
bottom:0;
left:00;
text-align:center;
border-top:1px solid #e0e0e0;
width:100%;
padding:10px 0;
}

/* Document Icon CSS */
.docIcon
{
background:#eee;
background:-moz-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
background:-webkit-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
border:1px solid #ccc;
-moz-border-radius:3px 15px 3px 3px;
-webkit-border-radius:3px 15px 3px 3px;
border-radius:3px 15px 3px 3px;
-moz-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
-webkit-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
display:block;
width:40px;
height:56px;
position:relative;
text-indent:-9999em;
margin:42px auto;
}
.docIcon:before
{
content:"";
display:block;
position:absolute;
top:0;
right:0;
width:15px;
height:15px;
background:#ccc;
background:-moz-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
background:-webkit-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
box-shadow:rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
-moz-border-radius:0 14px 0 0;
-webkit-border-radius:0 14px 0 0;
border-radius:0 14px 0 0;
}

.docIcon:after
{
content:"";
display:block;
position:absolute;
left:0;
top:0;
width:60%;
margin:22px 20% 0;
background:#ccc;
background:-moz-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
background:-webkit-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
height:15px;
}

</style>
</head>

<body>
<h2 align="right" dir="rtl" style="font-family: 'b koodak'">ساخت یک آیکون زیبا با CSS3</h2>
<div class="stage">
<a href="#" class="docIcon">ساخت صفحه جدید</a>
</div>
<footer>
<a align="right" dir="rtl" style="font-family: 'b koodak'" href="http://Kazemnezhad.ir">نگار کاظم نژاد</a> | <a align="right" dir="rtl" style="font-family: 'b koodak'" href="http://GamePc.ir">وب سایت من </a>
</footer>
</body>
</html>

[nefrat]

امیدوارم آموزش مورد استفاده قرار بگیره !!! درخواست های خودتونو بدید تا براتون طراحی کنم ... و اینجا برای آموزش قرار بدم!

[aminghaderi]

ضمن تشکر از این که قابلیت css رو برجسته کردید ،
برادر بهتر نیست به جای این همه کد از یه فایل png ساده استفاده بشه که هم حجمش کمتره و هم دردسرش؟؟

[cyrusthegreat]

ضمن تشکر از این که قابلیت css رو برجسته کردید ،
برادر بهتر نیست به جای این همه کد از یه فایل png ساده استفاده بشه که هم حجمش کمتره و هم دردسرش؟؟

دوست عزیز

حرف شما کاملا متین هستش. بین CSS و عکس برای انجام کارهای اینچنینی در مقام مقایسه، عکس برتر هستش. چون حتی همون گرادینت ی که تولید می شه، توسط مرورگر به یک عکس تبدیل می شه و این یعنی پردازش، اما نشون دادن عکس پردازش زیادی رو نیازمند نیست. اما اینگونه مقالات و آموزش ها صرفا برای یادگیری CSS و قابلیت های بیشماری که داره بسیار مفید هستش.

[nefrat]

ضمن تشکر از این که قابلیت css رو برجسته کردید ،
برادر بهتر نیست به جای این همه کد از یه فایل png ساده استفاده بشه که هم حجمش کمتره و هم دردسرش؟؟


اول . برادر نیستم ... البته خواهر هم نیستما!!! خانم!!!
این از این
بعدشم با نظر cyrusthegreat (http://barnamenevis.org/member.php?114911-cyrusthegreat) کاملا موافقم ... بهتره آدم وقتی میخواد یه چیزیو یاد بگیره زیر و بمشو یاد بگیره ...
بله با عکس هم میشه کار کرد ولی اینکه بتونی با کد نویسی یه شکل رو ترسیم کنی و اونو به حالتی دربیار که انگار عکسه !!! هنره ...!!!
HIH

:لبخند:

منم به همه بچه ها سعی میکنم ماهیگیری یاد بدم !!!