می توانید سایه را به عناصر اضافه کنید و آن را تغییر دهید ظاهربا استفاده از ویژگی box-shadow CSS. این سبک به شما امکان می دهد تا جلوه های جالبی مانند حجم و سه بعدی بودن بلوک را درک کنید. این ویژگی توسط تمام مرورگرهای مدرن پشتیبانی می شود. استثناها IE8 و Opera Mini هستند.

ویژگی box-shadow: نحو

این سبک به صورت زیر نوشته شده است:

Box-shadow: inset 4px 4px 8px 5px #333333;

بیایید به ترتیب در نظر بگیریم که هر پارامتر چه مسئولیتی دارد (از چپ به راست):

• کلمه کلیدی inset: پارامتری که لازم نیست مشخص شود. سایه می کشد داخلعنصر
• افست X: میزان جابجایی سایه نسبت به عنصر را به صورت افقی مشخص می کند. مقدار مثبت به معنای تغییر به سمت راست، منفی - به چپ است. مقدار 0 به معنی عدم تغییر سایه است.
• Y Shift: میزان جابجایی عمودی سایه را مشخص می کند. مقدار مثبت به معنای جابجایی به سمت پایین و مقدار منفی به معنای تغییر به سمت بالا است. مقدار 0 یک سایه بدون تغییر است.
• شعاع تاری: این درجه تاری سایه است. هر چه مقدار بیشتر باشد، سایه تارتر می شود. اگر پارامتر مشخص نشده باشد، مقدار پیش فرض 0 است. در این صورت سایه کاملا واضح خواهد بود.
• افزونه: پارامتر اختیاری مسئول کشش سایه در امتداد هر دو محور. هر چه مقدار بالاتر باشد، کشش بیشتر است. پسوند فقط در صورتی کار می کند که پارامتر قبلی موجود باشد. مقدار پیش فرض 0 است.
• رنگ سایه: همه چیز با این پارامتر مشخص است - رنگ سایه عنصر را تعیین می کند. رنگ پیش فرض سیاه است.

توجه داشته باشید. مرورگرهای اندرویدو بزرگتر نسخه های آیفون Safari برای درست کار کردن به پیشوند -webkit- نیاز دارد ویژگی های CSSجعبه-سایه.

این ویژگی می تواند چندین گروه از ارزش ها را بگیرد (هم زمان چندین سایه ایجاد کند). برای انجام این کار، باید این گروه از پارامترها را فهرست کنید که با کاما از هم جدا شده اند. مثلا:

Box-shadow: 15px 15px 20px #8b0163, inset 15px 15px 20px #630046;

نمونه های جعبه سایه

برای کمک به درک بهتر قدرت و زیبایی ویژگی CSS box-shadow، چند نمونه را به شما نشان می دهیم که می توانید با خیال راحت از آنها استفاده کنید. این ویژگی می تواند یک بلوک معمولی را تا حد زیادی متحول کند!

سایه روشن

Box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);

جلوه کاغذ

Box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .6), 23px 0 20px -23px rgba(0, 0, 0, 0.6)، inset 0 0 40px rgba(0, 0, 0, 0.1);

چند لایه

Box-shadow: 6px 6px #cccc, 12px 12px #a3a3a3;

قاب سه گانه

جعبه سایه: 0 0 0 7px rgb(118، 46، 177)، 0 0 0 14px rgba(118، 46، 177، 0.6)، 0 0 0 21px rgba(118، 46، 177، 0).

گوشه ها

Box-shadow: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385;

همانطور که می بینید، ویژگی box-shadow فضای زیادی برای تخیل باقی می گذارد. شما می توانید بلوک ها را همانطور که دوست دارید تغییر دهید - نکته اصلی داشتن حس نسبت است! 😉

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

ترتیب ضبط اساساً مهم است. اولین مقدار همیشه در امتداد محور X، مقدار دوم - در امتداد محور Y است.

اگر در امتداد یکی از محورها به افست نیاز نیست، آن را روی صفر قرار دهید:

کلاس (box-shadow: 0 8px;) - تغییر سایه فقط در امتداد محور Y

نتیجه

Class (box-shadow: 8px 8px;) – جابجایی در امتداد هر دو محور

نتیجه

مقدار منفی برای محورهای جعبه سایه

سایه در جهت مخالف حرکت می کند:

کلاس (box-shadow: -8px 8px;) - تغییر سایه با مقدار منفی در امتداد محور X

نتیجه

Shadow Blur Radius

پارامتر ویژگی سوم جعبه-سایه. اگر مشخص نشده باشد، مقدار 0 است و اندازه سایه برابر با اندازه عنصری است که روی آن اعمال می شود.

کلاس (box-shadow: 0 48px 0;) - سایه ابعاد عنصری را که روی آن اعمال می شود کپی می کند.

نتیجه

وقتی مقدار بزرگتر از صفر است، لبه ها تعریف را از دست می دهند، سایه بزرگتر و از نظر بصری روشن تر می شود. Blur از همه طرف اعمال می شود:

Class (box-shadow: 0 0 8px;) – بدون افست، فقط تاری

نتیجه

Class (box-shadow: 0 8px 8px;) - تغییر جهت و محو شدن محور Y

نتیجه

مقدار منفی یک خطا در نظر گرفته می شود و سایه به هیچ وجه نمایش داده نمی شود.

شعاع کشش سایه

پارامتر ویژگی چهارم جعبه-سایه. اندازه سایه را نسبت به عنصر تغییر می دهد. کشش در همه جهات:

کلاس (box-shadow: 0 0 0 8px;) - بدون جابجایی یا تاری، فقط کشش

نتیجه

در این حالت، سایه 16 پیکسل بزرگتر از عنصر در عرض و ارتفاع است: 8 پیکسل سمت چپ + 8 پیکسل سمت راست و 8 پیکسل بالا + 8 پیکسل پایین.

مقدار کشش سایه منفی در CSS

سایه کشیده نمی شود، اما از همه طرف با مقدار مشخص شده باریک می شود:

کلاس (box-shadow: 0 16px 0 -8px;) - سایه را با مقدار منفی کاهش دهید

نتیجه

رنگ سایه

به طور پیش فرض، رنگ سایه رنگ فونت را کپی می کند: مانند مثال های بالا.

رنگ سایه در هر فرمت CSS موجود مشخص می شود:

• #ff0009
• rgb(255، 0، 9)
• hsl(358، 100، 50%)؛

به عنصر سایه آبی بدهید:

کلاس (box-shadow: 0 8px #3a8fe7;)

نتیجه

سایه داخلی

پارامتر درونیسایه ای را در داخل بلوک نمایش می دهد.

بر خلاف گزینه های ذکر شده در بالا، ترتیب نوشتن دقیقی وجود ندارد. هر دو گزینه نتیجه یکسانی خواهند داشت:

Box-shadow: 0 8px #3a8fe7 inset; box-shadow: inset 0 8px #3a8fe7;

نتیجه

درک گزینه دوم هنگام خواندن کد آسانتر است.

چندین سایه

چندین سایه با کاما از هم جدا شده اند. نمایش ترتیب از بالا به پایین:

کلاس (box-shadow: 0 8px #3a8fe7, 0 16px #3ae7af; )

نتیجه

اگر مکان را عوض کنید، سایه آبی قابل مشاهده نخواهد بود:

کلاس (box-shadow: 0 16px #3ae7af, 0 8px #3a8fe7; )

نتیجه

سایه داخلی و خارجی به طور همزمان تنظیم می شوند:

کلاس (box-shadow: 0 16px #3ae7af, inset 0 8px #3a8fe7; )

نتیجه

سایه گرد

اگر به عنصری خاصیت داده شود شعاع مرزی، سایه دارای گوشه های گرد خواهد بود.

کلاس (box-shadow: 0 16px #3a8fe7؛ حاشیه حاشیه: 8px؛ )

نتیجه

با تنظیم کشش سایه، گرد شدن آن را افزایش می دهیم. برای مثال، border-radius 8px و shadow stretch برابر 4 است.

8+4=12px شعاع گرد شدن سایه است.

Class( box-shadow: 0 16px 0 4px #3a8fe7; border-radius: 8px; )

نتیجه

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

8+(-4)=4px - یک سایه گرد می کنیم که دو برابر کوچکتر است.

اگر فشرده سازی سایه بیشتر از شعاع مرزی باشد، سایه ای با زوایای قائمه به دست خواهیم آورد. به عنوان مثال، فشرده سازی 16 پیکسل است.

8+(-16)=(-8)، اما fillet نمی تواند مقدار منفی داشته باشد و صفر اعمال می شود.

Class( box-shadow: 0 24px 0 -16px #3a8fe7; border-radius: 8px; )

نتیجه

ویژگی CSS جعبه-سایهتوسط تمام مرورگرهای محبوب به جز Opera Mini پشتیبانی می شود.

اجرای سایه های معمولی با استفاده از box-shadow یا text-shadow آسان است. اما اگر نیاز به ایجاد سایه های داخلی داشته باشید چه؟ این مقاله نحوه ساخت این سایه ها را تنها با چند خط کد توضیح می دهد.

نحو

ابتدا به دو روش اصلی برای پیاده سازی سایه ها در CSS می پردازیم.

جعبه-سایه

طرح جعبه-سایهشامل چندین معنی مختلف است:

افست افستو افست عمودی- جابجایی افقی و عمودی به ترتیب. این مقادیر نشان می دهد که شی در کدام جهت سایه خود را می اندازد:

شعاع تاریو شعاع گسترشکمی پیچیده تر تفاوت در چیست؟ بیایید به یک مثال با دو عنصر نگاه کنیم، جایی که مقادیر شعاع تاریفرق داشتن:

لبه سایه به سادگی محو شده است. با ارزش های مختلف شعاع گسترشموارد زیر را می بینیم:

در این حالت می بینیم که سایه در سطح وسیعی پراکنده شده است. اگر مقداری را مشخص نکنید شعاع تاریو شعاع گسترش، سپس آنها برابر با 0 خواهند بود.

سایه متن

نحو بسیار شبیه به جعبه-سایه:

معانی مشابه هستند، اما نه گسترش سایه. مثال استفاده:

درج در جعبه سایه

برای "برگرداندن" سایه در داخل شی، باید اضافه کنید درونیدر CSS:

هنگامی که سینتکس اولیه جعبه سایه را درک کردید، درک نحوه اجرای سایه های داخلی بسیار آسان است. مقادیر هنوز یکسان هستند، می توانید رنگ را اضافه کنید (RGB به صورت هگز):

رنگ در فرمت RGB است، مقدار آلفا مسئول شفافیت سایه است:

تصاویر با سایه

افزودن یک سایه داخلی به یک تصویر کمی دشوارتر از افزودن یک سایه معمولی است بخش. برای شروع، در اینجا کد معمولی تصویر آمده است:

منطقی است که فرض کنیم می توانید سایه ای مانند این اضافه کنید:

Img (box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5)؛ )

اما سایه قابل مشاهده نیست:

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

Div ( ارتفاع: 200 پیکسل؛ عرض: 400 پیکسل؛ کادر سایه: درونی 0 پیکسل 0 پیکسل 10 پیکسل rgba(0,0,0,0.9)؛ ) img ( ارتفاع: 200 پیکسل؛ عرض: 400 پیکسل؛ موقعیت: نسبی؛ شاخص z: -2 ;)

همه چیز کار می کند، اما شما باید کمی اضافه کنید نشانه گذاری HTMLو CSS. راه دوم تنظیم تصویر به عنوان پس زمینه است بلوک مورد نظر:

Div ( ارتفاع: 200px؛ عرض: 400px؛ پس‌زمینه: url(http://lorempixum.com/400/200/transport/2); box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9)؛ )

این چیزی است که هنگام استفاده از سایه های داخلی ممکن است اتفاق بیفتد:

درج در متن-سایه

برای پیاده سازی یک سایه متن داخلی، به سادگی به کد اضافه کنید درونیکار نمی کند:

برای حل، ابتدا روی هدر اعمال کنید h1نصب پس زمینه تیرهو یک سایه روشن:

H1 (رنگ پس‌زمینه: #565656؛ رنگ: شفاف؛ متن سایه: 0px 2px 3px rgba(255,255,255,0.5)؛ )

این چیزی است که اتفاق می افتد:

افزودن یک ماده مخفی پس زمینه-کلیپکه هر چیزی را که فراتر از متن باشد (به پس زمینه تاریک) قطع می کند:

H1 ( رنگ پس زمینه: #565656؛ رنگ: شفاف؛ متن-سایه: 0 پیکسل 2 پیکسل 3 پیکسل rgba (255،255،255، 0.5)؛ -webkit-background-clip: text; -moz-background-clip: text; پس زمینه-کلیپ: متن ;)

تقریباً دقیقاً همان چیزی بود که ما نیاز داشتیم. اکنون فقط متن را کمی تیره می کنیم (آلفا) و نتیجه این است:

امروز یاد می گیریم که چگونه سایه های CSS بدون تصاویر بسازیم. پس از اتمام این آموزش، دیگر نیازی به تولید کننده سایه CSS نخواهید داشت.

مزیت اصلی سایه های ایجاد شده با CSS3 سهولت اجرا و کاهش تعداد درخواست ها به سرور است (از آنجایی که دیگر از تصاویر استفاده نمی کنیم). برای ایجاد سایه CSS به یک تگ div و یک ویژگی جعبه سایه CSS نیاز داریم. شما نیازی به نشانه گذاری اضافی ندارید زیرا عناصر :after و :before را که پشت شیء اصلی قرار می دهیم (یک div با کلاس) ایجاد می کنیم. مسدود کردن).

نگاهی به کد HTML بیندازید که برای آن یک سایه CSS3 ایجاد خواهیم کرد:

بعد می توانید ببینید نمونه های آمادهو کد مورد نیاز برای پیاده سازی آنها. برای به حداقل رساندن متن در صفحه، ویژگی های CSS را با پیشوندهای مرورگر حذف می کنیم. کد کامل را می توان با کلیک بر روی لینک "نمونه" مربوط به مثال مشاهده کرد.

.block ( موقعیت:نسبی؛ عرض: 40%؛ بالشتک: 1em؛ حاشیه: 2em 10px 4em؛ پس‌زمینه:#fff؛ حاشیه-شعاع:4px؛ box-shadow:0 1px 4px rgba(0، 0، 0، 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; bottom:15px; چپ:10px ؛ عرض: 50٪؛ ارتفاع: 20٪؛ حداکثر عرض: 300 پیکسل؛ جعبه-سایه: 0 15 پیکسل 10 پیکسل rgba(0، 0، 0، 0.7)؛ تبدیل: چرخش (-3 درجه؛) .block:after (راست : 10 پیکسل؛ چپ: خودکار؛ تبدیل: چرخش (3 درجه)؛ )

.block ( موقعیت:نسبی؛ عرض:40%؛ بالشتک:1em؛ حاشیه:2em 10px 4em؛ پس‌زمینه:#fff؛ box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0، 0، 0، 0.1) ورودی؛ حاشیه: 1 پیکسل جامد #efefef؛ حاشیه: 0 0 120 پیکسل 120 پیکسل / 0 0 6 پیکسل 6 پیکسل؛ ) .block: قبل، .block: بعد ( محتوا:"؛ موقعیت: مطلق ؛ z-index:-2؛ پایین:12px؛ سمت چپ:10px؛ عرض:50%؛ ارتفاع:55%؛ حداکثر عرض:200px؛ box-shadow:0 8px 12px rgba(0، 0، 0، 0.5)؛ transform:skew(-8deg) rotate(-3deg); ) .block:after (راست:10px; چپ:auto; transform:skew(8deg) rotate(3deg); )

با استفاده از یک سایه می توانید یک پرسپکتیو بلوکی ارائه دهید. نمونه را ببینید.

.block ( موقعیت:نسبی؛ عرض:40%؛ بالشتک:1em؛ حاشیه:2em 10px 4em؛ پس‌زمینه:#fff؛ box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0، 0، 0، 0.1) درج؛ ) .block:قبل، .block:after ( محتوا:""؛ موقعیت:مطلق؛ z-index:-2;) .block:قبل (سمت چپ:80px؛ پایین:5px ؛ عرض: 50%؛ ارتفاع: 35%؛ حداکثر عرض: 200 پیکسل؛ جعبه-سایه: -80 پیکسل 0 8 پیکسل rgba(0، 0، 0، 0.4)؛ تبدیل:کج (50 درجه)، مبدا تبدیل: 0 100% ;) .block:after (نمایش:هیچ;)

سایه CSSدر بلوک برجسته نمونه را ببینید.

.block ( موقعیت:نسبی؛ عرض:40%؛ بالشتک:1em؛ حاشیه:2em 10px 4em؛ پس‌زمینه:#fff؛ box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0، 0، 0، 0.1)؛ جعبه سایه: 0 15px 10px -10px rgba(0، 0، 0، 0.5)، 0 1px 4px rgba(0، 0، 0، 0.3)، 0 0 40px rgba( , 0, 0, 0.1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; )

به عنوان مثال سایه CSS3 برای یک بلوک عمودی تا شده. نمونه را ببینید.

.block ( موقعیت:نسبی؛ عرض:40%؛ بالشتک:1em؛ حاشیه:2em 10px 4em؛ پس‌زمینه:#fff؛ box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0، 0، 0، 0.1) درج؛ ) .block:قبل، .block:after ( محتوا:""؛ موقعیت:مطلق؛ z-index:-2;) .block:before (بالا:10px؛ پایین:10px ؛ چپ: 0؛ راست: 50%؛ box-shadow: 0 0 15px rgba(0,0,0,0.6)؛ حاشیه حاشیه: 10px / 100px؛ )

.block ( موقعیت:نسبی؛ عرض:40%؛ بالشتک:1em؛ حاشیه:2em 10px 4em؛ پس‌زمینه:#fff؛ box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0، 0، 0، 0.1) درج؛ ) .block:قبل، .block:after ( محتوا:""؛ موقعیت:مطلق؛ z-index:-2;) .block:before (بالا:10px؛ پایین:10px ؛ چپ: 0؛ راست: 0؛ box-shadow: 0 0 15 پیکسل rgba (0،0،0،0.6)؛ شعاع حاشیه: 10 پیکسل / 100 پیکسل؛ )

به عنوان مثال سایه CSS3 برای یک بلوک تا شده به صورت افقی. نمونه را ببینید.

.block ( موقعیت:نسبی؛ عرض:40%؛ بالشتک:1em؛ حاشیه:2em 10px 4em؛ پس‌زمینه:#fff؛ box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0، 0، 0، 0.1) درج؛ ) .block:قبل، .block:after ( محتوا:""؛ موقعیت:مطلق؛ z-index:-2; ) .block:before (بالا:50%؛ پایین: 0 پیکسل؛ چپ: 10 پیکسل؛ راست: 10 پیکسل؛ جعبه سایه: 0 0 15 پیکسل rgba (0،0،0،0.6)، شعاع حاشیه: 100 پیکسل / 10 پیکسل؛ )

.block ( موقعیت:نسبی؛ عرض:40%؛ بالشتک:1em؛ حاشیه:2em 10px 4em؛ پس‌زمینه:#fff؛ box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0، 0، 0، 0.1) درج؛ ) .block:قبل، .block:after ( محتوا:""؛ موقعیت:مطلق؛ z-index:-2;) .block:before (بالا:0px؛ پایین:0px ؛ سمت چپ: 10 پیکسل؛ راست: 10 پیکسل؛ کادر سایه: 0 0 15 پیکسل rgba (0،0،0،0.6)؛ شعاع حاشیه: 100 پیکسل / 10 پیکسل؛ )

سایه CSS3 برای بلوک چرخانده شده. نمونه را ببینید.

.block ( موقعیت:نسبی؛ عرض: 40%؛ بالشتک: 1em؛ حاشیه: 2em 10px 4em؛ پس‌زمینه:#fff؛ حاشیه-شعاع:4px؛ box-shadow:0 1px 4px rgba(0، 0، 0، 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:none; transform:rotate(-3deg); ) .block > :first-child:before ( content:""; position:absolute; z-index:-1؛ بالا: 0px؛ پایین: 0؛ چپ: 0؛ راست: 0px؛ پس‌زمینه:#fff؛ box-shadow: 0 1px 4px rgba(0، 0، 0، 0.3)، 0 0 40px rgba (0، 0، 0، 0.1) ورودی؛ ) .block:قبل، .block:after ( محتوا:""؛ موقعیت:مطلق؛ z-index:-2؛ پایین:15px؛ سمت چپ:10px؛ عرض:50% ؛ ارتفاع: 20٪؛ حداکثر عرض: 300 پیکسل؛ کادر سایه: 0 15 پیکسل 10 پیکسل rgba(0، 0، 0، 0.7)؛ تبدیل: چرخش (-3 درجه؛) .block:after (راست: 10 پیکسل؛ چپ: خودکار؛ تبدیل: چرخش (3 درجه)؛ )

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

برای افزودن یک سایه در CSS، از ویژگی استفاده کنید جعبه-سایه .

1. تغییر سایه به صورت افقی (تا 100 پیکسل به راست، تا -100 پیکسل به چپ).
2. تغییر عمودی (تا 100 پیکسل پایین، تا -100 پیکسل به بالا).
3. سایه تاری (0 - سایه روشن، 100 - سایه بسیار تار).
4. کشش سایه (تا 100 پیکسل - کشش، تا -100 پیکسل - فشرده سازی).
5. رنگ سایه.
6. inset - سایه در داخل عنصر است، بدون درج سایه به بیرون خواهد بود.

نتیجه :

میز با سایه ها:

کد	مثال:
box-shadow: 0px 13px 17px -6px #000000;
box-shadow: 10px -10px 0px -6px #000000;
box-shadow: 10px 13px 0px -6px #000000;
box-shadow: 1px 1px 32px -6px #000000;
box-shadow: -1px 23px 41px -25px #000000;
box-shadow: -1px 23px 41px -25px #4dc13c;
box-shadow: -10px -10px 40px -6px #000000 inset;
box-shadow: 7px 10px 23px -8px #92a9e7;

با استفاده از یک سایه می توانید یک بلوک سه بعدی ایجاد کنید:

کد	مثال
جعبه سایه: 1px 0px rgb (220،195،35) ، 1px 1px rgb (192،167،7) ، 2px 1px rgb (219،194،34) ، 2px 2px rgb (191،166،6) ، 3px 2px 2px rgb (218،1933) 3px rgb(190,165,5)، 4px 3px rgb(217,192,32)، 4px 4px rgb(189,164,4)، 5px 4px rgb(216,191,31), 5px 5px rgb (217,192,32), 5px 5px 18,1,6,6px 190، 30) ، 6px 6px RGB (187،162،2) ، 7px 6px RGB (214،189،29) ، 7px 7px RGB (186،161،1) ، 8px 7px RGB (213،188،28) ، 8px 8px 8px RGB (18px 8px) rgb(212,187,27), 9px 9px rgb(184,159,0);
جعبه سایه: -1px 0px RGB (220،195،35) ، -1px 1px RGB (192،167،7) ، -2px 1px RGB (219،194،34) ، -2px 2px RGB (191،166،6) ، -3px 2px 2px 2px ( ,33)، -3px 3px rgb(190,165,5)، -4px 3px rgb(217,192,32)، -4px 4px rgb(189,164,4), -5px 4px rgb(216,191,31,31,31,8, -5) ,3)، -6px 5px rgb(215,190,30)، -6px 6px rgb(187,162,2)، -7px 6px rgb(214,189,29)، -7px 7px rgb(186,161,1,18,8,3x1, 8- ,28)، -8px 8px rgb(185,160,0)، -9px 8px rgb(212,187,27)، -9px 9px rgb(184,159,0);
box-shadow: -1px -0px rgb(220,195,35)، -1px -1px rgb(192,167,7)، -2px -1px rgb(219,194,34)، -2px -2px rgb(191,166,6), -3p -2px rgb(218,193,33)، -3px -3px rgb(190,165,5)، -4px -3px rgb(217,192,32)، -4px -4px rgb(189,164,4)، -5px -4px (216,9 rgb) 31)، -5px -5px rgb(188,163,3)، -6px -5px rgb(215,190,30)، -6px -6px rgb(187,162,2)، -7px -6px rgb(214,189,29 -) , -7p 7px rgb(186,161,1)، -8px -7px rgb(213,188,28)، -8px -8px rgb(185,160,0)، -9px -8px rgb(212,187,27)، -9px (9-9px, rgb18,94-) )
جعبه سایه: 1px -0px RGB (220،195،35) ، 1px -1px RGB (192،167،7) ، 2px -1px RGB (219،194،34) ، 2px -2px RGB (191،166،6) ، 3PX -2PB (21166.6) ,33)، 3px -3px rgb(190,165,5)، 4px -3px rgb(217,192,32)، 4px -4px rgb(189,164,4)، 5px -4px rgb(216,191,31,31,8px5) ,3)، 6px -5px rgb(215,190,30)، 6px -6px rgb(187,162,2)، 7px -6px rgb(214,189,29)، 7px -7px rgb(186,161 -7px rgb(186,161-px rgb (186,161 -27,1,3, 8px) ,28)، 8px -8px rgb(185,160,0)، 9px -8px rgb(212,187,27)، 9px -9px rgb(184,159,0);

Blok1 (عرض: 70٪؛ حداکثر عرض: 550 پیکسل؛ حاشیه: 10 پیکسل خودکار؛ بالشتک: 1em؛ جعبه-سایه: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0 , 0, 0, 0.8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, 0.1) inset; )

نتیجه :

Blok1 (عرض: 30٪؛ حداکثر عرض: 550 پیکسل؛ حاشیه: 2em خودکار؛ بالشتک: 1em؛ پس‌زمینه: #DADADA؛ box-shadow: 6px 6px #BBBBBB, 12px 12px #919191؛ )

نتیجه :

Blok1 ( عرض: 30٪؛ حاشیه: 0 خودکار؛ بالشتک: 2em؛ جعبه-سایه: 0 0 0 1px #cccc, 0 -20px 0 -10px #00FF00, 20px 0 0 -10px #FF0000, 0 0 20px 0 -0 FFFF00، -20px 0 0 -10px #FF3399؛ )

نتیجه :

با استفاده از سایه می توانید یک قاب زیبا بسازید.

قاب زیبا با استفاده از خواصجعبه- سایه

Blok1 (عرض: 20٪؛ حداکثر عرض: 250 پیکسل؛ حاشیه: 0 خودکار؛ بالشتک: 1em؛ حاشیه: 2px خط چین #999؛ جعبه-سایه: 0 0 0 1px #999، درونی 0 0 0 1px #999؛ )
نتیجه
:

Blok1 (عرض: 30٪؛ حداکثر عرض: 250 پیکسل؛ حاشیه: 2em خودکار؛ بالشتک: 4em؛ پس‌زمینه: #dcc005؛ box-shadow: 0 0 4em 4em #fff inset؛ )
نتیجه
:

Blok1 (حداکثر عرض: 250 پیکسل؛ حاشیه: 0 خودکار؛ بالشتک: 1em؛ شعاع حاشیه: 10 پیکسل؛ پس‌زمینه: rgb(100،100،100) گرادیان شعاعی (دایره در 0 0، rgba(255،255،255،255،5،255،255،2 rgba) 0.35))؛ box-shadow: inset rgba(0,0,0,.5) -3px -3px 8px, inset rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px؛ )
نتیجه
:


 
 
 
 
 
 
 

 

 
سایت اینترنتی
 

 

نتیجه
:

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