آموزش جلوه های سایه CSS

13 جولای 2021


جلوه های سایه CSS

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

در این فصل ها با خواص زیر آشنا خواهید شد:

  • text-shadow
  • box-shadow

سایه متن CSS

text-shadowویژگی CSS سایه را به متن اعمال می کند.

در ساده ترین کاربرد آن ، شما فقط سایه افقی (2px) و سایه عمودی (2px) را مشخص می کنید:

 

 


جلوه های سایه CSS

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

در این فصل ها با خواص زیر آشنا خواهید شد:

  • text-shadow
  • box-shadow

سایه متن CSS

text-shadowویژگی CSS سایه را به متن اعمال می کند.

در ساده ترین کاربرد آن ، شما فقط سایه افقی (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 {
  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;
}

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

مثال

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

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.