امروز داشتم یه سایت که با کمک CSS3 آیکون های قشنگی رو ساخته برسی میکردم، خیلی جالب طراحی شده. عجب مغزی داشته این رفیقمون.
آدرسش این سایت هستش. (البته همونطور که میدونید مرورگرتون باید از CSS3 پشتیبانی کنه تا ببینیدش)
خیلی خلاصه اونو تحلیل میکنم که ازش ایده بگیرید:
ایکون ها لینک هستن و تو یه <li> که کلاس بهش اختصاص داده قرار دارن. اینجوری:
| <li ><a href=”#”>Search</a> |
با خاصیت after و before میشه ۴ تا لایه به این لینک اختصاص داد.
برای مثال:
| li:after { … }li:before { … }
li.search a:after { … } li.search a:before { … } |
از اونجایی که موقعیت <li> را به صورت relative تعریف میکنیم, هر کدوم از لایه های بالا رو absolute میکنیم که به راحتی اونارو تو محدوده <li> جابجا کنیم:
| li {position:relative}li:before, li:after, li a:after, li a:before{ position:absolute; content:”"; top: 0; left: 0} |
مهمترین بخش کار از این به بعد شروع میشه که باید یکم وقت بذارید و بهینه ترین حالتی که میشه ایکون رو ساخت را کدنویسی کنید.
معمولا از کدهای زیر که فقط در CSS3 پشتیبانی میشه طراحی انجام میشه:
Border Radius:
به منظور ایجاد قاب گرد به دور محیط عنصر
- برای مثال دستور زیر یک قاب به ضخامت ۵ پیکسل به دور المنت ایجاد میکند:
| webkit-border-radius: 5px (قابل نمایش در سافاری و سایر مروگرها که از وب کیت پشتیبانی میکنند)
moz-border-radius: 5px (قابل نمایش در موزیلا فایرفاکس) border-radius: 5px; (قابل نمایش در اینترنت اکسپلورر) |
Transform:
به منظور چرخش عنصر
- مثال۱: دستور زیر یک المنت را ۴۵ درجه به دور محور خود میچرخاند:
| -webkit-transform:rotate(-45deg)-moz-transform:rotate(-45deg)
-o-transform:rotate(-45deg) (قابل نمایش در مرورگر اوپرا) transform:rotate(-45deg) |
- مثال۲: دستور زیر اضلاع یک المنت را به میزان ۱۰ درجه از سمت بالا سمت راست میکشاند :
(مشابه تبدیل مستطیل به متوازی الاضلاع)
| -webkit-transform:skew(10deg);-moz-transform:skew(10deg);
-o-transform:skew(10deg); transform:skew(10deg); |
آیکونی که برای مثال میخوایم طراحی نماییم یک ذره بین جستجو است:
| .search a:before {width:6px;
height:6px; border:3px solid #c55500; background:transparent; /* css3 */ -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px; } .search a:after { left:10px; width:3px; height:7px; margin-top:0; /* css3 */ -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); } |
ساخت دیگر آیکون ها نیاز به مهارت در استفاده از کد های ترکیبست، که بهتر است قبل از انجام کدنویسی تصویرتان را بر روی کاغذ شطرنجی طراحی نمایید، و آن را به شکل یه پازل حداکثر ۴ قسمتی به طور بهینه مجزا کنید، و آنها را تک به تک کد نویسی نمایید.
امیدوارم این مطلب زمینه ساز پیاده سازی ایده های جدید در وب باشد.