Stile della carta

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

22 July 2025

Esempio di animazione della griglia CSS

2 March 2025

.card {
    border: 1px solid #2c2b3c;
    border-radius: 12px;
    overflow: hidden;
    background-color: #1f1d2e;
    transition: border 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.card:hover {
    border: 1px solid #a855f7;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transform: translateY(-4px);
}

.card:hover .title {
    color: #a855f7;
}

.imageWrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #2a283d;
}

.image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content {
    padding: 16px;
}

.title {
    font-size: 1rem;
    font-weight: 600;
    color: #f1f1f1;
    margin-bottom: 8px;
    line-height: 1.4;
}

.meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: #b0adc0;
    align-items: center;
}

.views {
    display: flex;
    align-items: center;
    gap: 4px;
}

.author {
    font-style: italic;
    color: #8a87a0;
}

Stile della carta

Consigliato

Carta 3D

Esempio di animazione della griglia CSS

Carta capovolta

HTML

CSS

JS

Consigliato

Carta 3D

Esempio di animazione della griglia CSS

Carta capovolta

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS