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

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

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

old_shadows

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

Capture2

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

سایه

می خواهیم توسط 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) تا همه ی آن نمایش داده نشود.

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

افکت سایه دوم

shadow2

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

[panel type='info' title='']چون در هر قسمت باز هم کدهایی تکرار شده است فقط برای بار اول کمی در مورد اونا توضیح میدم[/panel]

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) ، تعیین شود.

[panel type='info' title='']چون استایل شبه کلاس‌های before و after خیلی شبیه به هم هستند و تنها کمی با هم تفاوت دارند، استایلی رو که می‌خواهیم به ::before بدیم، به ::after هم میدیم (خط 5)و بعد ، از دادن استایل‌های تکراری به ::after جلوگیری میکنیم.[/panel]

بعد مهم‌ترین قسمت 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;
}

 

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

[dl]shadows[/dl]

نتیجه گیری

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

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

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

 
ارسال دیدگاه
ما همه سوالات و دیدگاه ها رو می خونیم و پاسخ میدیم
۱۹ دیدگاه
hassany ۱۵ شهریور ۱۳۹۳، ۱۷:۳۳
سلام
خیلی عالی بود من تا حالا فکر میکردم این سایه ها رو فقط با فتوشاپ ایجاد میکنن
واقعا ممنونم
عضویت vip من امروز تموم میشه احتمالا برای دانلود مطالب مفید آینده دوباره اشتراک vip رو میخرم
باز هم به خاطر این سایت بروزتون ممنونم
یکی ۱۰ شهریور ۱۳۹۳، ۲۰:۴۳
شماره هشتش برا شما فقط ذوورش سایه داره ولی برا من بالا پایینم سایه دارم چی کار کنم؟!؟؟!
علی امینی ۱۱ شهریور ۱۳۹۳، ۰۹:۱۶
شماره هشت بالا پایینشم یه مقدار سایه داره. میشه یه عمی چیزی قرار بدید؟
mohsen ۰۷ مرداد ۱۳۹۳، ۱۸:۲۱
سلام و سپاس از مطلب مفیدی که منتشر کردید. یه سوال دارم از حضورتون؛ من چند تا باکس با css طراحی کردم، چطور باید این سایه ها رو براشون به کار ببرم؟
لقمان آوند ۰۷ مرداد ۱۳۹۳، ۲۱:۴۶
تو مطلب که خوب توضیح داده شده .
کافیه کلاس های css شامل سایه ها رو تعریف کنید و اون کلاس رو بدید به باکس ها تون . (به تگ های div)
seyyedali farrokh ۰۸ فروردین ۱۳۹۳، ۱۷:۳۱
سلام
ممنون از اموزش کاربردیتون،واقعا بدردم خورد.فقط یه سوال دارم ، اگه بخوایم افکت سایه اولی یه خورده پخش تر باشه و یه کمی دور عنصر رو بگیره کدوم عددو باید تغییر بدم؟
علی امینی ۱۰ فروردین ۱۳۹۳، ۱۵:۵۳
سلام
اینطور که از توضیح شما فهمیدم، به نظرم باید از مقدار سوم(خیرگی) و چهارم(گسترش) استفاده کنید.یه چیزی مثل کدزیر:
box-shadow:0 0 6px 5px #777;
Shahin ۰۱ اسفند ۱۳۹۲، ۰۳:۲۳
مرسی از اموزش کاربردیتون
ولی من روی انجمن تست کردم کار نکرد :???:
الهام محمدی ۲۹ بهمن ۱۳۹۲، ۱۳:۵۹
خیلی خوب بود.ممنون
1234567890 ۱۴ بهمن ۱۳۹۲، ۲۳:۴۵
دمتون گرم ... اما درباره validation کردن فرم های فارسی هم توضیح بدهید عالی میشه ... :lol:
محمد بابازاده ۱۴ بهمن ۱۳۹۲، ۰۸:۵۶
خیلی کاربردی و جالب بود ، ممنونم دوست عزیز
N a S e R ۱۳ بهمن ۱۳۹۲، ۲۱:۴۱
بازم گل کاشتی داش علی ممنون :?:
علی ۱۳ بهمن ۱۳۹۲، ۱۶:۵۸
خیلی دنبالش بودم دمت گرم
محمود ۱۳ بهمن ۱۳۹۲، ۱۶:۱۹
ممنون خیلی عالی بود
Paria RVN ۱۳ بهمن ۱۳۹۲، ۱۰:۵۲
خیلی ممنون بابت مطلب مفیدتون.
alireza ۱۳ بهمن ۱۳۹۲، ۰۹:۲۳
تشكر از اموزشهاي كاربردي سايت ما . لطفا به اين اموزشها ادامه دهيد
علی امینی ۱۳ بهمن ۱۳۹۲، ۱۴:۰۷
ممنون؛
انشاءالله همینطور به آموزش ها ادامه میدیم و روز به روز بهترشون میکنیم
لقمان آوند ۱۳ بهمن ۱۳۹۲، ۰۹:۱۶
عالي بود و خيلي كاربردي