- var data = [
- {
- slist: ['#51a9ad', '#438c92'],
- ptext: 'Cake muffin donut chocolate cake jelly sesame snaps wafer tart pie sweet roll muffin chupa chups.'
- },
- {
- slist: ['#ebb134', '#c2912a'],
- ptext: 'Cake cookie lemon drops muffin sugar plum. Liquorice pudding sugar plum topping macaroon pie chocolate.'
- },
- {
- slist: ['#db4453', '#a8343f'],
- ptext: 'Cake muffin donut chocolate cake jelly sesame snaps wafer tart pie sweet roll muffin chupa chups.'
- },
- {
- slist: ['#7eb138', '#6d982d'],
- ptext: 'Cake cookie lemon drops muffin sugar plum. Liquorice pudding sugar plum topping macaroon pie chocolate.'
- }
- ];
- var n = data.length;
- for(var i = 0; i < n; i++)
p(style=`--slist: ${data[i].slist}`) #{data[i].ptext}
View Compiled
$lin-h: 1.5;
$num-d: $lin-h*1em;
$off-x: -2em;
$off-y: -1.5em;
* {
box-sizing: border-box;
margin: 0;
padding: 0
}
html {
--narr: 0;
--comp: calc(1 - var(--narr));
--wide: 1;
min-height: 100vh;
/* test background */
background:
repeating-linear-gradient(-45deg,
gainsboro 0, gainsboro 2px,
transparent 0, transparent 5px);
/* live background *
background: linear-gradient(90deg, rgba(#e0e0e0, .85), rgba(#fff, .85)),
url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/kreator_rockharz_july_2018.jpg)
50%/ cover fixed;/**/
font: 400 calc(.5rem + var(--comp)*.5rem + var(--narr)*2vw)/ #{$lin-h}
open sans, trebuchet ms, verdana, arial, sans-serif;
@media (max-width: 36em) { --wide: 0 }
@media (max-width: 20em) { --narr: 1 }
}
body { overflow-x: hidden }
p {
--parity: 0;
--sign: calc(1 - 2*var(--parity));
display: flex;
align-items: center;
position: relative;
margin: 6.25em auto 0;
padding: 1em;
min-width: 160px; min-height: 6.5em;
width: calc(var(--comp)*80% + var(--narr)*100%);
max-width: 35em;
background: linear-gradient(90deg, #fcfcfc, #ececec);
counter-increment: idx;
&, &:before, &:after { box-shadow: -1rem 1rem 2rem rgba(#000, .2) }
&:before, &:after { position: absolute }
&:before {
z-index: -1;
bottom: calc(100% - .5em);
left: calc(var(--parity)*(100% - #{$num-d}) - var(--wide)*var(--sign)*1em);
width: $num-d;
background: linear-gradient(90deg, var(--slist));
color: #fff;
font-size: 4em;
text-align: center;
transition: .3s;
content: counter(idx, decimal-leading-zero)
}
&:after {
z-index: -2;
top: $off-y;
right: calc(var(--comp)*#{$off-x});
bottom: $off-y;
left: calc(var(--comp)*#{$off-x});
background: linear-gradient(90deg, #f0f0f0, #ededed);
content: ''
}
&:nth-child(2n) { --parity: 1 }
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.