آموزش CSSآموزش طراحی سایت

جلسه ۳۵ – دستورات پیشرفته shadow

پیشرفته تر با سایه ها در CSS

چگونه از Shadow‌ به صورت پیشرفته استفاده کنیم؟ چگونه از چند سایه در CSS استفاده کنیم؟ تفاوت سایه تکی با سایه چندگانه چیست؟ تو این مقاله،‌ یاد می‌گیریم که چه کار های دیگه ای می‌تونیم با کمک سایه ها در CSS انجام بدیم.

اگر تا الان در رابطه با Shadow ها یا سایه ها نخوندید، پیشنهاد می‌کنم مقاله دستورات مبتدی Shadow را مطالعه کنید.

مبحث رو با خاصیتی به نام multiple shadows یا سایه‌های چندگانه شروع می‌کنیم.

multiple shadows در CSS

این خاصیت، به ما این قابلیت رو می‌ده که بتونیم از چندین نوع سایه متفاوت استفاده کنیم.

نحوه نوشتن کد در اینجا، شباهت زیادی به زمان استفاده از سایه‌های تکی یا single shadows داره. فقط کافیه به یک سری از نکات توجه کنیم.

  • برای استفاده از سایه های چندگانه، کافیه مقادیر مربوط به سایه‌ها، شفافیت و رنگشون رو توسط کاما از هم جدا کنیم.
  • سایه‌ای که در آخر تعریف می‌شه، همیشه زیر بقیه سایه ها قرار می‌گیره.

حالا بیاین تا مثال های زیر رو بررسی کنیم:

کد HTML:

<p class="shadows"> !منو رنگ کن </p>

کد CSS:

.shadows{
   text-shadow: 3px 3px 3px blue, 6px 6px 3px red, -3px -3px 3px yellow, -6px -6px 3px green;
   font-size: 3em;
   font-family: iransansweb;
   color:orange;
}

نتیجه:سایه های چندگانه در text-shadowهمونطور که مشاهده می‌کنیم، تونستیم با استفاده از همون خاصیت text-shadow، چندین سایه رو روی پاراگرافمون بندازیم.

این مثال صرفا آموزشی بود و چندان قیافه خوبی نداره، بیاین حالا یه مثال بهتر رو بررسی کنیم!

از کد HTML مثال قبلی استفاده می‌کنیم و محتواشو به Iran تغییر می‌دیم.

کد CSS:

.shadows{
   text-shadow: 0px -15px 5px green, 0 15px 5px red;
   font-size: 5em;
   font-family: serif;
   color:rgb(240,240,240);
   font-weight: bolder;
}

نتیجه:

استفاده از سایه های چندگانه در کلمه Iran

اگه جایی از مثال رو متوجه نشدین، حتما تو قسمت نظرات پایگاه دانش میزفا بپرسین، پاسخگو خواهم بود 🙂

سایه‌ی درونی inset

سایه‌هایی که تا الان بررسی کردیم، همگی در وضعیت Offset بودن، یعنی بیرون از محتوا تنظیم و مقداردهی می‌شدن.

توسط مقدار inset، ما می‌تونیم سایه‌ها رو به درون محتوای خودمون منتقل کنیم.

نحوه نوشتن کد inset شبیه به قبله. با 2 تفاوت:

  • فقط یه کلمه‌ی کلیدی inset به مقادیر خاصیت اضافه می‌شه.
  • و اینکه برای خاصیت text-shadow کاربرد نداره و فقط روی box-shadow تاثیر داره.

به مثال زیر توجه کنین:

کد HTML:

<div> </div>

کد CSS:

div{
   height:100px;
   width:100px;
   box-shadow: 2px 2px 5px 5px red inset;
}

نتیجه:

سایه درونی (inset)

نکته: می‌تونیم واژه ی inset رو هم به عنوان مقدار اول قرار بدیم و هم مثل این مثال، به عنوان مقدار آخر!

البته سایه های درونی به همین اشکال ساده ختم نمیشه و میشه باهاشون مثال های باحال تری هم یاد گرفت! مثلا به مثال زیر توجه کنین:

کد HTML:

<div class="div1"></div>
<div class="div2"></div>

کد CSS:

div{
   display: inline-block;
}

.div1{
   height:100px;
   width:100px;
   border-radius: 50%;
   box-shadow: 17px 17px 1px 30px #0a007e inset;
}

.div2{
   height:100px;
   width:100px;
   border-radius: 50%;
   box-shadow: -17px -17px 1px 30px #0a007e inset;
}

نتیجه:

مثال ساخت توپ بولینگ با سایه درونی

در اینجا تونستیم با استفاده از inset shadows، شکلی مثل ۲ توپ بولینگ رو بسازیم!

همچنین می‌تونیم بدون استفاده از inset shadows هم این شکل رو بسازیم، اما به مراتب سخت تر خواهد بود.

ناگفته نمونه که خاصیت display در اینجا، ربطی به ساختن سایه ها نداره و اگه هنوز در موردش نخوندین لازم نیست نگران باشین 🙂 در صورت تمایل در مقاله خاصیت display در CSS میزفا می‌تونین مطالعش کنین.

پایان ترم

سوال:

به نظرتون، چطور می‌شه فقط با استفاده از یک div و shadow شکل زیر رو خلق کرد؟

کوییز مقاله ۳۵

کد مورد نظرتون رو کامنت کنین!

نکته: لازم به طراحی متن و جابه جایی عناصر نیست. خواسته سوال، فقط نحوه چینش رنگ های شکل بالا با استفاده از سایه هاست.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

در این مقاله یادگیری css ، با تعداد بیشتری از کارهایی که می‌تونیم توسط shadow در CSS انجام بدیم آشنا شدیم.

نحوه استفاده از سایه داخلی برای عناصر، و همچنین تعیین کردن سایه های چندگانه برای اون ها، چیزهایی بودن که در این مقاله یاد گرفتیم.

امیدوارم که خوب تمام مسائل رو یاد گرفته باشین 🙂

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر محتوا: علی اسمعیلی

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

دیدگاهتان را بنویسید

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


حداکثر حجم فایل برای آپلود: 1 مگابایت.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
Share via
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر