نمونه های سایه جعبه css. سایه های داخلی در CSS تغییر مسیر طولانی به سمت پایین

اجرای سایه های معمولی با استفاده از 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 یک ابزار بسیار جالب دارد - متن-سایه(سایه متن)، که در نگاه اول بسیار ساده به نظر می رسد، اما با کمک آن می توانید در صورت استفاده از نبوغ و تخیل، جلوه های به یاد ماندنی ایجاد کنید.

مبانی سایه

اموال متن-سایهبسیار آسان برای استفاده توسط تمام مرورگرهای مدرن و حتی بدون استفاده از پیشوند پشتیبانی می شود. اما هیچ پشتیبانی در IE (حتی در IE9) وجود ندارد. شما می توانید از ابزارهایی مانند Modernizr برای کمک به بیرون کشیدن افکت های CSS3 حتی در نسخه های قدیمی IE استفاده کنید.

نحو

برای ایجاد سایه متن، از سینتکس ویژگی استفاده کنید متن-سایهکه در زیر آورده شده است. چهار پارامتر برای تعریف وجود دارد: دو پارامتر اول موقعیت سایه را تعیین می کند، سومی سطح تاری را تعیین می کند و چهارمی رنگ سایه را تعیین می کند.

Text-shadow: horizontal_offset vertical_offset blur color;

در زیر نمونه ای از سایه متن است که دو پیکسل به پایین و چهار پیکسل به سمت راست افست شده، سه پیکسل تار شده و با کدورت 30 درصد روی مشکی تنظیم شده است.

Text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

نتیجه استفاده از این ویژگی به صورت زیر خواهد بود:

چرا از rgba استفاده می شود؟

برای تعیین رنگ سایه هنگام تعریف یک ویژگی، لازم نیست از rgba استفاده کنید. با این حال، rgba بعد دیگری را هنگام تعریف یک سایه اضافه می کند - سطح شفافیت.

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

استفاده از اموال متن-سایهشما می توانید جلوه های مختلفی را برای متن ایجاد کنید، نه اینکه به سایه های ساده محدود شوند. به عنوان مثال، در اینجا کد ایجاد توهم متن افسرده وجود دارد.

ابتدا باید رنگ متن را کمی تیره تر از رنگ پس زمینه تنظیم کنید. و سپس باید از ملک استفاده کنید متن-سایهبا رنگ سفید و شفافیت بیشتر

رنگ پس زمینه #222 است و رنگ متن روی 60% شفافیت تنظیم شده است. سایه سفید کمی پایین و سمت راست با سطح کدورت 10 درصد قرار گرفته است.

متن ( پس‌زمینه: #222; ) #text h1 (رنگ: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1)؛ )

اصلا نیازی به محو کردن سایه نیست. یک سایه روشن می تواند به خوبی با طراحی وب سایت هماهنگ شود.

Text-shadow: 6px 6px 0px rgba(0,0,0,0.2);

لذت واقعی زمانی شروع می شود که محدودیت داشتن تنها یک سایه را دور بریزید. با استفاده از کاما برای جداسازی تعاریف، می توانید به هر تعداد سایه که نیاز دارید استفاده کنید!

متن-سایه: shadow1, shadow2, shadow3;

در اینجا مثالی از استفاده از دو سایه آورده شده است. رنگ اولی مشابه پس زمینه است.

Text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

تغییر مسیر طولانی به سمت پایین

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

این مثال از چهار سایه استفاده می‌کند که همگی در فواصل مختلف به پایین منتقل شده و تار شده‌اند.

Text-shadow: 0px 3px 0px #b2a98f، 0px 14px 10px rgba(0,0,0,0.15)، 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30,1,0px rgba )

فاصله کمی را به پایین تغییر دهید و به شدت محو کنید

در اینجا تجسم دیگری از همین ایده است. سه سایه با فاصله کمتری جابجا شده و تارتر هستند.

Text-shadow: 0px 4px 3px rgba(0,0,0,0.4)، 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);

متن سه بعدی مارک دوتو

این افکت در وب سایت MarkDotto.com استفاده می شود. از 12 سایه مختلف برای ایجاد یک افکت سه بعدی عالی استفاده می کند.

متن-سایه: 0 1px 0 #cccc، 0 2px 0 #c9c9c9، 0 3px 0 #bbb، 0 4px 0 #b9b9b9، 0 5px 0 #aaa، 0 6px 1px rgba(0،0،0)، . 0 5px rgba(0,0,0,.1)، 0 1px 3px rgba(0,0,0,.3)، 0 3px 5px rgba(0,0,0,.2)، 0 5px 10px rgba(0 ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

متن تورفتگی توسط گوردون هال

توجه داشته باشید که در مثال بالا، تکنیک خود را اثر چاپ سریع و کثیف نامیدم. این به این دلیل است که راه بسیار درگیرتری برای ایجاد متنی درج شده جدی وجود دارد که بسیار باورپذیرتر است.

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

رنگ زمینه: #666666;

-webkit-background-clip: text;

-moz-background-clip: text;

پس زمینه-کلیپ: متن;

رنگ: شفاف؛

text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;

درخشش

Text-shadow: 0px 0px 6px rgba(255,255,255,0.7);

Text-shadow: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd; منابع نوری متعدد Text-shadow: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);

رنگ: rgba(0,0,0,0.6); text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

نتیجه گیری

مثل اکثر

1. جلوه های CSS
2. ، اجرای سایه ها بسیار آسان است. اما ترکیبی از اقدامات ساده می تواند اثرات شگفت انگیزی داشته باشد.
3. سایه زیر یک عنصر بلوک در یک صفحه معمولا برای ایجاد یک افکت سه بعدی، برای جلب توجه به عنصر یا به عنوان بخشی از یک طراحی استفاده می شود. یک سایه کوچک زیر عناصر نیز به صفحه حجم و عمق می دهد.
4. برای افزودن یک سایه، از ویژگی box-shadow استفاده کنید که دارای شش مقدار است که تنها دو مورد از آن ها لازم است. در شکل شکل 1 ویژگی box-shadow را با تمام مقادیر ممکن نشان می دهد که برای شناسایی آنها شماره گذاری شده است.
5. برنج. 1. مقادیر ویژگی Box-shadow
6. کلمه کلیدی inset سایه را در داخل عنصر تنظیم می کند.

تغییر سایه به صورت افقی (5px - راست، -5px - چپ)؛

تغییر عمودی (5px - پایین، -5px - بالا)؛

شعاع تاری سایه (0 - سایه تیز)؛

کشش سایه (5px - کشش، -5px - کوچک شدن)؛	رنگ سایه	لازم است فقط تغییر افقی و عمودی را مشخص کنید. در این حالت سایه بدون تاری یا سیاهی واضح خواهد بود.
با ترکیب پارامترهای مختلف و مقادیر آنها، می توانید انواع مختلفی از سایه ها را بدست آورید. در جدول 1 کد و نتیجه ای که به آن منتهی می شود را نشان می دهد.		جدول 1. ترکیبی از پارامترهای سایه
کد		نتیجه
توضیحات		box-shadow: 5px 5px;
سایه تیز در سمت راست و پایین.		box-shadow: -5px -5px.
سایه تیز در سمت چپ و بالا.		box-shadow: 0 0 5px;
سایه تار در اطراف یک عنصر.		box-shadow: 0 0 5px 2px;
سایه را 2 پیکسل بزرگ کنید.		box-shadow: 0 0 5px 2px قرمز;

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

مثال 1: سایه روی یک تصویر پس زمینه

HTML5 CSS3 IE 9+ Cr Op Sa Fx

این مدیریت تغییر است. سان تزو، ترجمه. نیکولای کنرادنتیجه

این مثال

در شکل نشان داده شده است. 2. سایه گرد شدن گوشه های بلوک را دنبال می کند.

برنج. 2. ظاهر سایه بر روی تصویر پس زمینه

هنگام افزودن یک سایه "عریض"، توجه داشته باشید که ممکن است از مرزهای قابل مشاهده پنجره مرورگر فراتر رفته و در نتیجه یک نوار اسکرول افقی ظاهر شود.

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

برنج. 3. بلوک با سایه

HTML5 CSS3 IE 9+ Cr Op Sa Fx

سرفصل

برنج. 3. بلوک با سایه

HTML5 CSS3 IE 9+ Cr Op Sa Fx

یک عنصر می‌تواند بیش از یک سایه داشته باشد، اما چندین پارامتر آن‌ها با کاما در مقدار خاصیت box-shadow از هم جدا شده‌اند. مثال 3 نشان می دهد که چگونه می توان یک سایه دوتایی به همه تصاویر اضافه کرد.

تصویر

نتیجه این مثال در شکل نشان داده شده است. 4.

برنج. 4. تصویر دو سایه

اولین سایه در سمت چپ تصویر با شعاع تاری 20 پیکسل نمایش داده می شود که اندازه آن با پارامتر چهارم (20- پیکسل) کاهش می یابد. پارامترهای سایه دوم بعد از نقطه اعشار نشان داده می شود که سایه در سمت راست تصویر نمایش داده می شود و همچنین برای تقارن کاهش می یابد.

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

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

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

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

نتیجه

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

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

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

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

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

پارامتر ویژگی سوم

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

وقتی مقدار بزرگتر از صفر است، لبه ها تعریف را از دست می دهند، سایه بزرگتر و از نظر بصری روشن تر می شود. 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 پشتیبانی می شود.

امروز یاد می گیریم که چگونه سایه های 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; left:10px; عرض:50% ارتفاع:20% 10px rgba(0,0,0,0.7);

.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) inset:1px solid #efefef:0 0 120px 120px / 0 0 6px .block:fore, .block:after (content:"; position:absolute ; z-index:-10px:55% rgba(0,0,0.5) rotate(-3deg); سمت راست:10px:تغییر خودکار(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) inset عرض:50% ارتفاع:-80px rgba(0,0,0,0.4)

سایه 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؛ box-shadow: 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) inset; ; چپ: 50% جعبه-سایه: 0 15px rgba(0,0,0,6):10px

.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) inset; ; چپ: 0:0 15px rgba(0,0,0,6)

به عنوان مثال سایه 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) inset; 0px:10px box-shadow:0 15px rgba(0,0,0,0,6) حاشیه :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:before, .block:after ( content:""; position:absolute; z-index:-2;) .block:before ( top:0px; bottom:0px سمت چپ: 10px: 0 15px rgba(0,0,0,0,6)

سایه 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:""; -شاخص:-1; سمت راست: 0px rgba (0, 0, 0, 0.3), 0, 0, 0, 0.1 .block; :before, .block:after ( محتوا:""؛ موقعیت:مطلق؛ z-index:-2؛ پایین:15px؛ سمت چپ:10px؛ عرض:50%؛ ارتفاع:20%؛ حداکثر عرض:300px؛ کادر- shadow:0 10px rgba(0, 0, 0, 0.7);