- Learn
- w3.css: guida all’uso
- La proprietà display
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 classiw3-display-*
. Setta il posizionamento fisso (position:fixed
) all’elemento indicatow3-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 containerw3-display-topright
: posiziona l’elemento figlio nell’angolo superiore destro dell’elemento containerw3-display-left
: posiziona l’elemento figlio orizzontalmente adiacente al lato sinistro dell’elemento container, e verticalmente al centro dello stessow3-display-middle
: posiziona l’elemento figlio al centro dell’elemento container. Questa classe, in combinazione con la classe container, è ottima per centrare gli elementiw3-display-right
: posiziona l’elemento figlio orizzontalmente adiacente al lato destro dell’elemento container, e verticalmente al centro dello stessow3-display-bottomleft
: posiziona l’elemento figlio nell’angolo inferiore sinistro dell’elemento containerw3-display-bottommiddle
: posiziona l’elemento figlio al centro del lato inferiore dell’elemento containerw3-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 impostandodisplay:block
w3-hide
: nasconde un elemento HTML impostandodisplay:none
w3-show-block
: alias diw3-show
, mostra un elemento HTML impostandodisplay:block
w3-show-inline-block
: mostra un elemento HTML impostandodisplay: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 paginaw3-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.
Se vuoi aggiornamenti su CSS, Web Design inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Sara Campagna, le opportunità Microsoft per gli studenti e startup
YouthSpark è il programma Microsoft che permette a giovani realtà e startup di confrontarsi con il mercato, grazie ad un […]