۱
آبان

افکت های سایه ( shadow ) در CSS

دسته‌بندی‌ها :

جزئیات
نوع مطلبآموزشی

فهرست

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی . قصد داریم به آموزش چگونگی کار با افکت های سایه در css بپردازیم. در css شما می توانید. با استفاده از افکت های مختلف سایه (shadow) برای محتوای متنی و عناصر html صفحات وب خود، در جهات مختلف سایه ایجاد کنید. و جلوه های زیبا و کاربر پسندی به محتوای صفحات وب خود بدهید. در آموزش های قبلی اشاره ای مختصر به موضوع text – shadow در آموزشهای css ، داشتیم. در این پست به بررسی کاملتر و گسترده تر بحث کار با سایه در css می پردازیم.

ما در پست های آموزشی قبلی Css ، مباحث پر کاربردی نظیر ایجاد نوار منو navigation در css ، ایجاد گالری تصاویر در css ، معرفی واحدهای تنظیم اندازه در css ، کادر تزیینی دور عناصر در css و … پرداختیم.

همچنین در خصوص کار با فضای خالی بین عناصر html و مرتب کردن قالب وب سایت آموزشهای کار با فضای بین عناصر html در css ، مدیریت فضای خالی داخل عناصر html در css را نیز ارائه کردیم.

در ادامه ی این آموزش نیز به بررسی موضوع کار با افکت های سایه در css ، می پردازیم.

کار با افکت های سایه در css

در این پست شما دو ویژگی افکت سایه را یاد خواهی گرفت:

text-shadow : ایجاد سایه برای متن.
box-shadow : ایجاد سایه برای کادر اطراف عناصر.

ویژگی text-shadow

با استفاده از ویژگی text-shadow ، می توان افکت های مختلف سایه را برای متن ها در html ایجاد کرد.

مثال:

مثال :

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

h1 {

text-shadow: 2px 2px;

}

می توان رنگ سایه را نیز تعیین کرد:

مثال:

مثال :

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

h1 {

text-shadow: 2px 2px red;

}

با افزودن یک پارامتر دیگر می توان سایه را محو تر کرد تا طبیبعی تر به نظر برسد.

مثال:

مثال :

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

h1 {

text-shadow: 2px 2px 5px red;

}

مثال : متن سفید با سایه ی مشکی ملایم:

مثال :

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

h1 {

color: white;

text-shadow: 2px 2px 4px #000000;

}

افزودن چند سایه در یک متن

می توانید چند سایه را در یک متن قرار دهید و در ویژگی text-shadow ، آن ها را از هم جدا کنید.

مثال:

مثال :

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

h1 {

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

}

ویژگی box-shadow

با استفاده از ویژگی box-shadow ، می توان اطراف عناصر html افکت های سایه ایجاد کرد.

مثال: ایجاد سایه برای تگ <div>

مثال :

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

div {

box-shadow: 10px 10px;

}

مثال ۲: تغییر دادن رنگ سایه مثال قبلی:

مثال :

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

div {

box-shadow: 10px 10px grey;

}

مثال ۳: محو کردن مرزهای سایه مثال قبلی، با افزودن پارامتری دیگر:

مثال :

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

div {

box-shadow: 10px 10px 5px grey;

}

مثال ۴: می توانید با افزودن ویژگی های بیشتری مانند :: after و یا :: befor ، افکت های جالب و زیباتری خلق کنید:

مثال :

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

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

}

به اشتراک بگذارید

افکت های سایه در css ,ایجاد سایه در css ,جلوه های ویژه در css ,کار با ویژگی shadow در css ,ویژگی box-shadow ,ویژگی text-shadow

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

افکت های سایه ( shadow ) در CSS

مقدمه

کار با افکت های سایه در css

ویژگی text-shadow

افزودن چند سایه در یک متن

ویژگی box-shadow

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