Disposition de carte CSS avec arrière-plan dégradé

Ouvrir dans l'éditeur Publiez votre code

Recommandé

21 June 2024

Formulaire en plusieurs étapes avec barre de progression utilisant jQuery et CSS3

HTML

<main>
	<h1>Lorem Ipsum</h1>
	<p class="subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

<div class="cards-container">
		<div class="card" data-rotation-factor="2">
			<div class="card-content">
				<h2>Card title</h2>
				<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus, qui! Distinctio adipisci odio molestiae quasi.</p>
				<div class="card-footer">
					<button class="card-button">Info CTA</button>
					<div class="card-icon">→</div>
				</div>
			</div>%
		</div>

<div class="card" data-rotation-factor="2">
			<div class="card-content">
				<h2>Card title</h2>
				<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus, qui! Distinctio adipisci odio molestiae quasi.</p>
				<div class="card-footer">
					<button class="card-button">Info CTA</button>
					<div class="card-icon">→</div>
				</div>
			</div>
		</div>

CSS

:root {
	--color-bg: #050505;
	--color-text: #ffffff;
	--color-primary: #ff3366;
	--color-secondary: #3366ff;
	--color-tertiary: #33ddff;
	--color-accent: #ffcc00;
	--card-radius: 16px;
	--card-bg: rgba(255, 255, 255, 0.03);
	--card-border: rgba(255, 255, 255, 0.1);
	--card-shadow: 0 15px 30px -12px rgba(0, 0, 0, 0.5);
	--transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
	background-color: var(--color-bg);
	color: var(--color-text);
	min-height: 100vh;
	overflow-x: hidden;
	line-height: 1.5;
}

.background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	overflow: hidden;
}

.gradient-blob {
	position: absolute;
	border-radius: 100%;
	filter: blur(40px);
	opacity: 0.3;
	animation: float 20s infinite alternate ease-in-out;
}

.gradient-blob:nth-child(1) {
	background: linear-gradient(
		to right,
		var(--color-primary),
		var(--color-secondary)
	);
	width: 150vw;
	height: 150vw;
	top: -100%;
	left: -25%;
	animation-delay: 0s;
}

.gradient-blob:nth-child(2) {
	background: linear-gradient(
		to right,
		var(--color-tertiary),
		var(--color-secondary)
	);
	width: 150vw;
	height: 150vw;
	bottom: -100%;
	right: -25%;
	animation-delay: -5s;
}

.gradient-blob:nth-child(3) {
	background: linear-gradient(
		to right,
		var(--color-accent),
		var(--color-primary)
	);
	width: 100vw;
	height: 100vw;
	top: 30%;
	left: -50%;
	animation-delay: -10s;
}

@keyframes float {
	0% {
		transform: translate(0, 0) scale(1);
	}
	50% {
		transform: translate(2%, 2%) scale(1.02);
	}
	100% {
		transform: translate(-2%, -2%) scale(0.98);
	}
}

main {
	width: 100%;
	padding: 2rem 1rem;
	position: relative;
	z-index: 1;
}

h1 {
	font-size: 2.5rem;
	font-weight: 800;
	margin-bottom: 0.5rem;
	line-height: 1.1;
	background: linear-gradient(
		to right,
		var(--color-text),
		rgba(255, 255, 255, 0.7)
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
}

.subtitle {
	font-size: 1rem;
	text-align: center;
	margin-bottom: 3rem;
	opacity: 0.8;
}

.cards-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	perspective: 1000px;
}

.card {
	position: relative;
	height: 320px;
	border-radius: var(--card-radius);
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	box-shadow: var(--card-shadow);
	transform-style: preserve-3d;
	transition: var(--transition);
	cursor: pointer;
	overflow: hidden;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		circle at var(--x, 50%) var(--y, 50%),
		rgba(255, 255, 255, 0.1) 0%,
		transparent 50%
	);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.card:hover::before {
	opacity: 1;
}

.card-content {
	position: relative;
	height: 100%;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	transform-style: preserve-3d;
	transition: transform 0.5s ease;
}

.card h2 {
	font-size: 1.5rem;
	margin-bottom: 0.75rem;
	font-weight: 700;
	transform: translateZ(20px);
	background: linear-gradient(
		to right,
		var(--color-text),
		rgba(255, 255, 255, 0.8)
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.card p {
	margin-bottom: 1.5rem;
	font-size: 0.9rem;
	opacity: 0.8;
	transform: translateZ(15px);
}

.card-footer {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transform: translateZ(15px);
}

.card-button {
	padding: 0.6rem 1.2rem;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 100px;
	color: var(--color-text);
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	transition: all 0.3s ease;
	backdrop-filter: blur(5px);
}

.card-button:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: translateY(-2px);
}

.card-icon {
	font-size: 1.25rem;
	opacity: 0.7;
	transition: transform 0.3s ease;
}

.card:hover .card-icon {
	transform: translateX(5px);
	opacity: 1;
}

@media (min-width: 640px) {
	main {
		padding: 5vh 2rem;
	}

h1 {
		font-size: 3.5rem;
		margin-bottom: 0.75rem;
	}

.subtitle {
		font-size: 1.1rem;
		margin-bottom: 4rem;
	}

.card {
		height: 350px;
	}

.card-content {
		padding: 1.75rem;
	}

.card-tag {
		font-size: 0.75rem;
		padding: 0.5rem 1rem;
		margin-bottom: 1.25rem;
	}

.card h2 {
		font-size: 1.6rem;
	}

.card p {
		font-size: 1rem;
	}

.card-button {
		padding: 0.7rem 1.4rem;
		font-size: 0.9rem;
	}

.gradient-blob {
		filter: blur(50px);
		opacity: 0.35;
	}
}

@media (min-width: 768px) {
	.cards-container {
		grid-template-columns: repeat(2, 1fr);
	}

.gradient-blob {
		filter: blur(60px);
		opacity: 0.4;
	}

.gradient-blob:nth-child(1) {
		width: 120vw;
		height: 120vw;
		top: -70%;
		left: -20%;
	}

.gradient-blob:nth-child(2) {
		width: 120vw;
		height: 120vw;
		bottom: -70%;
		right: -20%;
	}

.gradient-blob:nth-child(3) {
		width: 80vw;
		height: 80vw;
		top: 30%;
		left: -30%;
	}

.card-content {
		padding: 2rem;
	}

.card h2 {
		transform: translateZ(25px);
	}

.card-tag {
		transform: translateZ(20px);
	}

.card p {
		transform: translateZ(20px);
	}
}

@media (min-width: 1024px) {
	main {
		max-width: 1200px;
		margin: 0 auto;
		padding: 10vh 2rem;
	}

h1 {
		font-size: 4.5rem;
	}

.subtitle {
		font-size: 1.25rem;
	}

.cards-container {
		grid-template-columns: repeat(3, 1fr);
	}

.card {
		height: 400px;
		border-radius: 24px;
	}

.gradient-blob {
		filter: blur(80px);
		opacity: 0.5;
	}

.gradient-blob:nth-child(1) {
		width: 60vw;
		height: 60vw;
		top: -20%;
		left: -10%;
	}

.gradient-blob:nth-child(2) {
		width: 60vw;
		height: 60vw;
		bottom: -30%;
		right: -10%;
	}

.gradient-blob:nth-child(3) {
		width: 40vw;
		height: 40vw;
		top: 40%;
		left: 30%;
	}

.card h2 {
		font-size: 1.75rem;
		transform: translateZ(30px);
	}

.card-tag {
		transform: translateZ(20px);
	}

.card p {
		transform: translateZ(25px);
	}

.card-footer {
		transform: translateZ(20px);
	}
}

JS

document.addEventListener("DOMContentLoaded", () => {
	const cards = document.querySelectorAll(".card");
	const isTouchDevice = "ontouchstart" in window || navigator.maxTouchPoints > 0;

cards.forEach((card) => {
		const content = card.querySelector(".card-content");
		const rotationFactor =
			parseFloat(card.getAttribute("data-rotation-factor")) || 2;

if (!isTouchDevice) {
			card.addEventListener("mousemove", (e) => {
				const rect = card.getBoundingClientRect();
				const x = e.clientX - rect.left;
				const y = e.clientY - rect.top;

const centerX = rect.width / 2;
				const centerY = rect.height / 2;
				const rotateY = (rotationFactor * (x - centerX)) / centerX;
				const rotateX = (-rotationFactor * (y - centerY)) / centerY;

content.style.transform = `
          rotateX(${rotateX}deg) 
          rotateY(${rotateY}deg)
        `;

card.style.setProperty("--x", `${(x / rect.width) * 100}%`);
				card.style.setProperty("--y", `${(y / rect.height) * 100}%`);
			});

card.addEventListener("mouseleave", () => {
				content.style.transform = "rotateX(0) rotateY(0)";

content.style.transition = "transform 0.5s ease";
				setTimeout(() => {
					content.style.transition = "";
				}, 500);
			});
		}

const randomDelay = Math.random() * 2;
		card.style.animation = `cardFloat 4s infinite alternate ease-in-out ${randomDelay}s`;
	});

const buttons = document.querySelectorAll(".card-button");
	buttons.forEach((button) => {
		button.addEventListener("click", (e) => {
			e.stopPropagation();

const ripple = document.createElement("span");
			ripple.classList.add("ripple");
			button.appendChild(ripple);

const rect = button.getBoundingClientRect();
			const size = Math.max(rect.width, rect.height) * 2;

ripple.style.width = ripple.style.height = `${size}px`;
			ripple.style.left = `${e.clientX - rect.left - size / 2}px`;
			ripple.style.top = `${e.clientY - rect.top - size / 2}px`;

ripple.classList.add("active");

setTimeout(() => {
				ripple.remove();
			}, 500);
		});
	});

Disposition de carte CSS avec arrière-plan dégradé

Recommandé

Bouton d'autodestruction

Style de carte

Formulaire en plusieurs étapes avec barre de progression utilisant jQuery et CSS3

HTML

CSS

JS

Recommandé

Bouton d'autodestruction

Style de carte

Formulaire en plusieurs étapes avec barre de progression utilisant jQuery et CSS3

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS