Webleb - Extraits de Code - Radios à mise au point coulissante

HTML

CSS

* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--hue: 223;
	--bg: hsl(var(--hue),90%,90%);
	--fg: hsl(var(--hue),90%,10%);
	--primary: hsl(var(--hue),90%,50%);
	--trans-dur: 0.3s;
	--trans-timing: cubic-bezier(0.65,0,0.35,1);
	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));
}
body,
input {
	color: var(--fg);
	font: 1em/1.5 "DM Sans", sans-serif;
}
body {
	background-color: var(--bg);
	display: flex;
	height: 100vh;
	transition:
		background-color var(--trans-dur),
		color var(--trans-dur);
}
main {
	margin: auto;
	padding: 1.5em 0;
	width: 100%;
}
form {
	margin: auto;
	max-width: 20em;
	position: relative;
	width: calc(100% - 3em);
}
label,
input[type="radio"] {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
label {
	background-color: hsla(0,0%,100%,0);
	border-radius: 0.75em;
	display: flex;
	align-items: center;
	padding: 1.5em;
	transition: background-color var(--trans-dur);
}
input[type="radio"] {
	background-color: hsl(0,0%,100%);
	border-radius: 50%;
	box-shadow:
		0 0 0 0.0625em hsl(var(--hue),90%,80%),
		0 0.125em 0.125em 0.0625em hsla(var(--hue),90%,10%,0.3);
	flex-shrink: 0;
	margin-inline-end: 1em;
	outline: transparent;
	position: relative;
	width: 1.5em;
	height: 1.5em;
	transition:
		background-color var(--trans-dur),
		box-shadow var(--trans-dur);
	-webkit-appearance: none;
	appearance: none;
}
input[type="radio"]:before,
input[type="radio"]:after {
	border-radius: 50%;
	content: "";
	display: block;
	position: absolute;
	transform: scale(0);
	transition: transform var(--trans-dur) var(--trans-timing);
}
input[type="radio"]:before {
	box-shadow:
		0 0 0 0.5em var(--primary) inset,
		0 0 0 0.0625em var(--primary);
	top: -0.0625em;
	left: -0.0625em;
	width: calc(100% + 0.125em);
	height: calc(100% + 0.125em);
}
input[type="radio"]:after {
	background-color: hsl(0,0%,100%);
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
}
input[type="radio"]:checked:before,
input[type="radio"]:checked:after {
	transform: scale(1);
}
label:has(input[type="radio"]:checked),
label:has(input[type="radio"]:not(:checked)):hover {
	background-color: hsla(0,0%,100%,0.5);
}
.selection {
	border-radius: 0.75em;
	box-shadow: 0 0 0 0.125em var(--primary) inset;
	display: none;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4.5em;
	transition: transform var(--trans-dur) var(--trans-timing);
}
label:has(input[type="radio"]:checked) ~ .selection {
	animation: fade-in var(--trans-dur) var(--trans-timing);
	display: inherit;
}
label:nth-of-type(2):has(input[type="radio"]:checked) ~ .selection {
	transform: translateY(100%);
}
label:nth-of-type(3):has(input[type="radio"]:checked) ~ .selection {
	transform: translateY(200%);
}
.truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),90%,10%);
		--fg: hsl(var(--hue),90%,90%);
	}
	label {
		background-color: hsla(var(--hue),90%,30%,0);
	}
	label:has(input[type="radio"]:checked),
	label:has(input[type="radio"]:not(:checked)):hover {
		background-color: hsla(var(--hue),90%,30%,0.5);
	}
	input[type="radio"] {
		background-color: hsl(var(--hue),90%,30%);
		box-shadow:
			0 0 0 0.0625em hsl(var(--hue),90%,50%),
			0 0.125em 0.125em 0.0625em hsla(var(--hue),90%,10%,0.3);
	}
}

/* Animations */
@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

Radios à mise au point coulissante

Recommandé

sœur solaire

Barre de recherche CSS

Écran TV HTML avec YouTube Embed et effet Glitch

HTML

CSS

JS

Recommandé

sœur solaire

Barre de recherche CSS

Écran TV HTML avec YouTube Embed et effet Glitch

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS