Proprietatea CSS box-shadow
Unui element i se pot atașa una sau mai multe umbre prin proprietatea CSS box-shadow.
Strict necesare sunt doar un offset orizontal și unul vertical.
Pe lângă acestea, poți alege o culoare, poți seta o rază de extindere, poți adăuga blur sau poți transforma umbra exterioară într-una interioară (inset).
Umbră Orizontală și Verticală în CSS
Două offset-uri, unul orizontal și unul vertical, sunt suficiente pentru o umbră de bază.
Dacă omiți culoarea, umbra preia culoarea curentă a textului.
Exemplu
O umbră definită doar prin cele două offset-uri ale sale:
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal and Vertical Shadow</title>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<h1>box-shadow: 10px 10px</h1>
<div>A div element with a box-shadow</div>
</body>
</html>
Specifică o Culoare pentru Umbră
Adăugarea unui parametru de culoare decide ce culoare are umbra.
Exemplu
Acum umbra are propria culoare:
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shadow Color</title>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px lightblue;
}
</style>
</head>
<body>
<h1>box-shadow: 10px 10px lightblue</h1>
<div>A div element with a lightblue box-shadow</div>
</body>
</html>
Adaugă un Efect de Blur Umbrei
Estomparea este controlată de parametrul de blur, care dă raza de blur a umbrei. Numerele mai mari produc o umbră mai blurată.
Exemplu
Aici marginile umbrei sunt estompate:
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blur Effect</title>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px 5px lightblue;
}
</style>
</head>
<body>
<h1>box-shadow: 10px 10px 5px lightblue</h1>
<div>A div element with a 5px blurred, lightblue box-shadow</div>
</body>
</html>
Setează Raza de Extindere a Umbrei
Cât de mult se extinde umbra depinde de parametrul de extindere, adică raza sa de extindere.
Valorile pozitive măresc umbra, iar valorile negative o micșorează.
Exemplu
Aici umbra crește printr-o rază de extindere:
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spread Radius</title>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px 5px 12px lightblue;
}
</style>
</head>
<body>
<h1>box-shadow: 10px 10px 5px 12px lightblue</h1>
<div>A div element with a blurred, lightblue box-shadow, with a spread radius of 12px</div>
</body>
</html>
Setează Parametrul inset
Implicit, o umbră este exterioară (outset). Cu parametrul inset, aceasta se mută în interiorul cadrului elementului și devine o umbră interioară.
Exemplu
Aceeași umbră, acum cu inset:
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inset Shadow</title>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px 5px lightblue inset;
}
</style>
</head>
<body>
<h1>box-shadow: 10px 10px 5px lightblue inset</h1>
<div>A div element with a blurred, lightblue, inset box-shadow</div>
</body>
</html>
Adaugă Umbre Multiple
Un element nu este limitat la o singură umbră.
Enumeră câte ai nevoie, separându-le prin virgule.
Exemplu
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Shadows</title>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
}
</style>
</head>
<body>
<h1>Multiple Shadows</h1>
<div>A div element with multiple shadows</div>
</body>
</html>
Crearea Cardurilor cu Umbră
Cardurile asemănătoare hârtiei sunt un alt lucru pe care îl poate produce box-shadow.
Card text
Conținutul text stă în interiorul acestui card, ridicat de o umbră subtilă:
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shadow Card - Text</title>
<style>
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.container {
padding: 2px 16px;
}
</style>
</head>
<body>
<h1>Shadow Cards</h1>
<div class="card">
<div class="container">
<h1>1</h1>
<p>January 1, 2021</p>
<p>Hardanger, Norway</p>
</div>
</div>
</body>
</html>
Card imagine
Acest card are o imagine deasupra conținutului său text:
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shadow Card - Image</title>
<style>
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.container {
padding: 2px 16px;
}
</style>
</head>
<body>
<h1>Shadow Cards</h1>
<div class="card">
<img src="img_avatar.png" alt="John" style="width:100%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
</body>
</html>