Webleb - UI Elements - Güvenli bir pastel dizin ile yapılmış kart dizini

HTML

<!DOCTYPE html>

<head>

<title>Basit Glassmorphism Kartlar</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

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

}

body {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: #0c0513;

overflow-x: hidden;

}

.container {

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

gap: 30px;

padding: 40px 20px;

}

.box {

position: relative;

width: 300px;

height: 400px;

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

border-radius: 20px;

display: flex;

justify-content: center;

align-items: center;

backdrop-filter: blur(5px);

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

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

transition: transform 0.5s;

}

.box:hover {

transform: translateY(-20px);

}

.box::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 50%;

height: 100%;

background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1));

transform: skewX(45deg) translateX(0);

transition: 0.5s;

border-radius: 20px;

}

.box:hover::before {

transform: skewX(45deg) translateX(200%);

}

.box:nth-child(1) {

background: linear-gradient(45deg, rgba(255, 0, 90, 0.1), rgba(255, 140, 0, 0.1));

border: 1px solid rgba(255, 140, 0, 0.3);

}

.box:nth-child(2) {

background: linear-gradient(45deg, rgba(0, 180, 255, 0.1), rgba(140, 0, 255, 0.1));

border: 1px solid rgba(140, 0, 255, 0.3);

}

.box:nth-child(3) {

background: linear-gradient(45deg, rgba(0, 255, 100, 0.1), rgba(0, 180, 255, 0.1));

border: 1px solid rgba(0, 180, 255, 0.3);

}

.content {

padding: 30px;

color: #fff;

text-align: center;

}

.content h2 {

font-size: 1.8em;

margin-bottom: 15px;

}

.content p {

font-size: 1em;

margin-bottom: 20px;

line-height: 1.4em;

}

.content a {

display: inline-block;

padding: 10px 20px;

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

color: #fff;

text-decoration: none;

border-radius: 20px;

font-weight: 500;

margin-top: 10px;

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

transition: 0.5s;

}

.content a:hover {

background: #fff;

color: #000;

}

</style>

</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

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

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

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

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

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

</div>

</body>

</html>

CSS

JS

Güvenli bir pastel dizin ile yapılmış kart dizini

Recommended