چگونه از 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، چندین سایه رو روی پاراگرافمون بندازیم.
این مثال صرفا آموزشی بود و چندان قیافه خوبی نداره، بیاین حالا یه مثال بهتر رو بررسی کنیم!
از کد 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;
}
نتیجه:
اگه جایی از مثال رو متوجه نشدین، حتما تو قسمت نظرات پایگاه دانش میزفا بپرسین، پاسخگو خواهم بود 🙂
سایه‌ی درونی 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 رو هم به عنوان مقدار اول قرار بدیم و هم مثل این مثال، به عنوان مقدار آخر!
البته سایه های درونی به همین اشکال ساده ختم نمیشه و میشه باهاشون مثال های باحال تری هم یاد گرفت! مثلا به مثال زیر توجه کنین:
کد 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 میزفا می‌تونین مطالعش کنین.
پایان ترم
[box type=”info” class=”question-from-users” width=””]سوال:
به نظرتون، چطور میشه فقط با استفاده از یک div و shadow شکل زیر رو خلق کرد؟
کد مورد نظرتون رو تو یه فایل با نام “پاسخ کوییز مقاله ۳۵” نوشته و تو قسمت نظرات آپلود کنین.
نکته: لازم به طراحی متن و جابه جایی عناصر نیست. خواسته سوال، فقط نحوه چینش رنگ های شکل بالا با استفاده از سایه هاست.
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
در این مقاله یادگیری css ، با تعداد بیشتری از کارهایی که می‌تونیم توسط shadow در CSS انجام بدیم آشنا شدیم.
نحوه استفاده از سایه داخلی برای عناصر، و همچنین تعیین کردن سایه های چندگانه برای اون ها، چیزهایی بودن که در این مقاله یاد گرفتیم.
امیدوارم که خوب تمام مسائل رو یاد گرفته باشین 🙂
اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.
مدیر محتوا: علی اسمعیلی
10 پاسخ
body{
text-align: center;
}
div{
text-transform: capitalize;
text-align: center;
font-size: 3vw;
width:15em;
margin: 80px;
background-color: rgb(244, 245, 247);
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
box-shadow: 0px -45px 0px 0 green, 0px 45px 0 0px red ;
}
/* .div{
box-shadow: 0px -45px 0px 0 green;
} */
Iran
عالی، ممنون ازتون 🙂
سلام مقاله عالی بود مخصوصا چالش پرچم ایران. من بلد نبودم پرچمو پایین بیارم با آوردمش پایین.
پاسخ کوییز مقاله ۳۵
سلام بهرامی، خواهش میکنیم، پاسخت کاملا درسته ممنون ازت 🙂
سلام
ممنون حسین عزیز درسته پاسخت. فقط یک نکته مهم، لطفا از این به بعد پاسخ کوییز هایی که به کد نیاز دارن رو داخل یک زیپ قرار بده و آپلود کن. ممنون?
.div1 {
height: 100px;
width: 500px;
box-shadow: 0px 500px 0px 0px Green inset;
}
.div2 {
height: 100px;
width: 500px;
font-size: 48px;
text-align: center;
box-shadow: 0px 500px 0px 0px #e9e9e9 inset;
}
.div3 {
height: 100px;
width: 500px;
box-shadow: 0px 500px 0px 0px red inset;
}
Islamic republic of Iran
سلام حسن. تو سوال گفتیم فقط با استفاده از یک div. شما که 3 تا div ناقابل زدی
margin: 100px;
text-align: center;
font-family: cursive;
font-size: 50px;
background-color: white;
width:500px;
height:70px;
box-shadow: 0px 70px 0px 0px red,0px -70px 0px 0px green;
سلام مهدی، مرسی ازت 🙂 پاسخت کاملا صحیحه