Webleb - HTML UI Elements - Design e perfezione della carta

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>

Design e perfezione della carta

Consigliato

Un codice di pivete290

Un codice di NotYoEA

Un codice di ytr3d3

HTML

CSS

JS

Consigliato

Un codice di pivete290

Un codice di NotYoEA

Un codice di ytr3d3

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS