با CSS3 شما می توانید افکت های سایه ایجاد کنید
  • 1395/3/18 6/7/2016 4:34:31 PM 6/7/2016 4:34:31 PM
  • 0
  • 422
با CSS3 شما می توانید افکت های سایه ایجاد کنید!

 

افکت های سایه 

با css3  شما می توانید به متن یا عناصر سایه اضافه کنید

در این بخش شما خصوصیات زیر را یاد می گیرید:

  • text-shadow
  • box-shadow

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

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

 

خصوصیت

IE

Chrome

Firefox

Safari

Opera

text-shadow

10.0

4.0

3.5

4.0

9.5

box-shadow

9.0

10.0

4.0 –

Webkit-

4.0

3.5 –moz-

5.1

3.1 –

Webkit-

10.5

 


سایه متن

خصوصیت box-shadow به متن سایه می دهد.در حالت ساده، شما تنها سایه افقی (2 پیکسل) و سایه عمودی (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;
}

سایه چندگانه

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

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

افکت سایه متن!


مثال

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;
}

خصوصیت box-shadow css3

خصوصیت box-shadow روی عناصر عمل می کند. در حالت ساده، شما تنها سایه افقی و سایه عمودی را مشخصمی کنید:

این یک عنصر div با یک box-shadow سیاه است

 

مثال

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

سپس یک رنگ به سایه اضافه کنید:

این یک عنصر div با یک box-shadow خاکستری است

مثال

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

سپس یک افکت تاری به سایه اضافه کنید:

این یک عنصر div با یک box-shadow خاکستری و تار است

مثال

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; /* سایه را پشت تصویر پنهان می کند */
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); 
    width: 70%; 
    left: 15%; /* نیمی از 30 درصد باقیمانده*/
    height: 100px;
    bottom: 0;
}

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

1

January 1, 2016

مثال

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;
}


خصوصیات سایه CSS3

خصوصیات سایه CSS3  در جدول زیر لیست شده است:

 

توضیح

خصوصیت

یک یا چند سایه به عنصر اضافه می کند

box-shadow

یک یا چند سایه به متن اضافه می کند

text-shadow

 

 

محمد انصاری

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

نظرات 0
برای ارسال دیدگاه وارد حساب کاربری خود شوید.

ورود به حساب کاربری ایجاد حساب کاربری
محمد انصاری
افکت های سایه CSS3
زیگماوب