Webleb - fragmentos de código - Diseño y perfección de tarjetas.

HTML

<!DOCTYPE html>

<head>

<title>Enhanced Glassmorphism Cards</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Poppins', sans-serif;

}

body {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: #0c0513;

background: linear-gradient(135deg, #0c0513 0%, #1a1035 100%);

overflow-x: hidden;

}

body::before {

content: '';

position: absolute;

top: -50%;

left: -50%;

width: 200%;

height: 200%;

background: radial-gradient(circle, rgba(255, 0, 150, 0.1) 0%, transparent 20%),

radial-gradient(circle at 80% 20%, rgba(0, 180, 255, 0.1) 0%, transparent 20%),

radial-gradient(circle at 20% 80%, rgba(220, 90, 255, 0.1) 0%, transparent 20%);

animation: bgAnimation 15s linear infinite;

z-index: 0;

}

@keyframes bgAnimation {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

.container {

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

gap: 50px;

padding: 50px 20px;

position: relative;

z-index: 1;

}

.card {

position: relative;

width: 350px;

height: 450px;

display: flex;

justify-content: center;

align-items: center;

transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);

perspective: 1000px;

}

.card:hover {

transform: translateY(-20px);

}

.card::before,

.card::after {

content: '';

position: absolute;

width: 90%;

height: 100%;

border-radius: 20px;

transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);

opacity: 0.7;

}

.card::before {

top: 0;

left: 10px;

background-position: 0 0;

filter: blur(20px);

z-index: -1;

transform: rotateY(10deg);

}

.card::after {

bottom: -10px;

right: 10px;

background-position: 100% 100%;

filter: blur(30px);

z-index: -2;

transform: rotateY(-10deg);

}

.card:hover::before {

opacity: 0.9;

width: 100%;

left: 0;

transform: rotateY(0);

}

.card:hover::after {

opacity: 0.9;

width: 100%;

right: 0;

transform: rotateY(0);

}

.card:nth-child(1)::before,

.card:nth-child(1)::after {

background: linear-gradient(145deg, #ff007a, #ff9a00);

}

.card:nth-child(2)::before,

.card:nth-child(2)::after {

background: linear-gradient(145deg, #00c6ff, #8e2de2);

}

.card:nth-child(3)::before,

.card:nth-child(3)::after {

background: linear-gradient(145deg, #00e676, #00c3ff);

}

.content {

position: relative;

width: 100%;

height: 100%;

padding: 40px 30px;

background: rgba(255, 255, 255, 0.05);

backdrop-filter: blur(10px);

border-radius: 20px;

border: 1px solid rgba(255, 255, 255, 0.1);

box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);

z-index: 1;

display: flex;

flex-direction: column;

justify-content: space-between;

overflow: hidden;

transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

.card:hover .content {

background: rgba(255, 255, 255, 0.1);

transform: scale(1.05);

}

.content::before {

content: '';

position: absolute;

top: -50%;

left: -50%;

width: 200%;

height: 200%;

background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);

z-index: -1;

transition: all 0.7s ease;

opacity: 0;

}

.card:hover .content::before {

opacity: 1;

animation: glowingLight 5s linear infinite;

}

@keyframes glowingLight {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

.content h2 {

font-size: 2.2em;

color: #fff;

margin-bottom: 20px;

position: relative;

padding-bottom: 15px;

font-weight: 700;

text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);

}

.content h2::after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 60px;

height: 3px;

background: #fff;

box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);

transition: width 0.5s ease;

}

.card:hover .content h2::after {

width: 100px;

}

.content p {

font-size: 1.1em;

color: rgba(255, 255, 255, 0.8);

margin-bottom: 20px;

line-height: 1.6em;

}

.content .btn {

display: inline-block;

padding: 12px 25px;

background: rgba(255, 255, 255, 0.1);

border: 1px solid rgba(255, 255, 255, 0.2);

border-radius: 30px;

color: #fff;

text-decoration: none;

font-weight: 600;

transition: all 0.5s ease;

position: relative;

overflow: hidden;

text-align: center;

}

.content .btn:hover {

background: #fff;

color: #000;

border-color: #fff;

transform: translateY(-5px);

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);

}

.content .btn::before {

content: '';

position: absolute;

top: 0;

left: -100%;

width: 100%;

height: 100%;

background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

transition: 0.5s;

}

.content .btn:hover::before {

left: 100%;

}

/* Floating particles */

.particle {

position: absolute;

width: 10px;

height: 10px;

background: rgba(255, 255, 255, 0.1);

border-radius: 50%;

z-index: -1;

}

@keyframes floatUp {

0% {

transform: translateY(0) rotate(0deg);

opacity: 0;

}

50% {

opacity: 1;

}

100% {

transform: translateY(-1000px) rotate(360deg);

opacity: 0;

}

</style>

</head>

<body>

<div>

<h2>Neon Dreams</h2>

<p>Keşfedilmemiş dünyalara adım atın ve neon ışıkların büyülü atmosferinde kendinizi kaybetmeye hazır olun. Sizi bekleyen gizemli maceralar.</p>

</div>

<a href="#" class="btn">Daha Fazla</a>

</div>

<div>

<h2>Crystal Void</h2>

<p>Kristal düzlemlerin arasında gezinin ve boyutlar arası yolculuğun tadını çıkarın. Sonsuz olasılıklar dünyasında kendinizi keşfedin.</p>

</div>

<a href="#" class="btn">Daha Fazla</a>

</div>

<div>

<h2>Emerald Echo</h2>

<p>Zümrüt yeşilinin tonlarında eko yapan sesler ve görüntülerle çevrili bu eşsiz deneyimde doğanın en saf halini keşfedin.</p>

</div>

<a href="#" class="btn">Daha Fazla</a>

</div>

// Create floating particles

function createParticles() {

const body = document.querySelector('body');

const particleCount = 30;

for (let i = 0; i < particleCount; i++) {

const particle = document.createElement('div');

particle.classList.add('particle');

// Random position

const posX = Math.floor(Math.random() * window.innerWidth);

const posY = Math.floor(Math.random() * window.innerHeight);

// Random size

const size = Math.random() * 5 + 3;

// Set styles

particle.style.width = `${size}px`;

particle.style.height = `${size}px`;

particle.style.left = `${posX}px`;

particle.style.top = `${posY}px`;

// Random floating animation

const animDuration = Math.random() * 15 + 15;

particle.style.animation = `floatUp ${animDuration}s linear infinite`;

particle.style.animationDelay = `${Math.random() * 15}s`;

// Add to body

body.appendChild(particle);

}

// Interactive card tilt effect

function addTiltEffect() {

const cards = document.querySelectorAll('.card');

cards.forEach(card => {

card.addEventListener('mousemove', (e) => {

const cardRect = card.getBoundingClientRect();

const x = e.clientX - cardRect.left;

const y = e.clientY - cardRect.top;

const centerX = cardRect.width / 2;

const centerY = cardRect.height / 2;

const rotateX = (y - centerY) / 10;

const rotateY = (centerX - x) / 10;

card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-20px)`;

});

card.addEventListener('mouseleave', () => {

card.style.transform = 'translateY(-20px)';

});

}

// Initialize

document.addEventListener('DOMContentLoaded', () => {

createParticles();

addTiltEffect();

});

</script>

</body>

</html>

CSS

JS

Diseño y perfección de tarjetas.

Recomendado