## Compito
Creare un layout per un blog di articoli sugli animali, assicurandosi che la foto corrispondente all'animale sia sempre visibile mentre l'utente legge l'articolo. Quando l'utente inizia a leggere di un altro animale, mostrare la foto del prossimo animale.
Passaggi:
1. Applicare il posizionamento `sticky` all'elemento con il nome classe `illustration`.
2. Specificare la posizione nella pagina in cui l'elemento deve diventare sticky.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImRlc2NyaXB0aW9uIj4KICAgICAgICA8cCBjbGFzcz0idGV4dCI+CiAgICAgICAgICBLYW5nYXJvb3MgYXJlIG1hcnN1cGlhbHMgbmF0aXZlIHRvIEF1c3RyYWxpYSwga25vd24gZm9yIHRoZWlyIHBvd2VyZnVsCiAgICAgICAgICBoaW5kIGxlZ3MsIGxvbmcgdGFpbHMsIGFuZCBkaXN0aW5jdGl2ZSBwb3VjaGVzIGluIHdoaWNoIHRoZXkgY2FycnkKICAgICAgICAgIHRoZWlyIHlvdW5nLiBUaGV5IGFyZSB3ZWxsLWFkYXB0ZWQgdG8gbGlmZSBpbiB0aGUgaGFyc2ggQXVzdHJhbGlhbgogICAgICAgICAgb3V0YmFjaywgd2hlcmUgdGhleSB1c2UgdGhlaXIgbGVncyB0byB0cmF2ZWwgbG9uZyBkaXN0YW5jZXMgYW5kIGhvcAogICAgICAgICAgd2l0aCBpbmNyZWRpYmxlIHNwZWVkIGFuZCBhZ2lsaXR5LgogICAgICAgIDwvcD4KICAgICAgICA8cCBjbGFzcz0idGV4dCI+CiAgICAgICAgICBLYW5nYXJvb3MgYXJlIHNvY2lhbCBhbmltYWxzLCBvZnRlbiBsaXZpbmcgaW4gZ3JvdXBzIGNhbGxlZCBtb2JzIG9yCiAgICAgICAgICB0cm9vcHMuIFRoZXkgY29tbXVuaWNhdGUgd2l0aCBlYWNoIG90aGVyIHVzaW5nIGEgdmFyaWV0eSBvZiBzb3VuZHMgYW5kCiAgICAgICAgICBib2R5IGxhbmd1YWdlLCBpbmNsdWRpbmcgZ3Jvd2xpbmcsIGdydW50aW5nLCBhbmQgdGh1bXBpbmcgdGhlaXIgZmVldC4KICAgICAgICA8L3A+CiAgICAgICAgPHAgY2xhc3M9InRleHQiPgogICAgICAgICAgVGhlcmUgYXJlIHNldmVyYWwgZGlmZmVyZW50IHNwZWNpZXMgb2Yga2FuZ2Fyb28sIHJhbmdpbmcgaW4gc2l6ZSBmcm9tCiAgICAgICAgICB0aGUgdGlueSBtdXNreSByYXQta2FuZ2Fyb28sIHdoaWNoIGlzIG9ubHkgYWJvdXQgdGhlIHNpemUgb2YgYSBtb3VzZSwKICAgICAgICAgIHRvIHRoZSByZWQga2FuZ2Fyb28sIHdoaWNoIGlzIHRoZSBsYXJnZXN0IG1hcnN1cGlhbCBpbiB0aGUgd29ybGQuCiAgICAgICAgPC9wPgogICAgICAgIDxwIGNsYXNzPSJ0ZXh0Ij4KICAgICAgICAgIFdoaWxlIGthbmdhcm9vcyBhcmUgZ2VuZXJhbGx5IGNvbnNpZGVyZWQgdG8gYmUgcGVhY2VmdWwgYW5pbWFscywgdGhleQogICAgICAgICAgY2FuIHBvc2UgYSBkYW5nZXIgdG8gaHVtYW5zIGFuZCBwZXRzIGlmIHRoZXkgZmVlbCB0aHJlYXRlbmVkIG9yCiAgICAgICAgICBjb3JuZXJlZC4gVGhleSBoYXZlIGJlZW4ga25vd24gdG8gYXR0YWNrIHBlb3BsZSBhbmQgZG9ncywgdXNpbmcgdGhlaXIKICAgICAgICAgIGhpbmQgbGVncyB0byBkZWxpdmVyIHBvd2VyZnVsIGtpY2tzLgogICAgICAgIDwvcD4KICAgICAgPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9InBob3RvIj4KICAgICAgICA8aW1nCiAgICAgICAgICBjbGFzcz0iaWxsdXN0cmF0aW9uIgogICAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYWR2YW5jZWQrY3NzK3RlY2huaXF1ZXMvcG9zaXRpb25pbmcrc2VjdGlvbi9rYW5nYXJvby1jaGFsbGVuZ2UtZXhhbXBsZS12Mi5wbmciCiAgICAgICAgICBhbHQ9Imthbmdhcm9vIgogICAgICAgICAgd2lkdGg9IjEyOHB4IgogICAgICAgIC8+CiAgICAgIDwvZGl2PgogICAgPC9kaXY+CiAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIiPgogICAgICA8ZGl2IGNsYXNzPSJkZXNjcmlwdGlvbiI+CiAgICAgICAgPHAgY2xhc3M9InRleHQiPgogICAgICAgICAgUGFuZGFzIGFyZSBhbiBpY29uaWMgc3BlY2llcyBuYXRpdmUgdG8gQ2hpbmEsIGtub3duIGZvciB0aGVpcgogICAgICAgICAgZGlzdGluY3RpdmUgYmxhY2sgYW5kIHdoaXRlIGNvbG9yaW5nLCBsYXJnZSByb3VuZCBmYWNlcywgYW5kIGN1ZGRseQogICAgICAgICAgYXBwZWFyYW5jZS4KICAgICAgICA8L3A+CiAgICAgICAgPHAgY2xhc3M9InRleHQiPgogICAgICAgICAgUGFuZGFzIGFyZSBlbmRhbmdlcmVkLCB3aXRoIG9ubHkgYXJvdW5kIDEsODAwIGluZGl2aWR1YWxzIGxlZnQgaW4gdGhlCiAgICAgICAgICB3aWxkLiBUaGV5IGZhY2UgbnVtZXJvdXMgdGhyZWF0cywgaW5jbHVkaW5nIGhhYml0YXQgbG9zcyBkdWUgdG8gaHVtYW4KICAgICAgICAgIGRldmVsb3BtZW50LCBwb2FjaGluZywgYW5kIGEgbG93IHJlcHJvZHVjdGl2ZSByYXRlLgogICAgICAgIDwvcD4KICAgICAgICA8cCBjbGFzcz0idGV4dCI+CiAgICAgICAgICBQYW5kYXMgYXJlIGEgY3VsdHVyYWwgc3ltYm9sIG9mIENoaW5hLCBhbmQgaGF2ZSBiZWVuIHJldmVyZWQgZm9yCiAgICAgICAgICBjZW50dXJpZXMuIFRoZXkgZmVhdHVyZSBwcm9taW5lbnRseSBpbiBDaGluZXNlIGFydCwgbGl0ZXJhdHVyZSwgYW5kCiAgICAgICAgICBmb2xrbG9yZSwgYW5kIGFyZSBjb25zaWRlcmVkIGEgbmF0aW9uYWwgdHJlYXN1cmUuCiAgICAgICAgPC9wPgogICAgICAgIDxwIGNsYXNzPSJ0ZXh0Ij4KICAgICAgICAgIFBhbmRhcyBoYXZlIHVuaXF1ZSBwaHlzaWNhbCBhbmQgYmVoYXZpb3JhbCBjaGFyYWN0ZXJpc3RpY3MgdGhhdCBtYWtlCiAgICAgICAgICB0aGVtIGZhc2NpbmF0aW5nIHRvIHN0dWR5LiBGb3IgZXhhbXBsZSwgdGhleSBoYXZlIGEgInRodW1iIiB0aGF0IGlzCiAgICAgICAgICBhY3R1YWxseSBhbiBleHRlbnNpb24gb2YgdGhlaXIgd3Jpc3QgYm9uZSwgd2hpY2ggdGhleSB1c2UgdG8gZ3Jhc3AKICAgICAgICAgIGJhbWJvbyBzdGFsa3MuCiAgICAgICAgPC9wPgogICAgICA8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0icGhvdG8iPgogICAgICAgIDxpbWcKICAgICAgICAgIGNsYXNzPSJpbGx1c3RyYXRpb24iCiAgICAgICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS9hZHZhbmNlZCtjc3MrdGVjaG5pcXVlcy9wb3NpdGlvbmluZytzZWN0aW9uL3BhbmRhLWNoYWxsZW5nZS1leGFtcGxlLXYyLnBuZyIKICAgICAgICAgIGFsdD0icGFuZGEiCiAgICAgICAgICB3aWR0aD0iMTI4cHgiCiAgICAgICAgLz4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LnBob3RvIHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KCi8qIC0tLS0tLS0tLS0tLS0tLSBNYWtlIGNoYW5nZXMgYmVsb3cgdGhpcyBsaW5lIC0tLS0tLS0tLS0tLS0tLSAqLwouaWxsdXN0cmF0aW9uIHsKICBwb3NpdGlvbjogX19fOwogIF9fXzogX19fOwp9Ci8qIC0tLS0tLS0tLS0tLS0tLSBNYWtlIGNoYW5nZXMgYWJvdmUgdGhpcyBsaW5lIC0tLS0tLS0tLS0tLS0tLSAqLwoKLyogTm90IHRoZSBjdXJyZW50IGZvY3VzICovCiogewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KClAgewogIG1hcmdpbi10b3A6IDA7CiAgbWFyZ2luLWJvdHRvbTogMDsKfQoKLmNvbnRhaW5lciB7CiAgbWFyZ2luOiAwIGF1dG87CiAgcGFkZGluZzogMTVweDsKICBib3JkZXI6IDFweCBzb2xpZCAjMzIyMTMyOwogIGRpc3BsYXk6IGZsZXg7Cn0KCi5jb250YWluZXI6bm90KDpsYXN0LWNoaWxkKSB7CiAgbWFyZ2luLWJvdHRvbTogNDBweDsKfQoKLmNvbnRhaW5lcjpudGgtY2hpbGQoMikgewogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IHJvdy1yZXZlcnNlOwp9CgouZGVzY3JpcHRpb24sCi5waG90byB7CiAgYm9yZGVyOiAxcHggc29saWQ7CiAgcGFkZGluZzogMTVweDsKfQoKLmNvbnRhaW5lcjpudGgtY2hpbGQoMSkgLmRlc2NyaXB0aW9uIHsKICBtYXJnaW4tcmlnaHQ6IDMwcHg7Cn0KCi5jb250YWluZXI6bnRoLWNoaWxkKDIpIC5kZXNjcmlwdGlvbiB7CiAgbWFyZ2luLWxlZnQ6IDMwcHg7Cn0KCi50ZXh0IHsKICBsaW5lLWhlaWdodDogMzhweDsKICBmb250LXNpemU6IDE0cHg7Cn0KCi50ZXh0OjpmaXJzdC1sZXR0ZXIgewogIGZvbnQtd2VpZ2h0OiA5MDA7CiAgZm9udC1zaXplOiAxOHB4Owp9

1. Per fare in modo che le illustrazioni degli animali rimangano fissate nella parte superiore della finestra durante la lettura dell'articolo, applicare la proprietà di posizionamento `sticky` all'elemento con il nome di classe `illustration`.
2. Impostare la proprietà `top` a `0` per specificare che l'elemento deve rimanere aderente alla parte superiore della finestra.

LnBob3RvIHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KCi5pbGx1c3RyYXRpb24gewogIHBvc2l0aW9uOiBzdGlja3k7CiAgdG9wOiAwcHg7Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwoqIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9CgpQIHsKICBtYXJnaW4tdG9wOiAwOwogIG1hcmdpbi1ib3R0b206IDA7Cn0KCi5jb250YWluZXIgewogIG1hcmdpbjogMCBhdXRvOwogIHBhZGRpbmc6IDE1cHg7CiAgYm9yZGVyOiAxcHggc29saWQgIzMyMjEzMjsKICBkaXNwbGF5OiBmbGV4Owp9CgouY29udGFpbmVyOm5vdCg6bGFzdC1jaGlsZCkgewogIG1hcmdpbi1ib3R0b206IDQwcHg7Cn0KCi5jb250YWluZXI6bnRoLWNoaWxkKDIpIHsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiByb3ctcmV2ZXJzZTsKfQoKLmRlc2NyaXB0aW9uLAoucGhvdG8gewogIGJvcmRlcjogMXB4IHNvbGlkOwogIHBhZGRpbmc6IDE1cHg7Cn0KCi5jb250YWluZXI6bnRoLWNoaWxkKDEpIC5kZXNjcmlwdGlvbiB7CiAgbWFyZ2luLXJpZ2h0OiAzMHB4Owp9CgouY29udGFpbmVyOm50aC1jaGlsZCgyKSAuZGVzY3JpcHRpb24gewogIG1hcmdpbi1sZWZ0OiAzMHB4Owp9CgoudGV4dCB7CiAgbGluZS1oZWlnaHQ6IDM4cHg7CiAgZm9udC1zaXplOiAxNHB4Owp9CgoudGV4dDo6Zmlyc3QtbGV0dGVyIHsKICBmb250LXdlaWdodDogOTAwOwogIGZvbnQtc2l6ZTogMThweDsKfQ==

Migliora le tue competenze di styling padroneggiando tecniche CSS avanzate per il web design moderno. Posiziona e gestisci gli elementi con precisione utilizzando strategie di posizionamento avanzate. Crea transizioni fluide e animazioni coinvolgenti per migliorare l'esperienza utente. Trasforma e manipola gli elementi per effetti visivi dinamici. Realizza design responsivi che si adattano a diversi dispositivi e ottimizza il flusso di lavoro con preprocessori CSS come Sass.

Scopri cosa possono aspettarsi gli studenti da questo corso avanzato di HTML e CSS. Quali conoscenze sono necessarie prima di iniziare il corso? Quali argomenti verranno trattati?

Posizionamento e gestione degli elementi nelle pagine web. Approfondimento delle diverse proprietà di posizionamento, utilizzo dell'ordine di sovrapposizione per controllare la visibilità degli elementi sovrapposti e gestione dell'overflow dei contenuti.

Esplora il potenziale delle transizioni e apprendi come migliorare l'esperienza utente. Scopri come animare le proprietà in modo fluido e graduale, creando transizioni di stato senza soluzione di continuità.

Scopri la proprietà animation e come può essere utilizzata per creare design dinamici e coinvolgenti. Approfondisci la creazione di animazioni complesse utilizzando i keyframe e il controllo dell'animazione.

Esplora la proprietà di trasformazione, che consente di modificare l'aspetto e la posizione degli elementi in una pagina web. Scopri come ridimensionare, ruotare, inclinare e traslare elementi in due e tre dimensioni. Combina più trasformazioni per creare effetti più complessi.

I principi e le tecniche utilizzate nel design adattivo/responsive mirano a rendere siti web e applicazioni accessibili e visivamente attraenti su diversi dispositivi, dimensioni dello schermo e orientamenti.

Scopri i preprocessori in CSS e come possono aiutare a scrivere codice più efficiente e manutenibile. Comprendi come utilizzare i preprocessori per semplificare il flusso di lavoro e generare codice CSS più pulito.

Sfida: Padroneggiare il Posizionamento Sticky

Compito

Awesome!

Sfida: Padroneggiare il Posizionamento Sticky

Compito