آموزش افکت سایه سه بعدی در css3

در این پست از سایت اسکریپت دات کام قصد دارم آموزش ترفند افکت سایه سه بعدی در css3 رو منتشر کنم . حتما شما طراحان وب عزیز با پراپرتی text-shadow در css آشنایی دارید و از آن برای سایه دادن به متن هاتون استفاده میکنید .

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

برای مشاهده آموزش با ما همراه باشید …

و اما آموزش :

کافیست متن خود را در درون تگ دلخواه خود بنویسید : ( به دلیل سه بعدی شدن نوشته , بهتر است به تگ های h1 تا h6 این حالت را بدهیم . چون دارای فنت به نسبت بزرگتر هستند )

به عنوان مثال :

<h1 class="vms3d-Shadow">Vahid Majidi Sadr</h1>

حال مقادیر زیر را در css به آن بدهیم :

h1.vms3d-Shadow { background: #ccc; padding: 20px; color: #fff;text-shadow:0 .01em 0px #dededa,
0 .015em 0 #dededa,
0 .02em 0 #dededa,
0 .028em 0 #dededa,
0 .035em 0 #dededa,
0 .04em 0 #dededa,
0 .045em 0 #dbdbd6,
0 .055em 0 #dbdbd6,
0 .06em 0 #dbdbd6,
0 .065em 0 #d9d9d4,
0 .07em 0 #d9d9d4,
0 .08em 0 #d8d8d3,
0 .085em 0 #d8d8d3,
0 .09em 0 #d8d8d3,
0 .095em 0 #d6d6d1,
0 .105em 0 #d6d6d1,
0 .06em .06rem rgba(104, 104, 92, 0.15),
.07em .105em .04em rgba(0, 0, 0, .015),
-.02em .09em .05em rgba(104, 104, 92, 0.25),
-.03em .07em .065em rgba(104, 104, 92, 0.1),
-.075em .08em .09em rgba(104, 104, 92, 0.06),
-.09em .06em .195em rgba(104, 104, 92, 0.095);
}

نکته 1 : کاملا بدیهی می باشد که ما در بالا فرض بر این گرفته ایم که به h1 ها یک کلاس مشخص داده ایم و فقط همان کلاس دارای سایه میشود . چنانچه بخواهید تمامی h1 ها این عمل بر روی آن ها اتفاق بیوفتد , میتوانید به جای h1.vms3d-Shadow از h1 استفاده نمایید و یا مثلا اگر بخواهید تمامی تگ های عنوان شما این اتفاق در آنها بیوفتد میتوانید به جای آن از h1,h2,h3,h4,h5,h6 استفاده نمایید .

نکته 2 : در صورت دلخواه میتوانید با تغییر رنگ ها در کد css بالا , رنگ سایه , نوشته و پس زمینه نوشته را به راحتی تغییر نمایید .

پخش اختصاصی

آموزش : وحید مجیدی