Code CSS pour cartes animées

Ouvrir dans l'éditeur Publiez votre code

Recommandé

8 December 2024

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Code Menu</title>
  <link rel="stylesheet" href="/css/styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
  integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <label for="theme">
      <input class="sr-only" type="checkbox" id="theme" />
      <i class="fa-solid fa-lightbulb"></i>
    </label>
    <main>
      <article>
        <div class="header">
          <h2><span>Web</span><span>Leb</span></h2>
          <p>
            From beginner-level to advanced, copy the code you need.
          </p>
          <a href="https://www.web-leb.com/" target="_blank">web-leb.com</a>
        </div>
        <div class="window">
          <div class="scene">
            <ul class="grid">
              <li>
                <div class="item">
                  <div class="item_icon">
                    <i class="fa-solid fa-display"></i>
                  </div>
                  <div class="item_text">Landing Pages</div>
                </div>
              </li>
              <li>
                <div class="item">
                  <div class="item_icon">
                    <i class="fa-solid fa-font"></i>
                  </div>
                  <div class="item_text">Text Animations</div>
                </div>
              </li>
              <li>
                <div class="item">
                  <div class="item_icon">
                    <i class="fa-solid fa-list"></i>
                  </div>
                  <div class="item_text">Login Forms</div>
                </div>
              </li>
              <li>
                <div class="item">
                  <div class="item_icon">
                    <i class="fa-solid fa-gamepad"></i>
                  </div>
                  <div class="item_text">JavaScript Games</div>
                </div>
              </li>
              <li>
                <div class="item">
                  <div class="item_icon">
                    <i class="fa-solid fa-toggle-on"></i>
                  </div>
                  <div class="item_text">Buttons</div>
                </div>
              </li>
              <li>
                <div class="item">
                  <div class="item_icon">
                    <i class="fa-solid fa-bars"></i>
                  </div>
                  <div class="item_text">Navigation Bars</div>
                </div>
              </li>
              <li>
                <div class="item">
                  <div class="item_icon">
                    <i class="fa-solid fa-plus"></i>
                  </div>
                  <div class="item_text">Other Codes</div>
                </div>
              </li>
              <li>
                <div class="item">
                  <div class="item_icon">
                    <i class="fa-solid fa-user-check"></i>
                  </div>
                  <div class="item_text">Register Forms</div>
                </div>
              </li>
              <li>
                <div class="item">
                  <div class="item_icon">
                    <i class="fa-solid fa-angles-right"></i>
                  </div>
                  <div class="item_text">Card Sliders</div>
                </div>
              </li>
              <li>
                <div class="item">
                  <div class="item_icon">
                    <i class="fa-solid fa-bolt"></i>
                  </div>
                  <div class="item_text">Bootstrap Elements</div>
                </div>
              </li>
              <li>
                <div class="item">
                  <div class="item_icon">
                    <i class="fa-solid fa-spinner"></i>
                  </div>
                  <div class="item_text">CSS Loading Animation</div>
                </div>
              </li>
              <li>
                <div class="item">
                  <div class="item_icon">
                    <i class="fa-solid fa-share-nodes"></i>
                  </div>
                  <div class="item_text">Social Menus</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </article>
    </main>
</body>
</html>

CSS

@font-face {
  font-family: "Geist Sans";
  src: url("https://assets.codepen.io/605876/GeistVF.ttf") format("truetype");
}

*,
*:after,
*:before {
	box-sizing: border-box;
}

:root {
	--speed: 8s;
	--transition: 0.15s;
}

body {
	display: grid;
	place-items: center;
	min-height: 100vh;
	color: hsl(0 0% 10%);
	font-family: "Geist Sans", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
	background-image:
		radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 0.15) 0px, transparent 0%), 
    radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 0.15) 0px, transparent 50%),
    radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 0.15) 0px, transparent 50%),
    radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 0.15) 0px, transparent 50%),
    radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 0.15) 0px, transparent 50%),
    radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 0.15) 0px, transparent 50%),
    radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 0.15) 0px, transparent 50%);
	background-color: hsl(0 0% 100%);
	font-weight: 80;
	transition: background-color 0.25s, color 0.25s;
  overflow: hidden;
  font-size: 16px;;
}

