WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Um código por ytr3d3
1067
ytr3d3
Abrir no Editor
Publique Seu Código
Recomendado
11 June 2025
Um código de Mete
13 June 2025
Um Código por ashimadison8
28 March 2025
Um código por mcdonge13
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) */