Un código de cloudcodes

Abrir en el editor Video Publica tu código

Recomendado

30 June 2025

Fragmento de animación de carga de CSS

18 August 2024

<header>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Chi Siamo</a></li>
        <li><a href="#">Servizi</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contatti</a></li>
        <li><a href="#">Blog</a></li>
    </ul>
</header>

<section class="hero">
    <h1>Benvenuti sul nostro sito web</h1>
    <p>Scopri le nostre soluzioni innovative per il tuo business</p>
    <button>Scopri di più</button>
</section>

<section class="content">
    <h1>Il nostro impegno per l'eccellenza</h1>
    <p><strong>Offriamo soluzioni personalizzate</strong> per soddisfare le esigenze specifiche di ogni cliente. La nostra esperienza e professionalità ci permettono di fornire risultati di alta qualità. <em>Siamo costantemente aggiornati sulle ultime tecnologie</em> per offrire sempre il meglio. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Contattaci per una consulenza</a> gratuita. Ut felis.</p>

<h2>I nostri servizi principali</h2>
    <p>Sviluppo web, web design, e-commerce, marketing digitale, SEO, social media marketing. Offriamo un servizio completo per la tua presenza online.</p>

<h2>La nostra storia</h2>
    <p>Nati nel 2010 con la passione per l'innovazione e la tecnologia, abbiamo aiutato numerose aziende a crescere e raggiungere i loro obiettivi. La soddisfazione dei nostri clienti è la nostra priorità.</p>

<h2>I nostri valori</h2>
    <p>Professionalità, affidabilità, innovazione, orientamento al cliente. Crediamo in un approccio collaborativo e trasparente per costruire relazioni durature con i nostri clienti.</p>
</section>

<footer>
    Copyright © 2025 Il Mio Sito Web
</footer>

CSS

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

:root {
    --header-bg: #28a745; /* A shade of green */
    --header-bg-sticky: rgba(40, 167, 69, 0.95); /* Slightly transparent green */
    --header-text: #ffffff; /* White text */
    --header-height: 48px;
    --header-width-sticky: min(600px, 100%);
    --nav-gap: 1px;
    --nav-item-space: 8px;
    --content-space: 64px 32px;
    --btn-space: 16px 32px;
    --btn-radius: 99em;
    --hero-gap: 16px;
    --footer-bg: #343a40; /* Dark gray */
    --footer-text: #ffffff; /* White text */
    --footer-height: 48px;
    --hero-bg: #f8f9fa; /* Very light gray for hero background */
    --hero-text-color: #343a40; /* Dark gray for hero text */
    --btn-border-color: #ffffff; /* White border for button */
}

html {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
}

header {
    background-color: var(--header-bg);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    overflow: visible;
    margin: 0 auto;
    height: var(--header-height);
}

header ul {
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;
    height: 100%;
    list-style: none;
    grid-auto-flow: column;
    gap: var(--nav-gap);
    margin: 0 auto;
    padding: 0;
    width: min(900px, 100%);
}

header li {
    margin: 0;
    padding: var(--nav-item-space);
}

header a {
    display: block;
    text-align: center;
    text-decoration: none;
    color: var(--header-text);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
}

.hero {
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;
    align-content: center;
    justify-content: center;
    place-content: center;
    gap: var(--hero-gap);
    aspect-ratio: 16 / 9;
    background-color: var(--hero-bg); /* Changed hero background */
    color: var(--hero-text-color); /* Changed hero text color */
}

.hero h1 {
    font-size: 64px;
    font-weight: 100;
    line-height: 1;
    margin: 0;
}

.hero p {
    font-size: 32px;
    font-weight: 200;
    line-height: 2;
    margin: 0;
}

.hero button {
    background: transparent;
    color: var(--hero-text-color); /* Match hero text color */
    appearance: none;
    border: 1px solid var(--btn-border-color); /* Changed border color */
    border-radius: var(--btn-radius);
    padding: var(--btn-space);
    text-transform: uppercase;
}

.content {
    width: min(1000px, 100%);
    padding: var(--content-space);
    margin: auto;
}

.content h1 {
    font-weight: 200;
}

.content h2 {
    font-weight: 300;
}

.content p {
    font-size: 18px;
    line-height: 1.618;
}

footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    height: var(--footer-height);
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;
}

@supports (animation-timeline: scroll()) {
    header {
        animation: header ease-in-out both;
        animation-timeline: scroll();
        animation-range: 0 90vh;
    }

@keyframes header {
        0% {
            width: 100%;
        }
        70% {
            width: 100%;
            border-radius: 0;
            translate: 0 -100%;
            background-color: var(--header-bg);
        }
        90% {
            top: 0;
            width: var(--header-width-sticky);
            translate: 0 -100%;
            box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        }
        100% {
            width: var(--header-width-sticky);
            background-color: var(--header-bg-sticky);
            top: 12px;
            height: 48px;
            border-radius: 99em;
            translate: 0 0;
            box-shadow: inset 0 1px 1px white, 0 0 1px rgba(0, 0, 0, 0.9), 0 8px 14px rgba(0, 0, 0, 0.3);
        }
    }
}

Un código de cloudcodes

Recomendado

Un código de Metr

Fragmento de animación de carga de CSS

Tableta de dibujo

HTML

CSS

JS

Recomendado

Un código de Metr

Fragmento de animación de carga de CSS

Tableta de dibujo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS