Shadows
Text shadows
Green text shadow text-shadow: <horizontal> <vertical> <color>Green text shadow text-shadow: <horizontal> <vertical> <blur> <color>
Multiple shadows text-shadow: <horizontal> <vertical> <blur> <color>, <horizontal> <vertical> <blur> <color>... text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
Text with border text-shadow: -2px 0 black, 0 1px black, 1px 0 black, 0 -2px black;
Box shadow
17
юли 17, 2021
.card {
width: 250px;
height: 250px;
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.4);
text-align: center;
}
.card-header {
height: 150px;
background-color: #0094aa;
color: white;
padding: 10px;
font-size: 40px;
}
.card-container {
padding: 10px;
}
Shadow editor
SHADOW
Color code on hover: #000000
Напреднал пример
Hello World!
h4 {
font-size: 70px;
font-weight: 900;
color: #0094aa;
--x-offset: -0.0625em;
--y-offset: 0.0625em;
--stroke: 0.025em;
--background-color: white;
--stroke-color: lightblue;
text-shadow:
var(--x-offset)
var(--y-offset)
0px
var(--background-color),
calc( var(--x-offset) - var(--stroke) )
calc( var(--y-offset) + var(--stroke) )
0px
var(--stroke-color);
}
@supports ( text-shadow: 1px 1px 1px 1px black ) {
h4 {
text-shadow:
var(--x-offset)
var(--y-offset)
0px
0px
var(--background-color),
var(--x-offset)
var(--y-offset)
var(--stroke)
0px
var(--stroke-color);
}
}