main {
  padding: 2rem 0;
  width: 100%;
}

:root:has(#theme:checked) :is(body, .controls, .item) {
	background-color: hsl(0 0% 10%);
	color: hsl(0 0% 100%);
	border-color: hsl(0 0% 25%);
}
:root:has(#theme:checked) article {
	background-color: hsl(0 0% 10%);
	color: hsl(0 0% 100%);
	border-color: hsl(0 0% 25%);
	box-shadow: 0 10px 20px -5px hsl(0 0% 0% / 0.5);
}
:root:has(#theme:checked) .item {
	background-color: black;
}
:root:has(#theme:checked) li::before {
	background-color: black;
}

article {
	padding: 2rem;
  margin: 0 auto;
	width: 100%;
	box-shadow: 0 10px 20px -5px hsl(0 0% 50% / 0.5);
	border: 1px solid hsl(0 0% 90%);
	border-radius: 6px;
	background: hsl(0 0% 100%);
	resize: horizontal;
	overflow: hidden;
	max-width: min(calc(600px + 8rem), calc(100vw - 2rem));
	min-width: 340px;
	container-type: inline-size;
	transition: background-color 0.25s, color 0.25s, border 0.25s, box-shadow 0.25s;
}
h2 {
	display: flex;
	gap: 0.25ch;
	font-size: clamp(1.5rem, 4cqi + 1rem, 3rem);
	font-weight: 160;
	margin: 0;
	grid-column: 1 / -1;
}

