حتما در بسیاری از وبلاگها و وبسایتها، آیکون های کوچک نارنجی و مستطیلی شکلی که نشان دهنده آدرس خروجی فید RSS یا XML آنها هستند را دیده اید. معمولاً در این مواقع از آیکونهای(عکسها) کوچک با فرمت GIF یا PNG استفاده می شود. بدون استفاده از عکس هم می توان این نشانگرهای کوچک را ساخت:
با استفاده از CSS!
در مورد عکسها این امکان وجود دارد که گاهی اوقات لود نشوند، اما در مورد CSS معمولاً اینطور نیست. ضمن اینکه حجم عکسها معمولاً چند برابر کدی است که اینجا می نویسیم، ضمن اینکه ساختن این قبیل آیکونها با CSS هم تفریح جالبی است!
در این پست می خواهیم با استفاده از CSS و با نوشتن مقداری کد، این آیکونهای کوچک را شبیه سازی می کنیم!
- ابتدا لازم است که بدانیم که رنگ و فونت مناسب برای قسمتهای مختلف این آیکون CSS (!)، چیست. خوب! اگر یکی از این آیکونها را در برنامه ای مثل فتوشاپ کالبد شکافی کنیم، می توانیم به تمام خصوصیات موردنظرمان پی ببریم.
- کلاسی که برای آن انتخاب میکنم feed است، بنابراین در جایی که می خواهید این آیکون را استفاده کنید، باید از این کلاس استفاده کنید (توجه کنید که از div استفاده نکردم).
برای استفاده از آن، باید از کدی به صورت زیر استفاده کنید:<a href="http://yourblog.serverblog.com/rss/" class="feed">rss</a>
مشخصاتی را که در مرحله قبلی به دست آوردیم، با CSS می نویسیم:.feed {
color:#FFF;
background-color:#F60;
}
نتیجه:
rss - فونتی که برایش استفاده کردم، Verdana است که جزء فونتهای موجود در تمام سیستم هاست و معمولاً در این آیکونها هم استفاده می شود. نوشته مربوطه، باید Bold (تو پر) باشد. اندازه متن را 10px در نظر می گیرم. برای اینکه حروف، به صورت حروف بزرگ دربیاید خاصیت text-transform را uppercase قرار می دهیم. بنابراین تا اینجا، کد CSS ما به صورت زیر در می آید:
.feed {
color:#FFF;
background-color:#F60;
font-family: verdana,sans-serif;
font-style:bold;
font-size: 10px;
text-transform: uppercase;
}
نتیجه:
rss - خوب! بهتر نیست که نوشته ما از داخل (فاصله نوشته با حاشیه) و خارج (فاصله آیکون ما با آیکونها یا نوشته های احتمالی اطرافش) کمی فاصله داشته باشد؟!... برای اینکار از خصوصیات margin و padding استفاده می کنیم:
.feed {
color:#FFF;
background-color:#F60;
font-family: verdana,sans-serif;
font-style:bold;
font-size: 10px;
text-transform: uppercase;
margin:3px;
padding:0 3px;
}
نتیجه:
rss
اینطوری بهتر نشد؟! - برای نشان دادن حالت برجستگی آیکون (سایه روشن اطراف آیکون)، از رنگهای مختلفی -که در مرحله اول به دست آورده ایم- برای Border استفاده می کنیم.
.feed {
color:#FFF;
background-color:#F60;
font-family: verdana,sans-serif;
font-style:bold;
font-size: 10px;
text-transform: uppercase;
margin:3px;
padding:0 3px;
border:1px solid;
border-color:#FC9 #630 #330 #F96;
}
نتیجه:
rss
خاصیت border-color، رنگ حاشیه را به ترتیب در قسمت بالا، راست، پایین و چپ (به صورت ساعتگرد) مشخص می کند. اندازه حاشیه را 1px و به صورت خط (solid) در نظر گرفتیم (توجه: همانطور که می دانید خطور حاشیه می تواند به صورتهای مختلفی مثل نقطه چین/dotted، خط چین/dashed و ... باشد). - فکر می کنم دیگه کار آیکون ما تمام شده است... جز اینکه: از آنجا که آیکون ما در واقع یک لینک است، بنابراین از دستورات مربط به لینکها (مثل زیرخط دار بودن و ...) پیروی می کند. برای اینکه از این کار جلوگیری کنیم تنها کافی است که خصوصیت text-decoration آن را none قرار دهیم. بنابراین کد نهایی ما به صورت زیر در خواهد آمد:
.feed {
color:#FFF;
background-color:#F60;
font-family: verdana,sans-serif;
font-style:bold;
font-size: 10px;
text-transform: uppercase;
margin:3px;
padding:0 3px;
border:1px solid;
border-color:#FC9 #630 #330 #F96;
text-decoration:none;
}
نتیجه:
RSS - چیز دیگری هم مانده است؟... با تمام دستورات بالا، آیکون مورد نظر ما به خوبی در تمام مرورگرها نشان داده می شوند. اما هدف ما، فقط این نیست!
یک طراحی خوب، طرحی است که علاوه بر ظاهر، کدنویسی بهینه ای هم داشته باشد. یعنی چی؟... بگذارید یک مثال بزنم. کدی که ما در چند خط برای نمایش نام و حالت فونت نوشتیم را می توان در یک خط هم نوشت به این صورت:font:bold 10px verdana,sans-serif bold;
چنین کاری، هنگامی اثر واقعی خود را نشان می دهد که تمامی Style خود را بهینه کنید. وب سایتهایی مثل Clean CSS این کار را برایتان انجام می دهند.
کد بهینه شده بالا به صورت زیر است:.feed {
color:#FFF;
background-color:#F60;
font:bold 10px verdana,sans-serif bold;
text-transform:uppercase;
border:1px solid;
text-decoration:none;
border-color:#FC9 #630 #330 #F96;
margin:3px;
padding:0 3px;
}
و نتیجه نهایی:
RSS
حالا احتمالاً تشخیص اینکه کدام آیکون، عکس و کدام آیکون، آیکونی هست که باهم (با کمک CSS!) ساختیم کمی سخت است؛ اینطور نیست؟!
rss 2 XML
RSS
