POSIZIONAMENTO

position

La proprietà position specifica il metodo di posizionamento utilizzato per un elemento.

position può assumere quattro diversi valori:

  • static
  • relative
  • fixed
  • absolute

La posizione degli elementi è determinata dalle proprietà top, right, bottom e left.

  • Modificare i valori di queste proprietà ha effetto solo se position è diversa da static.
  • L'effetto sulla posizione cambia a secondo dell'impostazione di position.

static

Gli elementi HTML sono posizionati così per impostazione predefinita.

  • Un elemento con position:static non è posizionato in modo speciale, ma secondo il normale flusso della pagina
  • La posizione non è influenzata dalle proprietà top, right, bottom e left.
div.normale  
{
    position: static;
    border: 3px solid #73AD21;
}

relative

  • La posizione di un elemento con  position:relative è calcolata in maniera relativa rispetto alla sua posizione naturale secondo il normale flusso della pagina
  • Le proprietà top, right, bottom e left causeranno uno scostamento dell'elemento rispetto alla sua posizione naturale.
div.relativa  {
    position: relative;
    left: 50px;
}

fixed

  • La posizione di un elemento con  position:fixed è calcolata in relazione alla finestra del browser il che significa che rimane sempre nello stesso posto, anche se la pagina viene fatto scorrere.
  • Le proprietà top, right, bottom e left determinano la posizione dell'elemento.
div.fissa  {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

absolute

  • La posizione di un elemento con  position:absolute è calcolata in relazione  all'elemento che lo contiene se questo non è position:static, altrimenti in relazione al documento.
  • Le proprietà top, right, bottom e left determinano la posizione dell'elemento.
  • L'elemento position:absolute quando la pagina scrolla, scrolla insieme all'elemento relativamente al quale è posizionato.
div.realtiva {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
} 

div.assoluta {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

z-index

  • Quando un elemento è posizionato (cioè non è  position:static) può sovrapporsi ad altri elementi-
  • La proprietà z-index determina l'ordine di questa sovrapposizione è può avere sia un valore positivo che uno negativo.
img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

CSS RESPONSIVE

VIEWPORT

  • La viewport è l'area visibile da parte dell'utente di una pagina web.
  • La viewport varia con il dispositivo.
  • Prima della diffusione di tablet e telefoni cellulari, le pagine web erano progettate solo per gli schermi di computer:
    • progettazione statica
    • dimensione fissa.
  • Con la diffusione di tablet e telefoni cellulari, le pagine web erano troppo grandi per adattarsi alla finestra. Per risolvere questo problema, i browser su tali dispositivi ​​scala verso il basso l'intera pagina web per adattarsi allo schermo.
  • HTML 5 ha introdotto un metodo per consentire web designer di controllare la viewport, attraverso il tag <meta>.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • L'elemento <meta> fornisce le istruzioni al browser su come controllare il ridimensionamento della pagina.
    • width=device-width impone che la larghezza della pagina coincida con quella del dispositivo.
    • initial-scale=1.0 imposta il livello di zoom iniziale

REGOLE BASE DELLA PROGETTAZIONE RESPONSIVE

  • Non bisogna costringere l'utente a scorrere in orizzontale, o diminuire lo zoom, per vedere l'intera pagina: Gli utenti sono abituati a scorrere i siti web in verticale.
  • Non utilizzare grandi elementi larghezza fissa. Le immagini, ad esempio, devono sempre adattarsi al contenitore in modo da non costringere ma l'utente a scrollare orizzontalmente o a diminuire lo zoom.
  • Creare contenuti che possano essere resi correttamente indipendentemente dalla larghezza.
  • Utilizzare le regole media query per applicare stili diversi per schermi diversi.
  • Se la larghezza di un elemento non è controllata dalle media query usare dimensioni percentuali. 
  • Fare attenzione nell'utilizzo del posizionamento assoluto.

REGOLA @media

@media only screen and (max-width:768px){ 	
    .container { 
		width: 960px; 
	} 
}

ANIMAZIONI CON CSS

TRANSITION

  • transition consente di ottenere un animazione di una certa durata da un cambio di valori delle proprietà di un elemento.
  • Per creare un effetto di transizione, è necessario specificare due cose:
    • la proprietà CSS su cui si desidera impostare l'effetto
    • la durata dell'effetto
  • L'esempio seguente mostra un elemento <div> di 100px * 100px rosso  L'effetto di transizione opera sulla proprietà  width, e ha una durata di 2 secondi:
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}
  • L'effetto di transizione inizierà quando la proprietà CSS specificata (width) cambia il valore.
  • Ora definiamo un nuovo valore per la proprietà width quando il mouse passa sopra l'elemento:
div:hover {
    width: 300px;
}

TRANSFORM

  • trasform permette di spostare, ruotare, scalare e inclinare gli elementi HTML.
  • Una trasformazione è un effetto che permette un cambiamento di forma, di dimensione e/o di posizione all'elemento
  • CSS 3 supporta trasformazioni 2D e 3D.
  • Le trasformazioni si realizzano applicando le seguenti funzioni:
    • translate()
    • rotate()
    • scale()
    • skewX()
    • skewY() 

translate(x,y)

  • Il metodo translate() sposta un elemento dalla posizione correte secondo i parametri indicati per l'asse X e l'asse Y.
  • L'esempio seguente sposta l'elemento <div> 50 pixel a destra, e 100 pixel verso il basso dalla sua posizione attuale:
div {
    -ms-transform: translate(50px, 100px); /* IE 9 */
    -webkit-transform: translate(50px, 100px); /* Safari */
    transform: translate(50px, 100px);
}

rotate(angolo)

  • Il metodo rotate() ruota un elemento in senso orario o antiorario secondo un determinato angolo.
  • L'esempio seguente ruota l'elemento <div> in senso orario di 20 gradi:
div {
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari */
    transform: rotate(20deg);
}

scale(x,y)

  • Il metodo scale() aumenta o diminuisce la dimensione di un elemento.
  • L'esempio seguente ingrandisce l'elemento <div> di due volte del rispetto alla larghezza originale, e tre volte rispetto alla sua altezza originale: 
div {
    -ms-transform: scale(2, 3); /* IE 9 */
    -webkit-transform: scale(2, 3); /* Safari */
    transform: scale(2, 3);
}

skewX(angolo)

  • Il metodo skewX() inclina un elemento lungo l'asse X per l'angolo determinato.
  • L'esempio seguente distorce l'elemento <div> 20 gradi lungo l'asse X:
div {
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
}

skewY(angolo)

  • Il metodo skewY() inclina un elemento lungo l'asse Y per l'angolo determinato.
  • L'esempio seguente distorce l'elemento <div> 20 gradi lungo l'asse Y:
div {
    -ms-transform: skewY(20deg); /* IE 9 */
    -webkit-transform: skewY(20deg); /* Safari */
    transform: skewY(20deg);
}