Box Shadow and text shadow

 <!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Box Shadow and text shadow</title>

    <style>

        .main-div {

            display: flex;

        }


        .item {

            width: 250px;

            height: 450px;

            /* background-color: tomato; */

            margin: 5px 10px;

            padding: 3px 8px;


            /* box-shadow: offset-x offset-y blur-radius spread-radius color; */

            /* box-shadow: 9px 15px 10px 2px green; */


            /* - value upar shadow lane ke liye */

            /* box-shadow: -9px -15px 10px 2px green;  */


            /* dox ke under shadow dene ke liye */

            /* box-shadow: inset 10px 10px blue; */


            /* dono side me alag alag color dene ke liye  */

            /* box-shadow: 0px 20px green, 14px 6px red; */


            /* box shadow rgba value */

             /* box-shadow: 10px 15px 15px rgba(200, 150, 000, 0.5); */

             


        }

        .item h2{

            /* text-shadow: 2px 0px white; */


            /* text-shadow: offset-x offset-y blur-radius color; "spread-radius is not work on text-shadow " */

            text-shadow: 9px 15px 10px  green;


            /* "-" nigative value upar shadow lane ke liye */

            text-shadow: -9px -15px 10px  green; 


          

            


            /* dono side me alag alag color dene ke liye  */

            text-shadow: 0px 33px 10px green, 13px 0px 10px red;


            /* box shadow rgba value */

             text-shadow: 10px 15px 15px rgba(200, 150, 000, 0.5);

        }

   

    </style>

</head>


<body>

    <div class="main-div">

        <div class="item">  <h2>Welcome to our blog post</h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolor alias a, laudantium

            minima velit ab magnam impedit exercitationem nostrum, dicta saepe dolorum maiores nulla rem unde libero

            molestiae. Eaque, fuga atque. Ipsam, assumenda.</div>

        <div class="item">  <h2>Welcome to our blog post</h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolor alias a, laudantium

            minima velit ab magnam impedit exercitationem nostrum, dicta saepe dolorum maiores nulla rem unde libero

            molestiae. Eaque, fuga atque. Ipsam, assumenda.</div>

        <div class="item">  <h2>Welcome to our blog post</h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolor alias a, laudantium

            minima velit ab magnam impedit exercitationem nostrum, dicta saepe dolorum maiores nulla rem unde libero

            molestiae. Eaque, fuga atque. Ipsam, assumenda.</div>

        <div class="item">  <h2>Welcome to our blog post</h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolor alias a, laudantium

            minima velit ab magnam impedit exercitationem nostrum, dicta saepe dolorum maiores nulla rem unde libero

            molestiae. Eaque, fuga atque. Ipsam, assumenda.</div>

    </div>


</body>


</html>

Comments

Post a Comment

Popular posts from this blog

grid-template-areas

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style>         .container {             display: grid;             /* call grid area with asign grid area name  */             grid-template-areas:                 ' navbar navbar navbar'                 'section section aside'                 'footer footer footer';         }         nav ul {             display: flex;             justify-content: center;             al...
Read more

Loop In javaScript

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Loop In javaScript</title> </head> <body>     <h1>javaScript Loop</h1>     <p id="demo"></p>     <p id="demo1"></p>     <h1>hello </h1>     <script>         // for loop         // let i=0;         // for(i=0; i<10; i++){         //     console.log(i)         // }         // let friends = ["Avengers", "Lost in Space", "Strangers", "Dark", "Chilling Adventure of Sabrina", "Martian", "intastrastailer"]         // for (let index1 = 0; index1 < friends.length; index1++) {        ...
Read more

css grid 2

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>css grid</title>     <style>         .container {             display: grid;             grid-template-columns: repeat(3, 4fr);             /* grid-template-rows: repeat(8, 1fr); */             grid-template-rows: 2fr 4fr 2fr;             /* grid-column-gap: 1rem ;             grid-row-gap: 2rem; */             grid-gap: 1rem;                   }         .box {             background-color: rgb(236, 214, 15);       ...
Read more