سایه در CSS3

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

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

• text-shadow
• box-shadow

پشتیبانی مرورگر 

اعداد داخل جدول نشان دهنده اولین نسخه از مرورگر است که بطور کامل صفات زیر رو پشتیبانی می کنند. عددی که با -webkit- یا -moz- همراه هستند ، اولین نسخه از مرورگر است که با prefix کار می کند.

صفت کروم

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

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

• text-shadow
• box-shadow

پشتیبانی مرورگر 

اعداد داخل جدول نشان دهنده اولین نسخه از مرورگر است که بطور کامل صفات زیر رو پشتیبانی می کنند. عددی که با -webkit- یا -moz- همراه هستند ، اولین نسخه از مرورگر است که با prefix کار می کند.

سایه متن در CSS3

با استفاده از صفت text-shadow می توان به متن جلوه سایه اضافه کرد. در ساده ترین استفاده از این صفت می توان به اندازه 2 پیکسل سایه افقی و عمودی تعریف کرد.

مثال : 

h1 {
    text-shadow: 2px 2px;
}

در مثال بعدی رنگی برای سایه تعیین می کنیم.

مثال : 

h1 {
    text-shadow: 2px 2px red;
}

سپس یک جلوه تاری به سایه اضافه می کنیم.

مثال : 

h1 {
    text-shadow: 2px 2px 5px red;
}

مثال زیر یک متن سفید با سایه سیاه را نشان می دهد.

مثال : 

h1 {
    color: white;
    text-shadow: 2px 2px 4px #000000;
}

مثال زیر یک  سایه نئونی قرمز در متن را نمایش می دهد.

مثال : 

h1 {
    text-shadow: 0 0 3px #FF0000;
}

سایه های متعدد در CSS3

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

مثال زیر یک سایه نئونی قرمز و آبی را نمایش می دهد.

مثال : 

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

مثال زیر یک متن سفید با سایه های سیاه ، آبی و آبی تیره نمایش می دهد.

مثال : 

h1 {
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

همچنین می توانید از صفت text-shadow برای یاجاد یک خط حاشیه ساده برای متن استفاده کنید (بدون سایه ).

مثال : 

h1 {
    color: yellow;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

صفت box-shadow در CSS3

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

در ساده ترین استفاده از آن می توانیم فقط سایه افقی و عمودی ایجاد کنیم.

مثال : 

div {
    box-shadow: 10px 10px;
}

سپس یک رنگ برای سایه تعیین می کنیم.

مثال : 

div {
    box-shadow: 10px 10px grey;
}

سپس ، یک جلوه تاری برای سایه تعریف می کنیم.

مثال : 

div {
    box-shadow: 10px 10px 5px grey;
}

همچنین می توانیم برای شبه عناصر before:: و after:: سایه تعریف کنیم تا جلوه ای خاص ایجاد شود.

مثال : 

#boxshadow {
    position: relative;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    padding: 10px;
    background: white;
}

#boxshadow img {
    width: 100%;
    border: 1px solid #8a4419;
    border-style: inset;
}

#boxshadow::after {
    content: '';
    position: absolute;
    z-index: -1; /* hide shadow behind image */
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); 
    width: 70%; 
    left: 15%; /* one half of the remaining 30% */
    height: 100px;
    bottom: 0;
}

جلوه کارت 

مثالی برای استفاده از box-shadow برای نمایش باکس هایی شبیه کارت های کاغذی را در زیر مشاهده می کنید.

مثال : 

div.card {
    width: 250px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
}

div.card {
    width: 250px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
}

  اکسپلورر   فایرفاکس   سافاری   اپرا  text-shadow  4.0  10.0  3.5  4.0  9.5  box-shadow  10.0
 4.0 -webkit-  9.0  4.0
 3.5 -moz-  5.1
 3.1 -webkit-  10.5

سایه متن در css3

با استفاده از صفت text-shadow می توان به متن جلوه سایه اضافه کرد. در ساده ترین استفاده از این صفت می توان به اندازه 2 پیکسل سایه افقی و عمودی تعریف کرد.

مثال : 

h1 {
    text-shadow: 2px 2px;
}

در مثال بعدی رنگی برای سایه تعیین می کنیم.

مثال : 

h1 {
    text-shadow: 2px 2px red;
}

سپس یک جلوه تاری به سایه اضافه می کنیم.

مثال : 

h1 {
    text-shadow: 2px 2px 5px red;
}

مثال زیر یک متن سفید با سایه سیاه را نشان می دهد.

مثال : 

h1 {
    color: white;
    text-shadow: 2px 2px 4px #000000;
}

مثال زیر یک  سایه نئونی قرمز در متن را نمایش می دهد.

مثال : 

h1 {
    text-shadow: 0 0 3px #FF0000;
}

سایه های متعدد در css3

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

مثال زیر یک سایه نئونی قرمز و آبی را نمایش می دهد.

مثال : 

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

مثال زیر یک متن سفید با سایه های سیاه ، آبی و آبی تیره نمایش می دهد.

مثال : 

h1 {
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

همچنین می توانید از صفت text-shadow برای یاجاد یک خط حاشیه ساده برای متن استفاده کنید (بدون سایه ).

مثال : 

h1 {
    color: yellow;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

صفت box-shadow در css3

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

در ساده ترین استفاده از آن می توانیم فقط سایه افقی و عمودی ایجاد کنیم.

مثال : 

div {
    box-shadow: 10px 10px;
}

سپس یک رنگ برای سایه تعیین می کنیم.

مثال : 

div {
    box-shadow: 10px 10px grey;
}

سپس ، یک جلوه تاری برای سایه تعریف می کنیم.

مثال : 

div {
    box-shadow: 10px 10px 5px grey;
}

همچنین می توانیم برای شبه عناصر before:: و after:: سایه تعریف کنیم تا جلوه ای خاص ایجاد شود.

مثال : 

#boxshadow {
    position: relative;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    padding: 10px;
    background: white;
}

#boxshadow img {
    width: 100%;
    border: 1px solid #8a4419;
    border-style: inset;
}

#boxshadow::after {
    content: '';
    position: absolute;
    z-index: -1; /* hide shadow behind image */
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); 
    width: 70%; 
    left: 15%; /* one half of the remaining 30% */
    height: 100px;
    bottom: 0;
}

جلوه کارت 

مثالی برای استفاده از box-shadow برای نمایش باکس هایی شبیه کارت های کاغذی را در زیر مشاهده می کنید.

مثال : 

div.card {
    width: 250px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
}

div.card {
    width: 250px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
}