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

4 سال پیش

امتیاز دهید post

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

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش سایه در CSS3 خواهیم پرداخت.

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

سایه متن
سایه جعبه

سایه متن

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

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         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;
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;h1&gt;Tutorialspoint.com&lt;/h1&gt;
      &lt;h2&gt;Tutorialspoint.com&lt;/h2&gt;
      &lt;h3&gt;Tutorialspoint.com&lt;/h3&gt;
      &lt;h4&gt;Tutorialspoint.com&lt;/h4&gt;
      &lt;h5&gt;Tutorialspoint.com&lt;/h5&gt;
      &lt;h6&gt;Tutorialspoint.com&lt;/h6&gt;
      &lt;p&gt;Tutorialspoint.com&lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

<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

سایه جعبه

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

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

   &lt;body&gt;
      &lt;div&gt;This is a div element with a box-shadow&lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<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

امتیاز دهید post

نویسنده مطلب saber

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

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

سایه متن

Tutorialspoint.com

Tutorialspoint.com

Tutorialspoint.com

Tutorialspoint.com

Tutorialspoint.com

Tutorialspoint.com

سایه جعبه

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

دیدگاه شما

بدون دیدگاه

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

سایه متن

Tutorialspoint.com

Tutorialspoint.com

Tutorialspoint.com

Tutorialspoint.com

Tutorialspoint.com

Tutorialspoint.com

سایه جعبه

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

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه