ایجاد سایه های بسیار زیبا برای یک باکس تنها با CSS

‏  10 دقیقه
۱۳ بهمن ۱۳۹۲
ایجاد سایه های بسیار زیبا برای یک باکس تنها با CSS

بنام یگانه هستی بخش

سلام خدمت همگی دوستان سون لرنی.باز هم با آموزشی جدید در خدمت شما هستم.در این آموزش قصد دارم به ایجاد سایه‌های زیبایی که تا قبل از آمدن CSS3 فقط می‌توانستید آنهارا در فتوشاپ ببینید،بپردازم.حتما شده بود بخواهید به یک المنت ، یک سایه ی زیبا بدید ولی نمیتونستید اونو با کد بنویسید و میرفتید سراغ فتوشاپ و سایه رو ایجاد میکردید بعد به صورت یه تصویر ذخیره میکردید و بعد ... که باعث میشد حجم صفحه ی وبتون بره بالا و این اصلا خوب نیست؛ هم از نظر سئو و هم از نظر کاربر پسند بودن.نمونه اش رو میتونید در زیر ببینید.(این مال وقتی بود که نمیتونستم با کد همچنین سایه هایی ایجاد کنم)

old_shadows

خب حالا می‌خواهیم همین سایه هارو با CSS3 بنویسیم.مثلا سایه‌های زیر رو با سی اس اس بنویسیم.

Capture2

میتونید دموی کار رو از اینک زیر ببینید.

shadows

سایه

می خواهیم توسط box-shadow این سایه هارا ایجاد کنیم.این خاصیت 2 تا 6 مقدار را میپذیرد.به صورت زیر

box-shadow: inset horizontal vertical blur spread colour;

که inset باعث میشود سایه در داخل جعبه ایجاد شود؛horizontal مقدار افقی سایه را مشخص میکند؛vertical مقدار عمودی سایه را مشخص میکند؛blur میزان خیرگی یا تیرگی را مشخص میکند؛و مقدار بعدی یعنی spread میزان گسترش سایه را مشخص میکند که میتوانیم به همه مقادیر منفی نیز بدهیم؛و colour هم رنگ سایه را مشخص میکند.

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

box-shadow: 10px 10px;
box-shadow: 10px 10px 5px #888;
box-shadow: inset 2px 2px 2px 2px black;
box-shadow: 10px 10px #888, -10px -10px #f4f4f4, 0px 0px 5px 5px #cc6600;

پشتیبانی مرورگر‌ها از سایه

تمام مروگر هایی که از CSS3 پشتیبانی میکنند میتوانند این سایه هارا به درستی نمایش دهند.میتوانید در اینجا ، مرورگر هایی که از box-shadow پشتیبانی میکنند را ببینید.

 

چون برخی از کد‌ها تکرار می‌شوند، کد‌های تکراری را در این قسمت قرار میدم.

کد HTML:

<div class="box shadow(number of effect)">
	<h3>افکت سایه ی شماره ...</h3>
</div>

کد CSS:

.box {
	width:70%;
	height:200px;
	background:#FFF;
	margin:55px auto;
}
.box h3{
  text-align:center;
  position:relative;
  top:80px;
  font-size: 20px;
  color: #858585;
}

 

افکت سایه اول

shadow1

یکی از ساده‌ترین نوع سایه هست که به شکل زیر سایه رو ایجاد کردیم.

CSS:

/******** SHADOW 1 *********/
.shadow1{
	-webkit-box-shadow: 0 10px 6px -6px #777;
	   -moz-box-shadow: 0 10px 6px -6px #777;
	        box-shadow: 0 10px 6px -6px #777;
}

توضیح:یک سایه ی ساده دادیم و فقط تنها کاری که کردیم این بود که سایه را مقداری به بالا بردیم(-6px) تا همه ی آن نمایش داده نشود.

یاداوری :

برای اینکه سایه ی مارا مرورگر کروم و فایرفاکس به درستی نشان دهند ، باید یک بار دیگر آن سایه را با پیشوند آنها بنویسیم(به صورت بالا).

افکت سایه دوم

shadow2

از این به بعد سایه هایی که میدهیم کمی حرفه ای‌تر میشن و نمیشه به طور معمول اون هارو روی باکسمون اعمال کنیم و از شبه عناصر before و after استفاده میکنیم.(برای اطلاعات بیشتر کلیک کنید)

نکته :

چون در هر قسمت باز هم کدهایی تکرار شده است فقط برای بار اول کمی در مورد اونا توضیح میدم

CSS:

/******** SHADOW 2 *********/
.shadow2{
	position: relative;
}
.shadow2:before, .shadow2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.shadow2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

توضیح:در خط 3 ،همونطور که کد هارو دیدید به کلاس shadow2 (به هر دایو دو کلاس دادیم که کلاس box ثابت هست و کلاس سایه‌ها متغیر هستن)، position:relative دادیم تا وقتی به المنت‌های داخل باکس position:absolute دادیم،موقعیت آنها نسبت به پنجره ی مرورگر تعیین نشود ، بلکه نسبت به عنصر والد آن(یعنی div.shadow2) ، تعیین شود.

نکته :

چون استایل شبه کلاس‌های before و after خیلی شبیه به هم هستند و تنها کمی با هم تفاوت دارند، استایلی رو که می‌خواهیم به ::before بدیم، به ::after هم میدیم (خط 5)و بعد ، از دادن استایل‌های تکراری به ::after جلوگیری میکنیم.

بعد مهم‌ترین قسمت z-index ای هست که به صورت -1 دادیم تا شبه عناصر before و after در پشت باکسمون قرار بگیره.در خط 8 به آنها پوزیشن با مقدار absolute دادیم تا بتونیم به راحتی مکانشو تعیین کنیم.

شاید براتون سوال پیش بیاد که کد خط نهم(9) چیکار میکنه؟!!جواب اینه که باعث میشه شبه عناصر نمایش داده بشن و اگر این خط رو پاک کنیم دیگه ::before و ::after نشون داده نمیشه.

در خط 14 هم تعیین میکنیم تا اندازه ی ::before و ::after با بزرگ بودن عرض پنجره ی کاربر از 300 پیکسل بیشتر نشه تا سایه زیباییشو از دست نده.

بعد در خط‌های 16تا18 به ::before و ::after سایه ای دادیم و بعد در خط‌های 19 تا 23 و 27تا31 گفتیم تا آنها مقداری بچرخند.

در خط 32 و 33 هم مکان ::after را تعیین کردیم(گفتیم در سمت راست قرار بگیرد).

حالا اگر بخواهیم ببینیم واقعا چطوری این سایه اعمال شده است z-index آنها را از -1 به 1 تغیییر دهید تا کاملا بفهمید چه شده است.(میتوانید نتیجه را در تصویر زیر ببینید)

test2

 افکت سایه سوم

shadow3

 

CSS:

/******** SHADOW 3 *********/
.shadow3
{
  position: relative;
}
.shadow3:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

این سایه هم شبیه سایه ی شماره دو هست فقط از ::after استفاده نکردیم.

افکت سایه چهارم

shadow4

CSS:

/******** SHADOW 4 *********/
.shadow4
{
  position: relative;
}
.shadow4:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}

این سایه هم شبیه سایه ی شماره دو هست فقط از ::before استفاده نکردیم.

افکت سایه پنجم

shadow5

CSS:

