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

در این مقاله آموزش ساخت یک متن سه بعدی ساده با استفاده از CSS3 را شرح خواهیم داد که در آن از خصیصه text-shadow بهره می بریم. همچنین علاوه بر متن سه بعدی، می توانید افکت درخشندگی و بلوری را  با استفاده از این خصیصه به متن بدهید اما امروز تنها سه بعدی کردن متن را بررسی می کنیم. پس برای اینکار با ما همراه باشید؛

در تصویر بالا از هیچ طراحی، گرافیک، پلاگین و یا کاناواسی استفاده نشده است و برای خلق این متن سه بعدی تنها کافی است بر CSS3 آگاه شوید؛ بهتر است در ابتدای کار شما را آگاه کنم که این افکت در کروم، فایرفاکس، اپرا و سفری پشتیبانی شده و در IE نیز طبق معمول پشتیبانی نمی شود و باید منتظر نسخه های جدید(امید برای نسخه 10) بود.

text-shadows چهار ورودی را می پذیرد (مثال:text-shadow: -3px 4px 5px #686868;) که مقدار اول مکان سایه بر اساس محور افقی، مقدار دوم مکان سایه بر اساس محور عمودی، مقدار سوم میزان بلوری شدن متن و مقدار چهارم رنگ سایه را مشخص می کند.

هم اکنون پروژه را آغاز می کنیم؛ برای خلق تصویر زیر باید از خصیصه چند پراپرتی استفاده کنیم، یعنی چندین text-shadows به متن اختصاص دهیم و همچنین میزان بلور را نیز 0 قرار می دهیم و فاصله ها را یک واحد نسبت به قبلی اضافه می کنیم تا به تصویر مورد نظر برسیم؛

و در نهایت کمی بلوری کردن متن نیز می تواند آن را واقعی تر و خلاقانه تر کند…

کد CSS نهایی:

p.threeD
{
text-shadow:
-1px 1px 0 #ddd,
-2px 2px 0 #c8c8c8,
-3px 3px 0 #ccc,
-4px 4px 0 #b8b8b8,
-4px 4px 0 #bbb,
0px 1px 1px rgba(0,0,0,.4),
0px 2px 2px rgba(0,0,0,.3),
-1px 3px 3px rgba(0,0,0,.2),
-1px 5px 5px rgba(0,0,0,.1),
-2px 8px 8px rgba(0,0,0,.1),
-2px 13px 13px rgba(0,0,0,.1)
;
}

البته به یاد داشته باشید کدهای CSS انقدر وسیع هستند که شما با آن بتوانید استایل اختصاصی خودتان را بسازید پس بهتر است کمی خلاقیت به خرج دهید و چیزهای جدیدی کشف کنید…