Box Shadow dan Text Shadow
<!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>
div {
width: 200px;
height: 200px;
background-color: red;
margin: 50px auto;
box-shadow: -10px 10px 5px hsla(100, 100%, 50%, 0.5);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Box Shadow adalah property CSS yang memungkinkan untuk menambahkan bayangan pada sebuah elemen HTML, seperti kotak atau teks.
Pada parameter pertama datang munculnya bayangan secara horizontal, parameter ketiga munculnya bayangan secara vertical, paramerter ketiga tingkat pudar banyangan dan yang terakhir adalah parameter warna.
box-shadow: -10px 10px 5px hsla(100, 100%, 50%, 0.5);
- Inset adalah masukannya bayangan kedalam elemen
- spread adalah bisa dibilang sebuah ukuran bayangan tetapi semakin besar nilai maka akan semakin blur
parameter kelima adalah spread
box-shadow: inset 0px 0px 0px 10px hsla(100, 100%, 50%);
- Multiple Box Shadow adalah menambahkan 1 atau lebih bayangan dengan warna dan ukuran yang berbeda-beda.
box-shadow: 0px 0px 0px 10px green, 0px 0px 0px 15px yellow, 0px 0px 0px 20px purple;
<!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>
div{
font-size: 100px;
text-align: center;
font-family:monospace;
font-style: oblique;
text-shadow: -10px 5px 5px red, 10px -5px 5px green;
}
</style>
</head>
<body>
<div>Text 1</div>
</body>
</html>
Text Shadow adalah property CSS yang memungkinkan untuk menambahkan bayangan pada sebuah Text
Sama seperti Box Shadow, Text Shadow ini juga bisa mutiple.
text-shadow: -10px 5px 5px red, 10px -5px 5px green;
Komentar
Posting Komentar