/******** SHADOW 5 *********/
.shadow5
{
  position: relative;
}
.shadow5:before, .shadow5:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.shadow5:after
{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

این سایه دقیقا شبیه سایه ی شماره 2 هست تنها کاری که کردیم این است که درجه ی چرخش آنها را افزایش دادیم(از 3 پیکسل به 8 پیکسل تغییر دادیم).

افکت سایه ششم 

shadow6

CSS:

/******** SHADOW 6 *********/
.shadow6
{
  	position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.shadow6:before, .shadow6:after
{
	content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}

توضیح:در خط 5 تا 7 دو سایه به باکس دادیم که یکی از آنها در داخل باکس(inset) اعمال شده است.در خط 21 و 22 هم به آنها border radius دادیم.(برای اطلاعات بیشتر کلیک کنید).اگر همانند افکت سایه ی شماره 2 ، z-index:-1 را به z-index:1 تغییر دهیم شاهد تصویر زیر هستیم(خط 13)

test6

 

 

افکت سایه هفتم 

shadow7

CSS:

/******** SHADOW 7 *********/
.shadow7
{
  	position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.shadow7:before
{
	content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}

این سایه هم مثل سایه ی شماره 6 هست فقط تفاوتش اینه که از ::after استفاده نکردیم و فاصله ی ::before رو از بالا و پایین 0 قرار دادیم(خط 17 و 18).یعنی ارتفاع ::before به اندازه ی ارتفاع div.shadow7 شده و در نتیجه سایه ی ::before از بالا هم قابل مشاهده هست.

افکت سایه هشتم

shadow8

CSS:

/******** SHADOW 8 *********/
.shadow8
{
  	position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.shadow8:before
{
	content:" ";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}

 

میتونید سورس کد رو از پایی دانلود کنید.

shadows

نتیجه گیری

دیدید که چطور با سی اس اس سایه هایی زیبا ایجاد کردیم.در کدنویسی CSS باید خلاق بود.درسته شاید شما با همه ی کدهایی که استفاده کردیم آشنایی داشتید ولی تاحالا به این صورت ازش استفاده نکردید.و نکته ی دیگه اینه که همیشه وقتی کدجدیدی یاد میگیرید(فرق نمیکنه چه زبانی باشه) خودتون اون کد رو بنویسید و تغییرش بدید تا بفهمید چطوری کارمیکنه، وگرنه با دیدن کد و کپی اون چیزی یاد نمیگیرید.

امیدوارم که خسته نشده باشید(من که حسابی خسته شدم 🙂 )

در پناه حق باشید یا علی

چه امتیازی به این مقاله می دید؟
نویسنده علی امینی
یک وب دیزاینر هستم که میشه گفت بر زبان های HTML, CSS, JavaScript مسلطم و همیشه با کتابخانه jQuery کار میکنم. از میان زبان های سمت سرور PHP رو میپسندم و CMS مورد علاقه من WordPress هست. هیچ IDE نمیتونه جای SublimeText رو برام بگیره و همیشه خودمو به روز نگه میدارم و به کدنویسی عشق می ورزم.
ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 

نظرات کاربران

hassany

سلام
خیلی عالی بود من تا حالا فکر میکردم این سایه ها رو فقط با فتوشاپ ایجاد میکنن
واقعا ممنونم
عضویت vip من امروز تموم میشه احتمالا برای دانلود مطالب مفید آینده دوباره اشتراک vip رو میخرم
باز هم به خاطر این سایت بروزتون ممنونم

یکی

شماره هشتش برا شما فقط ذوورش سایه داره ولی برا من بالا پایینم سایه دارم چی کار کنم؟!؟؟!

علی امینی

شماره هشت بالا پایینشم یه مقدار سایه داره. میشه یه عمی چیزی قرار بدید؟

mohsen

سلام و سپاس از مطلب مفیدی که منتشر کردید. یه سوال دارم از حضورتون؛ من چند تا باکس با css طراحی کردم، چطور باید این سایه ها رو براشون به کار ببرم؟

لقمان آوند

تو مطلب که خوب توضیح داده شده .
کافیه کلاس های css شامل سایه ها رو تعریف کنید و اون کلاس رو بدید به باکس ها تون . (به تگ های div)

seyyedali farrokh

سلام
ممنون از اموزش کاربردیتون،واقعا بدردم خورد.فقط یه سوال دارم ، اگه بخوایم افکت سایه اولی یه خورده پخش تر باشه و یه کمی دور عنصر رو بگیره کدوم عددو باید تغییر بدم؟

علی امینی

سلام
اینطور که از توضیح شما فهمیدم، به نظرم باید از مقدار سوم(خیرگی) و چهارم(گسترش) استفاده کنید.یه چیزی مثل کدزیر:
box-shadow:0 0 6px 5px #777;

seyyedali farrokh

ممنون علی افا. ❓

Shahin

مرسی از اموزش کاربردیتون
ولی من روی انجمن تست کردم کار نکرد 😕

الهام محمدی

خیلی خوب بود.ممنون

1234567890

دمتون گرم … اما درباره validation کردن فرم های فارسی هم توضیح بدهید عالی میشه … 😆

محمد بابازاده

خیلی کاربردی و جالب بود ، ممنونم دوست عزیز

N a S e R

بازم گل کاشتی داش علی ممنون ❓

علی

خیلی دنبالش بودم دمت گرم

محمود

ممنون خیلی عالی بود

Paria RVN

خیلی ممنون بابت مطلب مفیدتون.

alireza

تشكر از اموزشهاي كاربردي سايت ما . لطفا به اين اموزشها ادامه دهيد

علی امینی

ممنون؛
انشاءالله همینطور به آموزش ها ادامه میدیم و روز به روز بهترشون میکنیم

لقمان آوند

عالي بود و خيلي كاربردي