72 lines
1.3 KiB
CSS
72 lines
1.3 KiB
CSS
.waves {
|
|
background: transparent;
|
|
block-size: 4px;
|
|
position: relative;
|
|
}
|
|
.waves::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background-repeat: repeat;
|
|
block-size: 10px;
|
|
background-size: 20px 20px;
|
|
background-image: radial-gradient(
|
|
circle at 10px -5px,
|
|
transparent 12px,
|
|
var(--waves-color, var(--color-white)) 13px
|
|
);
|
|
}
|
|
.waves::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background-repeat: repeat;
|
|
block-size: 15px;
|
|
background-size: 40px 20px;
|
|
background-image: radial-gradient(
|
|
circle at 10px 15px,
|
|
var(--waves-color, var(--color-white)) 12px,
|
|
transparent 13px
|
|
);
|
|
}
|
|
|
|
/* LARGE */
|
|
.waves-container {
|
|
block-size: 30px;
|
|
position: relative;
|
|
}
|
|
.waves--large {
|
|
position: absolute;
|
|
block-size: 30px;
|
|
inline-size: 100%;
|
|
background: var(--waves-color, var(--color-light));
|
|
bottom: 0;
|
|
}
|
|
|
|
.waves--large::before,
|
|
.waves--large::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
border-radius: 100% 50%;
|
|
}
|
|
|
|
.waves--large::before {
|
|
inline-size: 55%;
|
|
block-size: 100%;
|
|
background-color: var(--waves-color, var(--color-light));
|
|
left: -1.5%;
|
|
top: 40%;
|
|
}
|
|
.waves--large::after {
|
|
inline-size: 55%;
|
|
block-size: 109%;
|
|
background-color: var(--waves-bg-color, var(--color-white));
|
|
right: -1.5%;
|
|
top: 60%;
|
|
}
|