Box Shadow and Text Shadow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Shadow and Text Shadow</title>
<style>
.container {
display: flex;
}
.card {
padding: 23px 12px;
margin: 23px 12px;
/* border: 2px solid red; */
background-color: grey;
/* box-shadow: offset-x offset-y color; */
/* box-shadow: offset-x offset-y blur-radius color; */
/* box-shadow: offset-x offset-y blur-radius spread-radius color; */
/* box-shadow: 10px 13px black; */
/* box-shadow: -10px -13px black; */
/* box-shadow: 7px 5px 10px black; */
/* box-shadow: -7px -5px 10px 30px black; */
/* box-shadow: -7px -5px 10px 30px rgba(126, 184, 184, 0.9); */
box-shadow: inset 3px 5px orange;
box-shadow: 3px 5px orange, 4px 6px red;
}
.card h2{
/* text-shadow: 3px 2px rgb(44, 42, 42); */
text-shadow: 3px 2px 2px rgb(255, 255, 255);
text-shadow: -3px -2px 2px rgb(255, 255, 255);
}
</style>
</head>
<body>
<div class="container">
<div class="card" id="card-1">
<h2>This is C++ Course</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, quisquam nesciunt enim omnis fugiat
repellendus modi atque aperiam porro explicabo itaque neque veritatis natus dicta magnam nostrum!
Asperiores omnis, similique iste exercitationem suscipit cum?</p>
</div>
<div class="card" id="card-2">
<h2>This is HTML Course</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, quisquam nesciunt enim omnis fugiat
repellendus modi atque aperiam porro explicabo itaque neque veritatis natus dicta magnam nostrum!
Asperiores omnis, similique iste exercitationem suscipit cum?</p>
</div>
<div class="card" id="card-3">
<h2>Card3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, quisquam nesciunt enim omnis fugiat
repellendus modi atque aperiam porro explicabo itaque neque veritatis natus dicta magnam nostrum!
Asperiores omnis, similique iste exercitationem suscipit cum?</p>
</div>
</div>
</body>
</html>
Comments
Post a Comment