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

مدرسه وب میکرز: نحوه ایجاد متن سه بعدی با CSS3
  • ۱۳۹۲/۰۶/۰۶
  • omid.kamangar
  • 0

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

567-css3-3d-text-example

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

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

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

567-css3-3d-text-how

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

کد 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 انقدر وسیع هستند که شما با آن بتوانید استایل اختصاصی خودتان را بسازید پس بهتر است کمی خلاقیت به خرج دهید و چیزهای جدیدی کشف کنید…

دیدگاه خود را وارد کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *