PRO Animirani Hero del in Glassmorphism dizajn

Dobrodošli na vrhu. Če ste tukaj, pomeni, da vas osnove ne zanimajo več. Ta predloga je zasnovana za tiste, ki želijo ustvariti vizualni vtis, ki si ga uporabniki zapomnijo.

Uporabili bomo 3D transformacije za naslov in Glassmorphism za vsebinski del. Posebnost tega modula je uporaba dinamičnih SVG vzorcev neposredno v CSS kodi, kar zagotavlja bliskovito nalaganje. Pripravite se, tukaj se CSS spremeni v pravo umetnost.

PRIMER

                        <!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Pro design</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<section class="hero">
    <h1 class="title">PRO DESIGN</h1>
    
    <div class="glass">
        <p>Dobrodošli v prihodnost spletnega oblikovanja. 
        Ta komponenta uporablja napredne CSS animacije in učinek motnega stekla.</p>
    </div>
</section>
</body>
</html>
        
                    

                        .hero {
    --title-fill: #06a3fe;
    --title-stroke: #0056b3;
    --glow-a: #87d5fe;
    --glow-b: #06a3fe;
    position: relative;
    display: grid;
    place-items: center;
    min-height: 25vh;
    padding: 2rem;
    background: #f0f2f5;
    color: black;
    overflow: hidden;
    text-align: center;
    border-radius: 20px;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.15;
    background-repeat: no-repeat;
    background-position: center;
    background-size: clamp(260px, 58vmin, 560px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%2306a3fe'/%3E%3Cstop offset='100%25' stop-color='%230056b3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='90' cy='110' r='34' fill='none' stroke='%230056b3' stroke-width='6'/%3E%3Ccircle cx='310' cy='90' r='22' fill='url(%23g)' stroke='%230056b3' stroke-width='4'/%3E%3Ccircle cx='320' cy='300' r='34' fill='none' stroke='%230056b3' stroke-width='6'/%3E%3Ccircle cx='100' cy='300' r='18' fill='%2306a3fe' stroke='%230056b3' stroke-width='4'/%3E%3Cpolygon points='200,40 230,92 170,92' fill='none' stroke='%230056b3' stroke-width='5'/%3E%3Cpolygon points='240,240 290,320 190,320' fill='url(%23g)' stroke='%230056b3' stroke-width='5' opacity='0.9'/%3E%3Cpath d='M40 360 L120 280 M280 60 L360 -20' stroke='%230056b3' stroke-width='6' stroke-linecap='round' opacity='0.7'/%3E%3C/svg%3E");
    animation: template_pro_float 16s ease-in-out infinite alternate;
}

.hero .title {
    position: relative;
    z-index: 2;
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(2rem, 8vh, 4rem);
    color: var(--title-fill);
    -webkit-text-stroke: 0.045em var(--title-stroke);
    animation: template_pro_wave 4.8s ease-in-out infinite;
    transform-style: preserve-3d;
}

/* Glass UI del */
.glass {
    margin-top: 2rem;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    padding: 3rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

@keyframes wave {
    0%, 100% { transform: perspective(900px) rotateX(0deg); }
    50% { transform: perspective(900px) rotateX(10deg); }
}

@keyframes float {
    0% { transform: translateY(0); }
    100% { transform: translateY(-15px); }
}
        
                    

REZULTAT

PRO nivo: Animirana Hero sekcija in Glass UI

Vadnica.org

Povezave

Podpora