La proprietà display

La proprietà CSS display permette di incidere sulla struttura e sull’aspetto dei nostri layout. Inoltre, display è anche utilizzato per la produzione di svariati effetti grafici. w3.css offre una moltitudine di classi per lavorare con la proprietà display e con altre proprietà CSS utili alla visualizzazione dell’elemento (come position e float), utilizzando una quantità di codice HTML davvero minimale.

Posizionamento

La prima caratteristica che analizziamo, realizzabile con l’uso delle classi display, è il posizionamento degli elementi. La sintassi di questo gruppo ha la forma w3-display-*, dove * è una keyword che indica il comportamento del selettore. Per posizionare gli elementi, abbiamo bisogno prima di tutto di collocarli in un elemento contenitore avente classe w3-display-container. A questo punto potremo spostare fisicamente gli elementi in relazione al suo elemento genitore attraverso le classi w3.css del gruppo specifico:

• w3-display-container: il container (genitore) obbligatorio per il posizionamento delle classi w3-display-*. Setta il posizionamento fisso (position:fixed) all’elemento indicato
• w3-display-topleft: posiziona l’elemento figlio nell’angolo superiore sinistro dell’elemento container (w3-display-container)
• w3-display-topmiddle: posiziona l’elemento figlio al centro del lato superiore dell’elemento container
• w3-display-topright: posiziona l’elemento figlio nell’angolo superiore destro dell’elemento container
• w3-display-left: posiziona l’elemento figlio orizzontalmente adiacente al lato sinistro dell’elemento container, e verticalmente al centro dello stesso
• w3-display-middle: posiziona l’elemento figlio al centro dell’elemento container. Questa classe, in combinazione con la classe container, è ottima per centrare gli elementi
• w3-display-right: posiziona l’elemento figlio orizzontalmente adiacente al lato destro dell’elemento container, e verticalmente al centro dello stesso
• w3-display-bottomleft: posiziona l’elemento figlio nell’angolo inferiore sinistro dell’elemento container
• w3-display-bottommiddle: posiziona l’elemento figlio al centro del lato inferiore dell’elemento container
• w3-display-bottomright: posiziona l’elemento figlio nell’angolo inferiore destro dell’elemento container

A questo punto possiamo vederle tutte in azione nel seguente snippet di codice:

<div class="w3-display-container w3-green" style="height:500px;">
  <div class="w3-display-topleft">Top Left</div>
  <div class="w3-display-topright">Top Right</div>
  <div class="w3-display-bottomleft">Bottom Left</div>
  <div class="w3-display-bottomright">Bottom Right</div>
  <div class="w3-display-left">Left</div>
  <div class="w3-display-right">Right</div>
  <div class="w3-display-middle">Middle</div>
  <div class="w3-display-topmiddle">Top Mid</div>
  <div class="w3-display-bottommiddle">Bottom Mid</div>
</div>

Una volta impostata l’altezza (proprietà CSS height) all’elemento contenitore w3-display-container, basterà aggiungere le classi desiderate per posizionare gli elementi al suo interno. Questa strategia permette di creare effetti molto interessanti, come ad esempio il posizionamento di elementi all’interno di un’immagine:

<div class="w3-display-container w3-text-white">
    <img src="img_lights.jpg" alt="Lights" style="width:100%">
    <div class="w3-padding w3-display-topleft">Top Left</div>
    <div class="w3-padding w3-display-topright">Top Right</div>
    <div class="w3-padding w3-display-bottomleft">Bottom Left</div>
    <div class="w3-padding w3-display-bottomright">Bottom Right</div>
    <div class="w3-padding w3-display-topmiddle">Top Mid</div>
    <div class="w3-padding w3-display-left">Left</div>
    <div class="w3-padding w3-display-right">Right</div>
    <div class="w3-padding w3-display-middle w3-xxlarge">Middle</div>
    <div class="w3-padding w3-display-bottommiddle">Bottom Mid</div>
  </div>

Si noti che l’ordine in cui vengono collocati gli elementi figli nel container è irrilevante al loro posizionamento.

Possiamo anche posizionare manualmente gli elementi all’interno del container attraverso la classe w3-display-position. Questa si limita a settare un posizionamento assoluto all’elemento HTML (position:absolute), e dunque sarà nostro compito specificarne la posizione tramite le proprietà CSS top, right, bottom e left:

<div class="w3-display-container w3-text-white">
  <img src="img_lights.jpg" alt="Lights" style="width:100%">
  <div class="w3-display-topleft w3-container"><p>Top Left</p></div>
  <div class="w3-display-topright w3-container"><p>Top Right</p></div>
  <div class="w3-display-bottomleft w3-container"><p>Bottom Left</p></div>
  <div class="w3-display-bottomright w3-container"><p>Bottom Right</p></div>
  <div class="w3-display-topmiddle"><p>Top Mid</p></div>
  <div class="w3-display-left w3-container">Left</div>
  <div class="w3-display-right w3-container">Right</div>
  <div class="w3-display-middle w3-large">Middle</div>
  <div class="w3-display-bottommiddle"><p>Bottom Mid</p></div>
  <div class="w3-display-position w3-padding w3-red" style="top:100px;left:100px">Elemento positionato manualmente</div>
</div>

Floating

Sfruttando la proprietà CSS float si possono costruire interi layout multicolonna. In w3.css, lavorare con il floating è davvero molto semplice, grazie alle seguenti classi:

• w3-left: posiziona l’elemento sulla sinistra tramite floating (float:left)
• w3-right: posiziona l’elemento sulla destra tramite floating (float:right)
• w3-clear: "pulisce" il floating

Vediamo un esempio:

<div class="w3-light-grey">
    <div class="w3-left w3-red w3-padding">w3-left</div>
    <div class="w3-right w3-blue w3-padding">w3-right</div>
    <div class="w3-clear"></div>
  </div>

Si noti che è anche possibile bypassare l’utlizzo dell’elemento finale che "pulisce" il floating tramite la classe w3-clear se utilizziamo la classe w3-container come elemento genitore degli elementi sui quali abbiamo applicato il floating:

<div class="w3-container">
  <h2>Floating</h2>
  <div class="w3-light-grey">
    <div class="w3-left w3-red w3-padding">w3-left</div>
    <div class="w3-right w3-blue w3-padding">w3-right</div>
  </div>
</div>

Mostrare e nascondere

Tramite l’uso della proprietà display vera e propria, possiamo mostrare o nascondere i nostri elementi HTML. Vediamo le classi w3.css utili a questo scopo:

• w3-show: mostra un elemento HTML impostando display:block
• w3-hide: nasconde un elemento HTML impostando display:none
• w3-show-block: alias di w3-show, mostra un elemento HTML impostando display:block
• w3-show-inline-block: mostra un elemento HTML impostando display:inline-block

Come abbiamo detto in precedenza, sfruttando la proprietà CSS display è possibile produrre degli effetti grafici sugli elementi HTML. Uno di questi è il toggling, ovvero il passaggio da uno stato di comparsa a uno di scomparsa e viceversa, realizzabile tramite le classi indicate ed un semplice script Javascript che gestisce le classi all’azionamento dell’evento click:

<div class="w3-container">
  <h2>Toggle Show/Hide</h2>
  <p>Clicca sul pulsante per nascondere/mostrare il paragrafo.</p>
  <button onclick="myFunction()" class="w3-btn w3-black">Toggle</button>
  <p>Paragrafo 1.</p>
  <p id="thep" class="w3-hide w3-red">Paragrafo 2.</p>
</div>
<script>
function myFunction() {
    var thep = document.getElementById("thep");
    if (thep.className.indexOf("w3-show") == -1) {
        thep.className += " w3-show";
    } else {
        thep.className = thep.className.replace(" w3-show", "");
    }
}
</script>

Posizionamento fisso

Il posizionamento fisso è una particolare impostazione del posizionamento che non tiene conto degli elementi genitori, ma utilizza la pagina (finestra del browser) per collocare l’elemento indicato. Questa proprietà è utilizzata spesso per creare menù e barre di navigazione che rimangono ancorate in alto o in basso nella pagina, indipentemente dal fatto che l’utente scrolli la stessa ad un determinato punto. In w3.css abbiamo 2 classi per lavorare con il posizionamento fisso:

• w3-top: posiziona un elemento in modo fisso nel lato superiore della pagina
• w3-bottom: posiziona un elemento in modo fisso nel lato inferiore della pagina

Di seguito un esempio di menù "ancorato" alla parte superiore della pagina:

<div class="w3-top">
  <div class="w3-bar w3-red">
    <a href="#" class="w3-bar-item w3-button">Home</a>
    <a href="#" class="w3-bar-item w3-button">Link 1</a>
    <a href="#" class="w3-bar-item w3-button">Link 2</a>
    <a href="#" class="w3-bar-item w3-button">Link 3</a>
  </div>
</div>

Hovering

Anche sfruttando il display degli elementi è possibile creare un effetto di hovering, ovvero di comparsa/scomparsa di contenuto al passaggio del mouse da parte dell’utente. In w3.css realizzarlo è facilissimo, basta utilizzare la classe w3-display-hover, ed applicarla ad un elemento figlio di un elemento w3-display-container ed il gioco è fatto:

<div class="w3-display-container w3-light-grey" style="height:500px;">
    <div class="w3-display-topleft w3-display-hover">Top Left</div>
    <div class="w3-display-topright w3-display-hover">Top Right</div>
    <div class="w3-display-bottomleft w3-display-hover">Bottom Left</div>
    <div class="w3-display-bottomright w3-display-hover">Bottom Right</div>
    <div class="w3-display-left w3-display-hover">Left</div>
    <div class="w3-display-right w3-display-hover">Right</div>
    <div class="w3-display-middle">Mouse over this box!</div>
    <div class="w3-display-topmiddle w3-display-hover">Top Mid</div>
    <div class="w3-display-bottommiddle w3-display-hover">Bottom Mid</div>
  </div>

L’effetto prodotto da questa classe è utilizzabile in combinazione alle classe dedicate agli effetti ed alle animazioni per produrre risultati ancora più accattivanti, come vedremo nelle apposite lezioni.