Responsive infographic with CSS variables

index.pug

- var data = [
- 	{
- 		clist: ['#f6ba96', '#e2795b'], 
- 		title: 'gingerbread', 
- 		ptext: 'Soufflé cake brownie ice cream'
- 	}, 
- 	{
- 		clist: ['#a2d5d0', '#8dcbbc'], 
- 		title: 'brownie', 
- 		ptext: 'Soufflé cake brownie ice cream'
- 	}, 
- 	{
- 		clist: ['#9cc884', '#86b744'], 
- 		title: 'ice cream', 
- 		ptext: 'Soufflé cake brownie ice cream'
- 	}, 
- 	{
- 		clist: ['#fae791', '#f5d357'], 
- 		title: 'lava cake', 
- 		ptext: 'Soufflé cake brownie ice cream'
- 	}
- ].reverse(), n = data.length;

while n--
	article(style=`--c0: ${data[n].clist[0]}; --c1: ${data[n].clist[1]}`)
		h3 #{data[n].title}
		p #{data[n].ptext}

responsive-infographic-with-css-variables.markdown

Responsive infographic with CSS variables

Original idea on Shutterstock. No Edge support due to CSS variable and calc() bugs.

Like this?

If the work I've been putting out since early 2012 has helped you in any way or you just like it and you wish me to be able to continue putting out stuff, please consider one of the following:

• being a cool cat 😼🎩 and becoming a patron on Patreon

• making a one time donation via Ko-fi

• getting me something off my Amazon WishList

🎁 🇺🇸 / 🎁 🇬🇧

• or at least sharing this to show the rest of the world what can be done with CSS these days

Thank you!

A Pen by Ana Tudor on CodePen.

License.

style.scss

$fs: 5rem;
$lh: 1.25;
$shadow-h: 1.25em;

*, :before, :after {
	margin: 0;
	box-sizing: border-box;
}

html {
	background: #ececea;
	font-size: 125%;
	counter: art;
	
	@media (max-width: 200px) {
		font-size: 62.5%
	}
}

article {
	--wide: 0;
	--base: calc(var(--wide)*#{$fs});
	--size: #{.25*$fs};
	--left: calc(.5*(1 + var(--wide))*#{$fs});
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	margin: 2em auto;
	padding-left: calc(var(--wide)*#{1.5*$fs});
	width: 32em; max-width: 90%;
	min-height: $lh*$fs;
	font: 1em/ #{$lh} roboto, trebuchet ms, verdana, arial, sans-serif;
	counter-increment: art;
	filter: drop-shadow(-1px 3px 3px rgba(#000, .15));
	
	@media (min-width: 640px) { --wide: 1 }
	
	&:before, &:after { position: absolute }
	
	&:before {
		left: .25em;
		color: #fff;
		font-size: var(--base);
		content: '0'counter(art)
	}
	
	&:after {
		--grad: linear-gradient(#fff, #e0e0e0);
		top: 0; right: 0; bottom: -$shadow-h; left: 0;
		z-index: -1;
		padding-left: inherit;
		border-bottom: solid .75*$shadow-h transparent;
		transform: skewx(calc(var(--wide)*-22.5deg));
		background: var(--grad) 100% 50%/ calc(100% - (var(--base) + var(--left) + var(--wide)*var(--size)) + 1px) 100% no-repeat padding-box,
			var(--grad) calc(var(--base) + (1 + 2*var(--wide))*var(--size)) 50%/ var(--size) 100% no-repeat padding-box,
			radial-gradient(ellipse at 100% 50%, rgba(#000, .13), transparent 35%) 0 50%/ var(--size) 250% content-box, 
			linear-gradient(var(--c0) 50%, var(--c1) 0) padding-box, 
			radial-gradient(rgba(#000, .1), transparent 70%) 100% 100%/ calc(100% - (var(--base) + 2*var(--size))) $shadow-h border-box no-repeat;
		content: ''
	}
}

h3, p { padding-left: var(--left) }

h3 {
	background: linear-gradient(var(--c0), var(--c1));
	-webkit-background-clip: text;
					background-clip: text;
	color: transparent;
	text-transform: capitalize;
	filter: brightness(.85)
}