Webleb - Snippets de Código - Ficha de ficha feita com um índice pastel seguro

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>

Ficha de ficha feita com um índice pastel seguro

Recomendado

Botão de login

Exemplo de contêiner de animação CSS

HTML

CSS

JS

Recomendado

Botão de login

Exemplo de contêiner de animação CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS