- let data = ['steal', 'change', 'polish', 'perfect'];
- let n = data.length;
- for(let i = 0; i < n; i++)
.card: h3 #{data[i]}
View Compiled
$lght: #bd5871, #489286;
$dark: #482533, #052b3c;
* { margin: 0 }
body, div, h3 { display: grid }
body {
--s: min(3em, 5vw);
--w: min(100%, 18em, 66vh);
box-sizing: border-box;
grid-gap: var(--s);
grid-template-columns:
repeat(auto-fit, var(--w));
place-content: center;
padding: var(--s);
min-width: 240px; min-height: 100vh;
background: #262626
}
.card {
--o: calc(.5*var(--s));
--dim: 2em;
--dif: calc(.5*var(--dim));
aspect-ratio: 3/ 4;
overflow: hidden;
border-radius: .75em;
box-shadow: var(--o) var(--o) 5px #1a1a1a;
background: linear-gradient($dark);
&::before, &::after { content: '' }
&::before, &::after, h3 { grid-area: 1/ 1 }
&::before {
background: var(--pattern), var(--map);
background-blend-mode: screen;
filter: contrast(39);
mix-blend-mode: lighten
}
&::after {
background: linear-gradient($lght);
mix-blend-mode: darken;
backdrop-filter: blur(.75px)
}
&:nth-child(1) {
--rad: radial-gradient(closest-side, #999, #000 69%);
--map: linear-gradient(90deg, #000, #888, #000);
--pattern:
var(--rad) 0 0/ var(--dim) var(--dim),
var(--rad) var(--dif) var(--dif)/ var(--dim) var(--dim);
h3 {
letter-spacing: -.3125em;
writing-mode: vertical-rl;
text-orientation: upright
}
}
&:nth-child(2) {
--pattern:
radial-gradient(#666, #000) 0 0/ 100% var(--dim),
repeating-linear-gradient(-45deg, #000, #666, #000 var(--dif));
--map: linear-gradient(45deg, #000, #666, #000);
h3 { letter-spacing: -.0625em }
}
&:nth-child(3) {
--slist: , #000, #4a4a4a, #000;
--setup: 0 0/ var(--dim) var(--dim);
--pattern:
linear-gradient(45deg var(--slist)) var(--setup),
linear-gradient(-45deg var(--slist)) var(--setup);
--map: linear-gradient(to right top var(--slist));
h3 { transform: skewy(45deg) }
}
&:nth-child(4) {
--pattern:
linear-gradient(45deg, #000, #8c8c8c) 0/ var(--dim) var(--dim);
--map: linear-gradient(45deg, #777, #000);
h3 { place-self: end start }
}
}
h3 {
place-self: center;
z-index: 2;
padding: 0 .5em .125em;
color: #ededed;
font: 500 calc(3*var(--w)) montserrat alternates, sans-serif;
text-shadow: 1px 1px #212121, -1px -1px #212121, 2px 2px 5px #121212
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.