منظور از سایه ها چیست ؟ چگونه می‌توانیم به متن ها سایه بدیم؟ چگونه سایه ای نرم ایجاد کنیم؟ چگونه با استفاده از CSS سایه ایجاد کنیم؟ در این مقاله، ساختار و فرم کلی دستورات مربوط به سایه ها رو یاد می‌گیریم. در دو مقاله آینده، با شکل پیشرفته تر سایه‌ها، و یه سری مثال های جذاب تر آشنا می‌شیم!
سرفصل‌های پست
انواع خاصیت های دستور سایه
در CSS، می‌تونیم از سایه، توسط ۲ خاصیت زیر بهره ببریم:
- text-shadow
- box-shadow
مفهوم خاصیت text-shadow
این خاصیت، می‌تونه به متن ها و تکست ها سایه بده و تاثیری روی عنصر شامل متن ما نداره.
برای مثال، با استفاده از text-shadow، در عنصر زیر، سایه به متن داده میشه و نه به عنصر!
<span>Hello world!</span>
نتیجه:
مفهوم خاصیت box-shadow
box-shadow عملکرد متفاوتی از خاصیت text-shadow داره و به جای متن، به مرز های عنصر مربوطه سایه میده.
مجددا از عنصر span زیر، اما این بار همراه با خاصیت box-shadow در CSS استفاده می‌کنیم.
<span>Hello world!</span>
نتیجه به شکل زیر خواهد بود:
دستورات shadow هم مثل دستور های دیگه، سینتکس و نحوه نوشتار مربوط به خودشون رو دارن که باید ازشون تبعیت کنیم!
از خاصیت text-shadow شروع می‌کنیم.
خاصیت text-shadow
فرم کلی دستور مورد نظر، به شکل زیره:
سایه افقی
برای حرکت افقی سایه ها، ما نیاز به یه مبدا داریم که حرکت رو از اون جا شروع کنیم. مبدا و شروع حرکت سایه ها، از عنصر یا متنی هست که بهش سایه رو اختصاص دادیم.
در مثال زیر، سایه عمودی، گستردگی سایه و رنگ سایه رو ثابت در نظر گرفتیم.
به مقدار اول که شامل سایه‌ی افقی هست توجه کنین:
همونطور که مشاهده می‌کنیم، با توجه به منفی بودن یا مثبت بودن مقدار سایه افقی، می‌تونیم حرکت و جابه جایی اون رو تعیین کنیم. علامت منفی، سایه رو به چپ و علامت مثبت، سایه رو به راست حرکت میده.
سایه عمودی
عملکرد این مقدار هم دقیقا مثل سایه افقی هست. با این تفاوت که سایه، با توجه به مقدار منفی یا مثبت، از بدنه متن یا عنصر به سمت پایین و یا بالا حرکت می‌کنه. به مثال زیر توجه کنین:
اکثر سایه ها با استفاده از ترکیب این دو سایه، یعنی افقی و عمودی ساخته می‌شن. معمولا سایه‌ی یک طرفه تاثیر خاصی تو زیبایی متن یا عنصر ما نداره. برای نمونه، تو مثال زیر، سعی می‌کنیم که از هر دو سایه استفاده کنیم:
شفافیت سایه
با استفاده از این مقدار، می‌تونیم میزان شفافیت یا blur سایه رو مشخص کنیم.به مثال زیر توجه کنین:
مقادیر جا به جایی و رنگ سایه رو بدون تغییر در نظر گرفتیم. همونطور که می‌بینین، با کمتر شدن مقدار شفافیت، سایه تیز تر میشه و با افزایش مقدار شفافیت، یک سایه‌ی نرم تر و تار داریم.
نکته: شفافیت سایه، مقدار منفی قبول نمی‌کنه!
رنگ سایه
رنگ سایه با استفاده از مقادیر مختلفی تعیین میشه که تو فصل های قبل درموردشون توضیح دادیم.
برای نمونه به مثال زیر توجه کنین:
در این مثال، رنگ آبی رو با استفاده از سه روش اصلی رنگ دادن، به سایه مورد نظر اختصاص دادیم.
اگه جایی از مثال رو متوجه نشدین، حتما تو قسمت نظرات پایگاه دانش میزفا بپرسین، پاسخگو خواهم بود 🙂
خاصیت box-shadow
همونطور که گفتیم، خاصیت box-shadow می‌تونه روی خود عناصر حاوی محتوا تاثیر بزاره. اینجا اون رو به صورت ریز تر با هم یاد می‌گیریم.
به تصویر زیر که ترتیب مقدار پذیری این خاصیت رو نشون میده توجه کنین:
همونطور که می‌بینیم، اینجا به جای ۴ مقدار، باید از یه مقدار پنجمی هم استفاده کنیم.
گستردگی سایه
از اسمش مشخصه، توسط این خاصیت، می‌تونیم گستردگی سایه‌ها رو مشخص کنیم. برای فهم بهتر به مثال زیر توجه کنین:
نکته: شفافیت سایه رو با گستردگی سایه اشتباه نگیرید!
برای درک بهتر تفاوت اون ها، به مثال زیر که دارای شفافیت متفاوتیه توجه کنین:
پایان ترم
[box type=”info” class=”question-from-users” width=””]سوال:
مشتری ازتون می‌خواد کار زیر رو براش انجام بدید:
زمانی که نشانگر روی دکمه زیر میره، سایه دکمه ظاهر بشه و زمانی که روش کلیک میشه، سایه به شکلی تغییر کنه که کاربر واقعا حس کنه “دکمه کلیک شده و به پایین رفته”.
36873
کدتون رو تو یک قایل با نام “پاسخ کوییز مقاله ۳۴” بنویسین و تو قسمت نظرات آپلود کنین.
راهنمایی: از حالت های لینک active و hover استفاده کنین.
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
تو این مقاله آموزش css پیشرفته ، با مفاهیم اولیه و مبتدی در سایه ها آشنا شدیم و تفاوت بین دو خاصیت text-shadow و box-shadow و کاربرد های اون ها رو متوجه شدیم.
سپس به بررسی مقادیر مورد قبول این دو خاصیت پرداختیم و الانم که اینجاییم این مقاله رو به پایان می‌رسونیم 🙂
امیدوارم که از خوندن این مقاله کیف کرده باشین.
اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.
مدیر محتوا: علی اسمعیلی
11 پاسخ
*{
direction:rtl;
font-family: Arial, Helvetica, sans-serif;
}
body {
text-align: center;
}
button{
padding:15px 20px;
border:none;
background-color:#1aaf8f;
color:white;
border-radius:5px;
margin-top: 60px;
}
button:hover{
box-shadow: 0px 0px 0px 5px #1aaf8f;
}
button:active{
border-radius:5px;
padding:15px 20px;
border:none;
background-color:#1aaf8f;
color:white;
box-shadow: 0px 0px 0px 1px #1aaf8f;
}
click
ممنون ازتون صحیحه 🙂
سلام ممنون از سایت خوبتون
فوق العاده بود
سلام. عجب چالش با حالی. من واقعا می خوام در مورد دکمه و سایه بیشتر بدونم. واقعا ممنونم.
پاسخ کوئیز مقاله ۳۴
ممنون بهرامی پاسخت درسته. بهت پیشنهاد میکنم زمانی که رو دکمه کلیک میشه از خاصیت های transform هم استفاده کنی که باحال تر هم بشه و اون حالت کلیک کردن بیشتر حس شه.
برای این قضیه به مقاله تبدیلات دو بعدی در CSS ارجاعت میدم 🙂
سلام
سلام حسین، ممنون ازت درسته
*{
direction:rtl;
}
body , html{
height:100%;
display:flex;
justify-content:center;
align-items:center;
}
button{
padding:20px;
border:none;
background-color:#404040;
color:white;
border-radius:5px;
}
button:hover{
box-shadow: 0px 0px 0px 5px #404040
}
button:active{
padding:15px;
border:none;
background-color:#404040;
color:white;
border-radius:5px;
box-shadow: 0px 0px 0px 1px #404040
top: 5px
left: 5px
}
مرسی مهدی جان، پاسخت درسته 🙂
button:hover{
box-shadow:2px 4px 5px 3px darkkhaki;
}
button:active{
box-shadow:1px 2px 10px 1px green;
}
سلام. متاسفانه این پاسخ مورد انتظار نیست. برای درک بهتر سوال به این مثال هدایتت میکنم:
https://codepen.io/MikeMcChillin/pen/noJweبه نتیجه نهایی دقت کن (فقط نتیجه، چون کدش از CSS پیشرفته استفاده کرده)