آموزش سایه در CSS3 

erfan molaei
3 سال پیش
آموزش سایه در CSS3

 آموزش سایه در CSS3 

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به  آموزش سایه در CSS3 خواهیم پرداخت.
CSS3 برای افزودن سایه به متن یا عناصر پشتیبانی می شود. ویژگی سایه به صورت زیر تقسیم شده است که به دو دسته بندی تقسیم می شود:
  • سایه متن
  • سایه جعبه

سایه متن

CSS3 برای افزودن جلوه های سایه به متن پشتیبانی می شود. در زیر مثالی برای افزودن جلوه های سایه به متن آورده شده است –

 

<html>
   <head>
      <style>
         h1 {
            text-shadow: 2px 2px;
         }
         h2 {
            text-shadow: 2px 2px red;
         }
         h3 {
            text-shadow: 2px 2px 5px red;
         }
         h4 {
            color: white;
            text-shadow: 2px 2px 4px #000000;
         }
         h5 {
            text-shadow: 0 0 3px #FF0000;
         }
         h6 {
            text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
         }
         p {
            color: white;
            text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
         }
      </style>
   </head>

   <body>
      <h1>Tutorialspoint.com</h1>
      <h2>Tutorialspoint.com</h2>
      <h3>Tutorialspoint.com</h3>
      <h4>Tutorialspoint.com</h4>
      <h5>Tutorialspoint.com</h5>
      <h6>Tutorialspoint.com</h6>
      <p>Tutorialspoint.com</p>
   </body>
</html>

 

خروجی به صورت زیر می باشد:

Tutorialspoint.com

Tutorialspoint.com

Tutorialspoint.com

Tutorialspoint.com

Tutorialspoint.com
Tutorialspoint.com

Tutorialspoint.com

 

سایه جعبه

مثال زیر برای افزودن جلوه های سایه به عنصر است.

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            padding: 15px;
            background-color: red;
            box-shadow: 10px 10px;
         }
      </style>
   </head>

   <body>
      <div>This is a div element with a box-shadow</div>
   </body>
</html>

 

خروجی به صورت زیر می باشد:

This is a div element with a box-shadow

 

منبع.

لیست جلسات قبل آموزش CSS

  1. آموزش CSS
  2. CSS چیست؟
  3. آموزش نحو CSS
  4. آموزش قوانین CSS 
  5. آموزش واحد انداره گیری در CSS
  6. آموزش رنگ ها در CSS
  7. آموزش Background در CSS
  8. آموزش فونت ها در CSS
  9. آموزش استفاده از تصاویر در CSS 
  10. آموزش استفاده از تصاویر در CSS 
  11. آموزش استفاده از لینک ها در CSS 
  12. آموزش جداول در CSS 
  13. آموزش حاشیه در CSS 
  14. آموزش margin در CSS
  15. آموزش لیست ها در CSS
  16. آمورش ویژگی padding در CSS
  17. آموزش ویژگی مکان نما در CSS 
  18. آموزش outline در CSS 
  19. آموزش ابعاد در CSS 
  20. آموزش نوارهای پیمایشی در CSS
  21. آموزش visibility در CSS
  22.  آموزش موقعیت یابی در  CSS 
  23. آموزش لایه ها در CSS 
  24. آموزش شبه کلاس ها در CSS 
  25. آموزش شبه عناصر در CSS
  26.  آموزش قوانین @ در CSS 
  27. آموزش فیلترهای متنی و تصویری در CSS 
  28. آموزش انواع رسانه ها در CSS 
  29. آموزش مدیا صفحه در CSS
  30. آموزش رسانه شنیداری در CSS
  31. آموزش چاپ در CSS 
  32. آموزش طرح بندی در CSS 
  33. آموزش CSS3
  34. آموزش گرد کردن گوشه ها در CSS3 
  35. آموزش حاشیه تصویر CSS3 
  36. آموزش تنظیم چند پس زمینه در CSS3  
  37. رنگ ها در CSS3 
  38. آموزش گرادیان در CSS3
0
0
برچسب ها :
نویسنده مطلب erfan molaei

دیدگاه شما

بدون دیدگاه