WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un code par ytr3d3
937
ytr3d3
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
12 January 2025
Un code de Mikeykun
13 October 2025
Exemple de code HTML pour le jeu Snake
10 December 2024
Un code par staticbug455
HTML
Copy
CodePen - Checkbox card
Category A
Motorcycles
Category B
Cars and ATVs
Category C
Large goods vehicle
Category D
Buses
Category T
Tractors and SMV
Other
Additional categories
CSS
Copy
.card { --background: #fff; --background-checkbox: #0082ff; --background-image: #fff, rgba(0, 107, 175, 0.2); --text-color: #666; --text-headline: #000; --card-shadow: #0082ff; --card-height: 190px; --card-width: 190px; --card-radius: 12px; --header-height: 47px; --blend-mode: overlay; --transition: 0.15s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .card:nth-child(odd) .card__body-cover-image { --x-y1: 100% 90%; --x-y2: 67% 83%; --x-y3: 33% 90%; --x-y4: 0% 85%; } .card:nth-child(even) .card__body-cover-image { --x-y1: 100% 85%; --x-y2: 73% 93%; --x-y3: 25% 85%; --x-y4: 0% 90%; } .card__input { position: absolute; display: block; outline: none; border: none; background: none; padding: 0; margin: 0; -webkit-appearance: none; } .card__input:checked ~ .card__body { --shadow: 0 0 0 3px var(--card-shadow); } .card__input:checked ~ .card__body .card__body-cover-checkbox { --check-bg: var(--background-checkbox); --check-border: #fff; --check-scale: 1; --check-opacity: 1; } .card__input:checked ~ .card__body .card__body-cover-checkbox--svg { --stroke-color: #fff; --stroke-dashoffset: 0; } .card__input:checked ~ .card__body .card__body-cover:after { --opacity-bg: 0; } .card__input:checked ~ .card__body .card__body-cover-image { --filter-bg: grayscale(0); } .card__input:disabled ~ .card__body { cursor: not-allowed; opacity: 0.5; } .card__input:disabled ~ .card__body:active { --scale: 1; } .card__body { display: grid; grid-auto-rows: calc(var(--card-height) - var(--header-height)) auto; background: var(--background); height: var(--card-height); width: var(--card-width); border-radius: var(--card-radius); overflow: hidden; position: relative; cursor: pointer; box-shadow: var(--shadow, 0 4px 4px 0 rgba(0, 0, 0, 0.02)); transition: transform var(--transition), box-shadow var(--transition); transform: scale(var(--scale, 1)) translateZ(0); } .card__body:active { --scale: 0.96; } .card__body-cover { --c-border: var(--card-radius) var(--card-radius) 0 0; --c-width: 100%; --c-height: 100%; position: relative; overflow: hidden; } .card__body-cover:after { content: ""; position: absolute; left: 0; top: 0; width: var(--c-width); height: var(--c-height); border-radius: var(--c-border); background: linear-gradient(to bottom right, var(--background-image)); mix-blend-mode: var(--blend-mode); opacity: var(--opacity-bg, 1); transition: opacity var(--transition) linear; } .card__body-cover-image { width: var(--c-width); height: var(--c-height); -o-object-fit: cover; object-fit: cover; border-radius: var(--c-border); filter: var(--filter-bg, grayscale(1)); -webkit-clip-path: polygon(0% 0%, 100% 0%, var(--x-y1, 100% 90%), var(--x-y2, 67% 83%), var(--x-y3, 33% 90%), var(--x-y4, 0% 85%)); clip-path: polygon(0% 0%, 100% 0%, var(--x-y1, 100% 90%), var(--x-y2, 67% 83%), var(--x-y3, 33% 90%), var(--x-y4, 0% 85%)); } .card__body-cover-checkbox { background: var(--check-bg, var(--background-checkbox)); border: 2px solid var(--check-border, #fff); position: absolute; right: 10px; top: 10px; z-index: 1; width: 28px; height: 28px; border-radius: 50%; opacity: var(--check-opacity, 0); transition: transform var(--transition), opacity calc(var(--transition) * 1.2) linear; transform: scale(var(--check-scale, 0)); } .card__body-cover-checkbox--svg { width: 13px; height: 11px; display: inline-block; vertical-align: top; fill: none; margin: 7px 0 0 5px; stroke: var(--stroke-color, #fff); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16px; stroke-dashoffset: var(--stroke-dashoffset, 16px); transition: stroke-dashoffset 0.4s ease var(--transition); } .card__body-header { height: var(--header-height); background: var(--background); padding: 0 10px 10px 10px; } .card__body-header-title { color: var(--text-headline); font-weight: 700; margin-bottom: 8px; } .card__body-header-subtitle { color: var(--text-color); font-weight: 500; font-size: 13px; } html { box-sizing: border-box; -webkit-font-smoothing: antialiased; } * { box-sizing: inherit; } *:after { box-sizing: inherit; } body { min-height: 100vh; display: flex; font-family: "Inter", Arial; justify-content: center; align-items: center; background: #222222; color: #000; } body .socials { position: fixed; display: flex; right: 20px; bottom: 20px; } body .socials > a { display: block; height: 28px; margin-left: 15px; } body .socials > a.dribbble img { height: 28px; } body .socials > a.twitter svg { width: 32px; height: 32px; fill: #1da1f2; } body .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */