"Sono stato bocciato a parecchi esami. Un mio amico invece, li ha passati tutti a pieni voti. Ora è ingegnere e lavora in Microsoft. Io sono il proprietario."  - Bill Gates  •  "Se riesco a fare qualcosa in 10 minuti, è perché ho passato anni a studiarlo."  - Bill Gates  •  "Il vostro lavoro riempirà gran parte della vostra vita, e l'unico modo per essere veramente soddisfatti è fare ciò che ritenete sia un grande lavoro."  - Steve Jobs  •  "Siate affamati. Siate folli."  - Steve Jobs  •  

cinque •

ZERO

.NET
AI
CLOUD COMPUTING
CMS
CSS
CURL
GIT
HTML
JAVASCRIPT
LINUX
Miscellaneous
MySQL
PHP
SQL

CSS

BOOTSTAP     SASS    

←

{CSS} Le proprietà Visibility e Clip

home / css /

Lucio Paolo Asciolla

Senior Full Stack Developer

Visibility

La proprietà visibility determina se un elemento debba essere visibile o nascosto.
Attraverso l'utilizzo di questa proprietà l'elemento non viene rimosso dal flusso del documento.
Potremmo dire, c’è ma non si vede ed è proprio questo che la differenzia da "display:none" che invece elimina l'elemento dal flusso.

visiblevalore iniziale di default
hiddenl’elemento è nascosto (non visibile) ma occuperà il suo spazio nel layout
collapsecollassa, usato solo per elementi di tabella (righe, colonne, celle)

Sintassi:

SELETTORE { VISIBILITY:VALORE; }

.box{
visibility: hidden;
}

Clip

Con la proprietà Clip è possibile impostare, attraverso l'ausilio di coordinate, la zona visibile di un elemento.
Si applica solo agli elementi che abbiano position: absolute o position: fixed.
Più semplicemente serve a ritagliare un rettangolo che delimita la parte visibile dell’elemento.
La definizione del rettangolo avviene attraverso la funzione rect.

Sintassi:

SELETTORE { CLIP: RECT(TOP, RIGHT, BOTTOM, LEFT); }

div {
position: absolute;
clip: rect(20px, 130px, 225px, 40px);
}