74 lines
1.2 KiB
CSS
74 lines
1.2 KiB
CSS
* {
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
font: 1em/1.125 trebuchet ms, verdana, sans-serif;
|
|
text-align: center;
|
|
}
|
|
|
|
article {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.75em;
|
|
line-height: 2;
|
|
}
|
|
|
|
section {
|
|
--w: Min(calc(100vw - 1.5em), 30em);
|
|
--h: calc(1.5*var(--w));
|
|
display: grid;
|
|
place-content: center;
|
|
grid-gap: 0 0.5em;
|
|
--dots: radial-gradient(circle, #000, #fff) 0 0/5px 5px round;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.25em;
|
|
text-transform: uppercase;
|
|
}
|
|
@media (min-width: 60.5em) {
|
|
h4 {
|
|
grid-row: 1;
|
|
}
|
|
}
|
|
|
|
div {
|
|
width: var(--w);
|
|
height: var(--h);
|
|
background: var(--lyr0, var(--img)) var(--sep, ) var(--lyr1, );
|
|
}
|
|
|
|
.halftone {
|
|
--lyr1: var(--dots);
|
|
filter: contrast(9);
|
|
}
|
|
|
|
.noproc {
|
|
--img: url(https://assets.codepen.io/2017/portrait_woman.jpg) 50%/cover;
|
|
}
|
|
.noproc .halftone {
|
|
--sep: ,;
|
|
background-blend-mode: screen;
|
|
}
|
|
|
|
.filter {
|
|
--img: url(https://assets.codepen.io/2017/portrait_tiger.jpg) 50%/cover;
|
|
}
|
|
.filter .halftone {
|
|
--lyr0: ;
|
|
position: relative;
|
|
}
|
|
.filter .halftone::after {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background: var(--img);
|
|
filter: brightness(1.25) contrast(1.25) grayscale(1);
|
|
mix-blend-mode: screen;
|
|
content: "";
|
|
} |