021-20483015

سایه در CSS3

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

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

  • text-shadow
  • box-shadow

 

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

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

صفت کروم

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

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

  • text-shadow
  • box-shadow

 

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

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

 

  صفت
  کروم
  اکسپلورر
  فایرفاکس
  سافاری
  اپرا
 text-shadow
 4.0
 10.0
 3.5
 4.0
 9.5
 box-shadow
 10.0
 9.0
 4.0
 5.1
 10.5

سایه متن در CSS3

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

مثال : 

سایه متن 1
h1 {
    text-shadow: 2px 2px;
}
مشاهده مثال

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

مثال : 

سایه متن 2
h1 {
    text-shadow: 2px 2px red;
}
مشاهده مثال

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

مثال : 

سایه متن 3
h1 {
    text-shadow: 2px 2px 5px red;
}
مشاهده مثال

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

مثال : 

سایه متن 4
h1 {
    color: white;
    text-shadow: 2px 2px 4px #000000;
}
مشاهده مثال

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

مثال : 

سایه متن 5
h1 {
    text-shadow: 0 0 3px #FF0000;
}
مشاهده مثال

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

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

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

مثال : 

سایه چندگانه
h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
مشاهده مثال

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

مثال : 

سایه چندگانه 2
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 پیکسل سایه افقی و عمودی تعریف کرد.

مثال : 

سایه متن 1
h1 {
    text-shadow: 2px 2px;
}
مشاهده مثال

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

مثال : 

سایه متن 2
h1 {
    text-shadow: 2px 2px red;
}
مشاهده مثال

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

مثال : 

سایه متن 3
h1 {
    text-shadow: 2px 2px 5px red;
}
مشاهده مثال

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

مثال : 

سایه متن 4
h1 {
    color: white;
    text-shadow: 2px 2px 4px #000000;
}
مشاهده مثال

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

مثال : 

سایه متن 5
h1 {
    text-shadow: 0 0 3px #FF0000;
}
مشاهده مثال

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

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

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

مثال : 

سایه چندگانه
h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
مشاهده مثال

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

مثال : 

سایه چندگانه 2
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;
}
مشاهده مثال

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط