{"id":255337,"date":"2022-12-20T14:02:00","date_gmt":"2022-12-20T11:02:00","guid":{"rendered":"https:\/\/inform.click\/7-fantastiche-tecniche-css3-che-dovresti-provare\/"},"modified":"2022-12-20T14:12:00","modified_gmt":"2022-12-20T11:12:00","slug":"7-fantastiche-tecniche-css3-che-dovresti-provare","status":"publish","type":"post","link":"https:\/\/inform.click\/it\/7-fantastiche-tecniche-css3-che-dovresti-provare\/","title":{"rendered":"7 fantastiche tecniche CSS3 che dovresti provare"},"content":{"rendered":"

\n L'evoluzione dei CSS (Cascading Style Sheets) con l'HTML \u00e8 stata incredibile. Ci sono moltissime funzionalit\u00e0 come Flexbox, CSS Grid e propriet\u00e0 personalizzate CSS introdotte di recente.\n<\/p>\n

\n Il suo continuo progresso e l'enorme potenziale sono ci\u00f2 che affascina gli sviluppatori per provare nuove tecniche CSS e superare i limiti di ci\u00f2 che pu\u00f2 fare. La combinazione della tecnologia HTML 5 e CSS3 \u00e8, senza dubbio, un flash-killer.\n<\/p>\n

\n Non c'\u00e8 da meravigliarsi che un piano CSS ben eseguito possa controllare quasi ogni aspetto del design e portare a una migliore esperienza utente, il che \u00e8 abbastanza necessario. Dopotutto, i visitatori hanno determinate aspettative quando visualizzano il tuo sito tramite laptop, desktop, tablet o qualsiasi altro supporto.\n<\/p>\n

\n Ma quali sono le tecniche CSS di tendenza? Non \u00e8 una domanda ovvia che attraversa la mente quando si parla di progettare un sito web attraente e facile da usare.\n<\/p>\n

\n Questo \u00e8 il motivo per cui abbiamo messo a punto alcune delle nuove tecniche e suggerimenti CSS per padroneggiare le tue abilit\u00e0 di web design. Ognuno include alcune spiegazioni e frammenti di codice di esempio.\n<\/p>\n

\n Quindi andiamo dritti al punto!\n<\/p>\n

\n 1 Allineamento verticale con Flexbox
\n<\/h5>\n

\n Gli sviluppatori precedenti erano soliti affrontare molte difficolt\u00e0 nell'allineare verticalmente un testo o qualsiasi altro elemento al centro. Ma ora, dopo l'introduzione della nuova specifica CSS3 Flexbox<\/strong>, le cose sono diventate molto pi\u00f9 semplici.\n<\/p>\n

\n La propriet\u00e0, display: flex<\/strong> fornisce agli utenti un modo semplice per allineare qualsiasi testo o elemento al centro. Ecco il codice di esempio!\n<\/p>\n

\n codice HTML:<\/strong>\n<\/p>\n

\n Vertically centered!<\/code>\n<\/div>\n
 <\/pre>\n
\n  <strong>CSS:<\/strong><\/code>\n<\/p>\n
<code>.align-vertically {\n  background: #FFA500;\n  color: #hhh;\n  display: flex;\n  align-items: center;\n  height: 200px;\n}<\/code><\/code><\/pre>\n
\n  Nel codice CSS sopra, display: flex descrive il layout Flexbox per l'elemento, mentre align-items: center; \u00e8 responsabile della centratura verticale del testo.\n<\/p>\n
\n  RISULTATO:<\/strong>\n<\/p>\n
\n  2 griglia CSS reattiva
\n<\/h5>\n
\n  Non rendere la tua griglia un'eccezione, rendila anche reattiva, come qualsiasi altra cosa nel tuo progetto.\n<\/p>\n
\n  Ci sono tanti modi attraverso i quali puoi rendere reattiva la tua griglia con CSS Grid. E la parte migliore dell'utilizzo \u00e8 che sarai in grado di creare una griglia pi\u00f9 flessibile che ti dia l'aspetto desiderato, indipendentemente dalle dimensioni del dispositivo.\n<\/p>\n
\n  Oltre a questo, la griglia CSS consente anche di lavorare con colonne di dimensioni diverse e uguali. \u00c8 un grande pezzo di tecnologia ricco di opzioni che danno agli utenti la libert\u00e0 di avere il controllo sui loro progetti.\n<\/p>\n
\n  Puoi utilizzare vari punti di interruzione, l'altezza di pi\u00f9 dimensioni ed eseguire altri posizionamenti, come mostrato nell'esempio seguente.\n<\/p>\n
\n  codice HTML:<\/strong>\n<\/p>\n
\n  \u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n<\/div>\n
\n  <strong>CSS:<\/strong><\/code>\n<\/p>\n
<code>.grid\n {\n  display: grid;\n  grid-template-rows: repeat(5, 1fr);\n  grid-auto-columns: calc((100vh - 3em) \/ 4);\n  grid-auto-flow: column;\n  grid-gap: 1em;\n  height: 100vh;\n}\n.grid-item:nth-child(3n)\n {\n  background-color: purple;\n}\n.grid-item:nth-child(3n + 2)\n{\n  background-color: pink;\n}<\/code><\/code><\/pre>\n
\n  L'unit\u00e0 di frazione (fr) utilizzata nel codice CSS sopra \u00e8 l'unit\u00e0 flessibile che separa lo spazio aperto secondo le tue linee guida. Ogni istruzione fr \u00e8 per la colonna, quindi puoi sommare gli spazi vuoti e preparare la griglia.\n<\/p>\n
\n  RISULTATO:<\/strong>\n<\/p>\n
\"\"<\/a><\/p>\n
\n  3 animazioni di testo
\n<\/h5>\n
\n  Potresti aver creato animazioni di sfondo con i CSS, ma ora influenza anche il modo in cui gli utenti interagiscono e interagiscono con gli elementi di testo di un sito web. Dalle regolazioni al passaggio del mouse al far fluttuare le parole nell'aria, CCS3 ha reso tutto possibile.\n<\/p>\n
\n  I siti Web che non hanno molti elementi allettanti per coinvolgere i propri utenti possono trarre il meglio da questa caratteristica. Eccone un piccolo esempio.\n<\/p>\n
\n  codice HTML:<\/strong>\n<\/p>\n
\n