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é

Animation de texte

Modèle de notation des étoiles animées

Formulaire de connexion HTML animé

HTML

CSS

JS

Recommandé

Animation de texte

Modèle de notation des étoiles animées

Formulaire de connexion HTML animé

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS