Details element as turnable cards

details-element-as-turnable-cards.markdown

Details element as turnable cards

A Pen by Cyd Stumpel on CodePen.

License.

index.html

<section class="cards">
	<details style="--rotation: 7deg">
		<summary>
			<h1>Web Development</h1>
			<svg width="255" height="314" viewBox="0 0 255 314" fill="none" xmlns="http://www.w3.org/2000/svg">
				<rect x="57.8967" y="22.5154" width="14.4742" height="160.825" fill="#111111" />
				<rect x="101.319" y="22.5154" width="14.4742" height="131.876" fill="#111111" />
				<rect x="144.742" y="94.8867" width="14.4742" height="73.9794" fill="#111111" />
				<rect x="188.165" y="109.361" width="14.4742" height="73.9794" fill="#111111" />
				<rect x="231.588" y="138.309" width="14.4742" height="88.4536" fill="#111111" />
				<rect x="217.113" y="226.763" width="14.4742" height="41.8144" fill="#111111" />
				<rect x="202.639" y="268.577" width="14.4742" height="45.0309" fill="#111111" />
				<rect x="72.3711" y="284.66" width="14.4742" height="28.9484" fill="#111111" />
				<rect x="57.8967" y="255.711" width="14.4742" height="28.9484" fill="#111111" />
				<rect x="43.4227" y="226.763" width="14.4742" height="28.9484" fill="#111111" />
				<rect x="28.9483" y="197.814" width="14.4742" height="28.9484" fill="#111111" />
				<rect x="14.4744" y="168.866" width="14.4742" height="28.9484" fill="#111111" />
				<rect y="139.917" width="14.4742" height="43.4227" fill="#111111" />
				<rect x="43.4227" y="154.392" width="14.4742" height="14.4742" fill="#111111" />
				<rect x="14.4744" y="139.917" width="28.9484" height="14.4742" fill="#111111" />
				<rect x="72.3711" y="8.04126" width="28.9484" height="14.4742" fill="#111111" />
				<rect x="115.794" y="80.4124" width="28.9484" height="14.4742" fill="#111111" />
				<rect x="159.217" y="94.8867" width="28.9484" height="14.4742" fill="#111111" />
				<rect x="86.8455" y="299.134" width="115.794" height="14.4742" fill="#111111" />
				<rect x="202.639" y="109.361" width="14.4742" height="14.4742" fill="#111111" />
				<rect x="217.113" y="123.835" width="14.4742" height="14.4742" fill="#111111" />
				<path d="M14.4744 154.392H43.4229V168.866H57.8971V183.34H72.3713V22.5154H101.32V154.392H115.794V94.8865H144.742V168.866H159.217V109.361H188.165V183.34H202.639V123.835H217.114V138.309H231.588V226.763H217.114V268.577H202.639V299.134H86.8455V284.66H72.3713V255.711H57.8971V226.763H43.4229V197.814H28.9486V168.866H14.4744V154.392Z" fill="#111111" />
				<rect x="65.9391" y="14.4741" width="14.4742" height="160.825" fill="#111111" />
				<rect x="109.361" y="14.4741" width="14.4742" height="131.876" fill="#111111" />
				<rect x="152.784" y="86.8455" width="14.4742" height="73.9794" fill="#111111" />
				<rect x="196.207" y="101.32" width="14.4742" height="73.9794" fill="#111111" />
				<rect x="239.63" y="130.268" width="14.4742" height="88.4536" fill="#111111" />
				<rect x="225.155" y="218.722" width="14.4742" height="41.8144" fill="#111111" />
				<rect x="210.681" y="260.536" width="14.4742" height="45.0309" fill="#111111" />
				<rect x="80.4131" y="276.619" width="14.4742" height="28.9484" fill="#111111" />
				<rect x="65.9391" y="247.67" width="14.4742" height="28.9484" fill="#111111" />
				<rect x="51.4647" y="218.722" width="14.4742" height="28.9484" fill="#111111" />
				<rect x="36.9903" y="189.773" width="14.4742" height="28.9484" fill="#111111" />
				<rect x="22.5164" y="160.825" width="14.4742" height="28.9484" fill="#111111" />
				<rect x="8.04199" y="131.876" width="14.4742" height="43.4227" fill="#111111" />
				<rect x="51.4647" y="146.351" width="14.4742" height="14.4742" fill="#111111" />
				<rect x="22.5164" y="131.876" width="28.9484" height="14.4742" fill="#111111" />
				<rect x="80.4131" width="28.9484" height="14.4742" fill="#111111" />
				<rect x="123.836" y="72.3711" width="28.9484" height="14.4742" fill="#111111" />
				<rect x="167.259" y="86.8455" width="28.9484" height="14.4742" fill="#111111" />
				<rect x="94.8875" y="291.093" width="115.794" height="14.4742" fill="#111111" />
				<rect x="210.681" y="101.32" width="14.4742" height="14.4742" fill="#111111" />
				<rect x="225.155" y="115.794" width="14.4742" height="14.4742" fill="#111111" />
				<path d="M22.5164 146.35H51.4649V160.825H65.9391V175.299H80.4133V14.4741H109.362V146.35H123.836V86.8452H152.784V160.825H167.259V101.319H196.207V175.299H210.681V115.794H225.156V130.268H239.63V218.721H225.156V260.536H210.681V291.093H94.8875V276.618H80.4133V247.67H65.9391V218.721H51.4649V189.773H36.9906V160.825H22.5164V146.35Z" fill="#E2FC91" />
			</svg>

		</summary>
		<div class="back">
			<p>
				I build <em>creative</em> and <em>accessible</em> websites from scratch, completely tailored to your design.
			</p>
			<p>
				Whether you need me to build your entire website, or only a part of it, I can work in any (modern) frontend stack and with- and without a team.
			</p>
			<p>
				I make sure your website is accessible, performant and easy to use.

			</p>
		</div>
	</details>
	<details style="--rotation: -6deg">
		<summary>
			<h1>Consultancy</h1>
			<svg viewBox="0 0 195 270" fill="none" xmlns="http://www.w3.org/2000/svg">
				<rect x="45" y="15" width="105" height="165" fill="#111111" />
				<rect x="30" y="30" width="135" height="135" fill="#111111" />
				<rect x="15" y="45" width="165" height="105" fill="#111111" />
				<rect y="75" width="195" height="45" fill="#111111" />
				<rect x="75" width="45" height="270" fill="#111111" />
				<rect x="60" y="165" width="75" height="90" fill="#111111" />
				<rect x="60" y="209" width="75" height="46" fill="#111111" />
				<path d="M60 45V30H90V15H105V30H135V45H150V60H165V90H180V105H165V135H150V150H135V165H120V194H75V165H60V150H45V135H30V105H15V90H30V60H45V45H60Z" fill="#E2FC91" />
				<rect x="75" y="135" width="15" height="90" fill="#111111" />
				<rect x="60" y="105" width="15" height="30" fill="#111111" />
				<rect x="120" y="105" width="15" height="30" fill="#111111" />
				<rect x="90" y="105" width="15" height="30" fill="#111111" />
				<rect x="75" y="90" width="15" height="15" fill="#111111" />
				<rect x="105" y="90" width="15" height="15" fill="#111111" />
				<rect x="105" y="135" width="15" height="90" fill="#111111" />
				<rect x="75" y="210" width="30" height="15" fill="#E2FC91" />
				<rect x="90" y="240" width="30" height="15" fill="#E2FC91" />
			</svg>
		</summary>
		<div class="back">
			<p>
				Not sure where to start or how to implement new techniques in your workflow or team?
			</p>
			<p>I can help with:</p>
			<ul>
				<li>
					Web Development
				</li>
				<li>
					Accessibility
				</li>
				<li>
					(New) CSS techniques
				</li>
				<li>
					WebGL
				</li>
				<li>
					GSAP
				</li>
				<li>
					Modernizing native tech stacks
				</li>
			</ul>
		</div>
	</details>
	<details style="--rotation: 4deg">
		<summary>
			<h1>Speaking</h1>
			<svg viewBox="0 0 329 195" fill="none" xmlns="http://www.w3.org/2000/svg">
				<rect x="110.85" y="15" width="105" height="165" fill="#111111" />
				<rect x="95.8499" y="30" width="135" height="135" fill="#111111" />
				<rect x="80.8499" y="45" width="165" height="105" fill="#111111" />
				<rect x="65.8499" y="75" width="195" height="45" fill="#111111" />
				<rect x="140.85" width="45" height="195" fill="#111111" />
				<path d="M125.85 45V30H155.85V15H170.85V30H200.85V45H215.85V60H230.85V90H245.85V105H230.85V135H215.85V150H200.85V165H170.85V180H155.85V165H125.85V150H110.85V135H95.8499V105H80.8499V90H95.8499V60H110.85V45H125.85Z" fill="#E2FC91" />
				<rect x="44.0559" y="88.0706" width="30" height="15" transform="rotate(-11.7568 44.0559 88.0706)" fill="#111111" />
				<rect x="30.7969" y="97.9802" width="15" height="15" transform="rotate(-11.7568 30.7969 97.9802)" fill="#111111" />
				<rect x="17.7417" y="108.869" width="15" height="15" transform="rotate(-11.7568 17.7417 108.869)" fill="#111111" />
				<rect x="282.405" y="45.6143" width="15" height="15" transform="rotate(-11.7568 282.405 45.6143)" fill="#111111" />
				<rect x="234.965" y="48.3376" width="47" height="15" transform="rotate(-11.7568 234.965 48.3376)" fill="#111111" />
				<rect x="20.7981" y="123.554" width="15" height="30" transform="rotate(-11.7568 20.7981 123.554)" fill="#111111" />
				<rect x="286.888" y="67.1526" width="15" height="30" transform="rotate(-11.7568 286.888 67.1526)" fill="#111111" />
				<rect x="38.5398" y="135.183" width="15" height="30" transform="rotate(-11.7568 38.5398 135.183)" fill="#111111" />
				<rect x="275.463" y="85.8733" width="15" height="30" transform="rotate(-11.7568 275.463 85.8733)" fill="#111111" />
				<rect x="56.2815" y="146.812" width="30" height="15" transform="rotate(-11.7568 56.2815 146.812)" fill="#111111" />
				<rect x="249.149" y="106.671" width="30" height="15" transform="rotate(-11.7568 249.149 106.671)" fill="#111111" />
				<rect x="4.4827" y="118.778" width="15" height="15" transform="rotate(-11.7568 4.4827 118.778)" fill="#111111" />
				<rect x="4.4827" y="118.778" width="15" height="30" transform="rotate(-11.7568 4.4827 118.778)" fill="#111111" />
				<rect x="298.517" y="49.4109" width="15" height="30" transform="rotate(-11.7568 298.517 49.4109)" fill="#111111" />
				<rect x="74.0232" y="158.441" width="197" height="15" transform="rotate(-11.7568 74.0232 158.441)" fill="#111111" />
			</svg>

		</summary>
		<div class="back">
			<p>
				I talk about how I think we <em>should</em> build for the web, focussing on where design, code, and accessibility overlap.
			</p>
			<p>My talks are often about motion and interaction, but accessibility is also an essential topic. I currently speak a lot about how CSS and JavaScript shape the way users experience a site, and what happens when you let native tools do more of the heavy lifting.</p>
		</div>
	</details>
</section>

style.css

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");

* {
	box-sizing: border-box;
	margin: 0;
	font-weight: 400;
}

:root {
	--duration: 1s;
	--ease: cubic-bezier(0.34, 1.56, 0.64, 1);
}

body {
	background: #ececec;
	min-height: 100svh;
	align-content: center;
	font-family: "Instrument serif", "Times New Roman", serif;
}

h1 {
	font-size: max(3rem, 6vw);
	line-height: 1;
}

p {
	font-size: max(1rem, 2vw);
}

.cards {
	padding: 1rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	perspective: 1200px;
	@media (width < 1024px) {
		grid-template-columns: repeat(2, 1fr);
	}
	@media (width < 500px) {
		grid-template-columns: repeat(1, 1fr);
	}
}

details {
	pointer-events: none;
	position: relative;
	justify-self: center;
	transform-style: preserve-3d;
	width: 100%;
	@media (prefers-reduced-motion: no-preference) {
	&:hover {
		rotate: 0deg;
		svg {
			translate: -5% -5%;
		}
	}
		rotate: var(--rotation);
		transition: transform var(--duration) var(--ease), rotate 0.3s var(--ease);
	}
	&[open] {
		transform: rotateY(180deg);
	}
	&::details-content {
	@media (prefers-reduced-motion: no-preference) {
		transition: content-visibility var(--duration) ease-out allow-discrete;
	}
}
}

summary,
.back {
	aspect-ratio: 3/4;
	border: 5px solid #111;
	border-radius: 1rem;
	padding: 5%;
	width: 100%;
	backface-visibility: visible;
	background: #fff5ee;
}

summary {
	overflow: clip;
	position: relative;
	pointer-events: all;
	cursor: pointer;
	list-style: none;
	transform: translateZ(2px);
	svg {
		position: absolute;
		right: -10%;
		bottom: -4%;
		max-height: 40%;
		max-width: 80%;
		transform: rotate(-20deg);
		transition: translate 0.4s var(--ease);
	}
	&::-webkit-details-marker {
		display: none;
	}
}



.back {
	pointer-events: none;
	position: absolute;
	top: 0;
	transform: rotateY(180deg) translateZ(-1px);
	align-content: end;
	p:first-child {
		font-size: max(1.25rem, 2.5vw);
	}
	p + p {
		margin-top: 0.5em;
	}
	ul {
		margin-top: 0.5em;
		list-style-type: "";
		padding: 0;
		display: inline-flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		li {
			padding: 0.25em;
			border-radius: 0.25rem;
			font-family: "JetBrains Mono", monospace;
			font-size: 0.7rem;
			background: #111;
			color: #e2fc91;
		}
	}
}