CSS 3: لوگوهای معروف با CSS3!

مقدمه

CSS3 که از اعضای خانواده مدرن HTML5 محسوب می شود، طرفداران زیادی به تازگی پیدا کرده است. CSS3 تمامی خواص و قابلیتها را برای نقاشی کردن دارد. البته در HTML5 تگی به نام Canvas وجود دارد که در واقع عامل اصلی محبوبیت HTML5 است. ولی در این نوشته ما با Canvas کاری نداریم و به سراغ CSS3 می رویم.

سایت ecsspert.com

گروهی از CSS3کاران حرفه ای جمع شده اند و لوگوهای معروف جهان مانند توییتر، آدیداس، ویندوز، اپل، استیو جابز متشکرم!، نایک و آدوبی* و … را با CSS3 باسازی کرده اند.

شعار اصلی این سایت No Images, No JS. Just CSS! (بدون عکس، بدون اسکریپت. فقط با CSS) است که البته صد در صد به آن عمل شده است. هم چنین این سایت ادعا می کند که منوی بالای سایت_که با کلیک نمایان و با کلیک مجدد پنهان می شود_ نیز توسط CSS ایجاد شده و از هیچ اسکریپتی استفاده نشده است و استفاده نخواهد شد!

نحوه استفاده از این لوگوها

ابتدا باید لوگوی موردنظر خود را انتخاب کنید. سپس در پایین لوگو کد HTML و CSS را می بینید که با اضافه کردن آن ها می توانید این طرح ها را در سایتتان قرار دهید.

در پایین تر، مرورگرهای سازگار و همچنین بهترین منابع یادگیری CSS3 نوشته شده است. پروژه های مشابه هم معرفی شده است.

و این لوگوها چگونه ایجاد می شود؟ **

این لوگوها با خصوصیات اصلی و البته جدید ایجاد می شوند. این لوگوها از دو لایه Canvas و Elements تشکیل می شود. Canvas پس زمینه و البته بوم لوگو است که معمولا در آن کدهای گرادینت قرار می گیرد. لایه Elements که بستگی به سادگی یا پیچیدگی لوگو دارد. برای مثال لایه Elements در لوگوی توییتر بیش از 11 Object دارد. در حالی که در لوگوی ادوبی در لایه Elements فقط 3 Object وجود دارد!

سپس با متدهای rotate، box-shadow, border-radius به Objectها سبک داده می شود. هر Object لایه (DIV) جدای خود را دارد.

معایب این پروژه ***

متاسفانه این پروژه با Internet Explorer 10 هم حتی سازگار نیست. البته حجم پرونده های CSS شما هم بالا می رود. علاوه بر این اندازه ها غیرقابل تغییر است.

 پانویس ها:

* لوگوی ادوبی توسط بنده (احسان فرقانی) طراحی و بر روی سایت قرار گرفته است.

** این فقط نظر شخصی بنده و برداشت های شخصی من هست.

*** عیب های این پروژه به Opera هم می رسد. ولی از آن جایی که مطمئن نبودم، آن را ذکر نکردم.