ایجاد سایه در CSS3

10 / 10
از 1 کاربر

با استفاده از CSS در طراحی سایت شما می توانید به متن و عناصر خود سایه اضافه کنید. در CSS3 این ویژگی توسعه یافته است. در اینجا ایجاد سایه در CSS3 را برای ما کاربران عزیز شرح می دهیم.

ویژگی سایه در CSS3

در زیر ویژگی های سایه در CSS3 را معرفی کرده است:

سایه جعبه (box-shadow) : یک یا چند سایه به یک عنصر اضافه می کند.
سایه متن (text-shadow) : افزودن یک یا چند سایه به متن
ویژگی text-shadow در CSS3 برای اعمال سایه به متن استفاده می شود. در ساده ترین حالت شما سایه افقی (مقدار 2px) و عمودی (مقدار 2px) را به متن اعمال می کنید.

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 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

ویژگی box-shadow درCSS3

این ویژگی برای اضافه کردن سایه به عنصر استفاده می شود. استفاده و کاربرد این ویژگی نیز کاملا شبیه سایه در متن است با این تفاوت که این ویژگی به یک عنصر مانند <div> اضافه می شود نه متن.

در مثال زیر عنصر <div> دارای سایه افقی و عمودی (به مقدار 10px) ، افکت محو (5px) خاکستری رنگ است.

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

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

ارسال نظر و نظرات ثبت شده