h2 span:last-of-type {
	display: inline-block;
	background: linear-gradient(to right, #9333ea, #db2777, #9333ea) 0 0 / 400% 100% no-repeat;
	background-clip: text;
	color: transparent;
	animation: shade 4s infinite linear;
}

@keyframes shade {
	to {
		background-position: 100% 0;
	}
}

.header {
	display: grid;
	grid-template: auto 1fr / 6fr 4fr;
	gap: 1rem;
	margin-bottom: 2rem;
	transition: opacity 0.5s;
}

article a {
	align-self: start;
	text-decoration: none;
	justify-self: end;
	border-radius: 100px;
	padding: 0.5rem 1.5rem;
	border: 0;
	color: hsl(0 0% 100%);
	font-weight: 120;
	cursor: pointer;
	background: linear-gradient(to right, #9333ea, #db2777) 0 0 / 200% 100% no-repeat;
	transition: background-position 0.15s;
}

article a:is(:hover, :focus-visible) {
	background-position: 100% 0;
}

p {
	margin: 0;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

[for=theme] {
	width: 48px;
	aspect-ratio: 1;
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	display: grid;
	place-items: center;
}

[for=theme] svg {
	width: 75%;
}

#theme + svg path:first-of-type,
#theme:checked + svg path:last-of-type {
	opacity: 0;
}
#theme:checked + svg path:first-of-type {
	opacity: 1;
}

label, input {
	accent-color: #db2777;
	cursor: pointer;
}

/*	border: 2px solid red;*/
.window {
	height: 250px;
	container-type: inline-size;
	transform-style: preserve-3d;
	width: 100%;
	outline: 4px dashed transparent;
	transition: outline 0.5s;
}

.scene {
	--buff: 3rem;
	height: 100%;
	width: 100%;
	mask:
		linear-gradient(transparent, white var(--buff) calc(100% - var(--buff)), transparent),
		linear-gradient(90deg, transparent, white var(--buff) calc(100% - var(--buff)), transparent);
	mask-composite: intersect;
}

.grid {
	--count: 6; 
	--inset: 0;
	--outset: 2.5;
	height: 100%;
	width: 100%;
	margin: 0;
	list-style-type: none;
	position: relative;
	display: grid;
	padding: 0 1rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 2rem;
	transition: transform 0.5s;
	/*	3D translation */
	transform:
		rotateX(calc(var(--rotate, 0) * 20deg))
		rotateZ(calc(var(--rotate, 0) * -20deg))
		skewX(calc(var(--rotate, 0) * 20deg));
}

:root:has(#dimension:checked) .grid {
	--rotate: 1;
}

li {
	min-height: 60px;
	transform-style: preserve-3d;
	width: 100%;
	z-index: calc(1 + var(--active));
}
li::before {
	content: "";
	position: absolute;
	inset: 4px 4px -2px -2px;
	border-radius: 6px;
	background: hsl(0 0% 0% / 0.1);
	filter: blur(calc(var(--active, 0) * 8px));
	z-index: -1;
	transition: scale var(--transition), opacity var(--transition), translate var(--transition), filter var(--transition);
	transform-origin: 50% 0;
	scale: 1 calc(1 + (var(--active, 0) * 0.05));
	--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
}

.grid:hover li {
	animation-play-state: paused;
}

.grid {
	transform-style: preserve-3d;
	gap: 1rem;
}

.item {
	align-items: center;
	background: hsl(0 0% 100%);
	border: 1px solid hsl(0 0% 90%);
	color: hsl(0 0% 10%);
	border-radius: 6px;
	cursor: pointer;
	display: flex;
	gap: 1rem;
	height: 100%;
	justify-content: start;
	overflow: hidden;
	padding: 1.25rem;
	text-align: center;
	width: 100%;
	transition: transform var(--transition), scale var(--transition), background-color 0.25s, color 0.25s, border 0.25s, box-shadow 0.25s;;
	scale: calc(1 + (var(--active, 0) * 0.05));
	transform: translate3d(0, 0, calc(var(--active, 0) * 24px));
}
.item_icon {
	width: 24px;
	color: rgb(124, 58, 237);
}
.item_text {
	flex: 1;
	text-align: center;
}

li:nth-of-type(1) { --index: 0; }
li:nth-of-type(2) { --index: 0; }
li:nth-of-type(3) { --index: 1; }
li:nth-of-type(4) { --index: 1; }
li:nth-of-type(5) { --index: 2; }
li:nth-of-type(6) { --index: 2; }
li:nth-of-type(7) { --index: 3; }
li:nth-of-type(8) { --index: 3; }
li:nth-of-type(9) { --index: 4; }
li:nth-of-type(10) { --index: 4; }
li:nth-of-type(11) { --index: 5; }
li:nth-of-type(12) { --index: 5; }

@container (width < 400px) {
	.header {
		grid-template: auto 1fr / 1fr;
	}
	.header a {
		justify-self: start;
	}
	.grid {
		--count: 12;
		--inset: 0;
		--outset: 3;
		grid-template-columns: 1fr;
	}

li:nth-of-type(1) { --index: 0; }
	li:nth-of-type(2) { --index: 1; }
	li:nth-of-type(3) { --index: 2; }
	li:nth-of-type(4) { --index: 3; }
	li:nth-of-type(5) { --index: 4; }
	li:nth-of-type(6) { --index: 5; }
	li:nth-of-type(7) { --index: 6; }
	li:nth-of-type(8) { --index: 7; }
	li:nth-of-type(9) { --index: 8; }
	li:nth-of-type(10) { --index: 9; }
	li:nth-of-type(11) { --index: 10; }
	li:nth-of-type(12) { --index: 11; }

}

@media(prefers-reduced-motion: no-preference) {
	.grid {
		gap: 0 2rem;
	}

li {
		--duration: calc(var(--speed) * 1);
		--delay: calc((var(--duration) / var(--count)) * (var(--index, 0) - 8));
		animation: slide var(--duration) var(--delay) infinite linear;
		translate: 0% calc(((var(--count) - var(--index)) + var(--inset, 0)) * 100%);
	}
	li:hover {
		--active: 1;
	}
	@keyframes slide {
		100% {
			translate: 0% calc(calc((var(--index) + var(--outset, 0)) * -100%));
		}
	}

}

Code CSS pour cartes animées

Recommandé

Un code par smartfunction186

Un code de Metehan

Un code par creativearray554

HTML

CSS

JS

Recommandé

Un code par smartfunction186

Un code de Metehan

Un code par creativearray554

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS