جهت ورود به تالار گفتمان سایت کلیک کنید


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

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

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

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

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

و اما آموزش :

کافیست متن خود را در درون تگ دلخواه خود بنویسید : ( به دلیل سه بعدی شدن نوشته , بهتر است به تگ های 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 بالا , رنگ سایه , نوشته و پس زمینه نوشته را به راحتی تغییر نمایید .

پخش اختصاصی

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

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

2 پاسخ به “آموزش افکت سایه سه بعدی در css3”

  1. AGH گفت:

    سلام آقا وحید. مطالب عالین. کاش هر موقع وقت میکردین آموزش طراحی قالب وردپرس رو میزاشتین. راستی یه سوالی داشتم که خیلی جاها گشتم و از خیلیا پرسیدم کسی جواب درست نداد. سوالم اینه که در فیسبوک وقتی لینکی رو پست میکنی در همون محیط فیسبوک یک پیش نمایش از اون لینک نشون میده، حالا برای لینک بعضی از سایت ها این پیشنمایش به همراه عکس و خیلی ظاهر خوبی داره. و بعضی دیگه نه،میخواستم بدونم این مربوط به کد نویسی میشه؟ برای مثال شما لینک صفحه یک موزیک از رادیوجوان رو در فیسبوک شیر کنید و پیشنمایشش رو اگه نگاه کنید خیلی جذابه و حتی قابلیت پخش اون رو هم داره مثل یوتیوب. امیدوارم متوجه شده باشین منظورم چیه

    • وحید مجیدی گفت:

      سلام داداش گلم

      ببینید ربطی به کد نویسی نداره

      خود فیسبوک از عکس ها درون اون صفحه به صورت پیشنمایشی همه رو میاره

      ضمنا بالای همون عکسی که میاره , یه دکمه غقب و جلو هم میاره که با زدن اون میتونید عکس مورد نظرتون رو انتخاب کنید

      طبیعیست که فقط میتونه عکس هایی که در تگ img گذاشته شده اند رو تشخیص بده

پاسخ دادن به وحید مجیدی لغو پاسخ

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