I riquadri sono elementi decorativi che possono essere utilizzati come sfondi per il contenuto vero e proprio, e possono contenere un colore di riempimento, un riempimento sfumato, un motivo, una immagine o una immagine vettoriale.

Le impostazioni di base di un riquadro sono molto semplici ma nascondono molte possibilità di configurazione.

I riquadri possono essere allargati fino alla larghezza completa della finestra del browser, è di utilizzo così frequente che nella barra degli strumenti è possibile scegliere direttamente un "riquadro largo".

Bordo del riquadro

In comune a tutti i tipi di contenuto dei riquadri, puoi indicare un bordo. Il bordo viene aggiunto all’esterno del riquadro. Puoi impostare un bordo uguale su tutti i lati o separare le impostazioni per ogni lato, l’area di lavoro mostrerà fedelmente il risultato.

Arrotondamento degli angoli del riquadro

Gli angoli dei riquadri possono essere arrotondati con il raggio indicato in pixel, si può scegliere che ogni angolo sia arrotondato o meno.

Il bordo, quando visibile, seguirà i bordi arrotondati.

Ombra del riquadro

Le ombre un tempo erano molto di moda, oggi il loro utilizzo può rendere il tuo design un po’ datato.

Tuttavia, se usate con attenzione e con gusto possono aggiungere un sottile effetto 3D e fornire un senso di profondità.

Opacità del riquadro

Aggiustare l’opacità può essere utile per alcuni tipi di effetti visivi. L’opacità ha effetto sia sul contenuto che sul bordo e sull’ombra del riquadro, se presenti.

Sfondo a posizione fissa

Quando si utilizza una immagine di sfondo, le impostazioni del riquadro mostrano una nuova opzione "Posizione fissa". L’opzione "Posizione fissa" blocca lo sfondo così che la porzione visible cambia quando il riquadro si sposta o quando scorri la pagina. Questo può essere usato per molti effetti interessanti come un effetto simil-parallasse, come illustrato in molti dei design di esempio.

Riquadri e immagini

Quando configurato con una immagine di sfondo, le impostazioni di un riquadro sono molto simili a quelle delle immagini, e possono essere indistinguibili dagli elementi immagine. Le immagini sono intese come contenuto, i riquadri come sfondo e decorazione. La differenza è principalmente per motivi di accessibilità.

Riquadri come sezioni di pagina

Un uso comune per i riquadri è di raggruppare visivamente diverse sezioni all’interno di una pagina. Questo funziona con qualunque impostazione di contenuto, un colore, un gradiente, una immagine o un motivo possono tutti rendere un riquadro visivamente separato dalla successiva o precedente sezione della pagina.

Un modo particolarmente efficace di spezzare una sezione può essere ottenuto usando un SVG come sfondo del riquadro, con una pendenza o con un bordo irregolare. Quando la larghezza della finestra cresce, l’SVG viene allargato e si espanderà, quindi l’SVG dev’essere allineato con il bordo superiore o inferiore del riquadro.

Un effetto simile potrebbe essere ottenuto con una immagine PNG con sfondo parzialmente trasparente, ma al costo di un peso molto maggiore del tipico contenuto vettoriale di un SVG.