Box shadow in css
<!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>
</head>
<style>
.container{
display: flex;
}
.card{
border: 1px solid black;
background-color: antiquewhite;
margin: 2px 3px;
padding: 2px 4px;
/* box shdaow :- x y color */
/* box-shadow: 2px 2px yellow; */
/* box-shadow :- x y blur color:- blur means shadow ko kitna blur karna hai apko */
/* box-shadow: 2px 2px 13px yellow; */
/* box-shadow:- x y blur spread color :- spread means kitna apko usko failana hai hai uske liye use hota hai */
/* box-shadow: 2px 2px 13px 23px yellow; */
/* box-shadow:- -x -y color :- agar apko upper se box shadaow agar deni hai to aap iska use kar sakte hai */
/* box-shadow: -2px -2px yellow; */
/* box-shadow:- 2px 2px rgba(red green blue alpha):- alph ka matlab apko usko kitna dark karna hai */
/* box-shadow: -2px -2px rgba(2, 2, 34, 0.2); */
/* agar apko ander se box shadow deni hogi to aap inset ka use kar sakte hai */
box-shadow: inset 2px 2px red;
}
.card h1{
/* text shdaow :- x y color */
/* text-shadow: 1px 1px red; */
/* text-shadow:- -x -y color :- agar apko upper se box shadaow agar deni hai to aap iska use kar sakte hai */
/* text-shadow: -1px -1px red; */
text-shadow: -1px -1px red;
}
</style>
<body>
<div class="container">
<div class="card" id="card-1">
<h1>This is heading 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit maxime error iusto, corrupti ipsa provident minus nemo tempora reiciendis expedita eum, ipsum harum magnam aliquam dicta rerum, recusandae sunt itaque!
</p>
</div>
<div class="card" id="card-2">
<h1>This is heading 2</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit maxime error iusto, corrupti ipsa provident minus nemo tempora reiciendis expedita eum, ipsum harum magnam aliquam dicta rerum, recusandae sunt itaque!
</p>
</div>
<div class="card" id="card-3">
<h1>This is heading 3</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit maxime error iusto, corrupti ipsa provident minus nemo tempora reiciendis expedita eum, ipsum harum magnam aliquam dicta rerum, recusandae sunt itaque!
</p>
</div>
</div>
</body>
</html>
Thanks you for commenting your questions. I will see question and respond you.