Sintesi della lezione

CSS RESPOSIVE

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.
  • HTML5 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

PRECAUZIONI

  • 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 cstringere ma l'utente a scrollare orrizzontalmente o a diminuire lo zom.
  • 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.

ESEMPIO BASICO DI IMPOSTAZIONE A 12 COLONNE RESPONSIVE 

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}

Esercizio su CSS RESPONSIVE

HTML

<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Raleway:400,700" rel="stylesheet">
<link href="../css/Stili.css" rel="stylesheet">
<title>Tipografia</title>
</head>

<body>
	<header class="main-header clearfix">
      <div class="container">
		  <div class="logo">
			Logo
		  </div>
		  <nav class="navbar">
			<ul>
				<li><a href="#titoli">Titoli</a></li>
				<li><a href="#liste">Liste</a></li>
				<li><a href="#modulo">Elementi form</a></li>
				<li><a href="#articolo">Articolo</a></li>
				<li><a href="#video">Video</a></li>
			</ul>
		  </nav>
      </div>
    </header>
	<section id="titoli" class="container">
		<h1>Titolo 1</h1>
		<h2>Titolo 2</h2>
		<h3>Titolo 3</h3>
		<h4>Titolo 4</h4>
		<h5>Titolo 5</h5>
		<h6>Titolo 6</h6>
	</section>
	<section id="liste" class="container">
		<header>
			<h1>Liste</h1>
		</header>
		<ul>
			<li>Voce lista</li>
			<li>Voce lista</li>
			<li>Sottilista
				<ul>
					<li>Elemento sottolista</li>
					<li>Elemento sottolista</li>
				</ul>
			</li>
			<li>Voce lista</li>
		</ul>
		<ol>
			<li>Voce lista</li>
			<li>Voce lista</li>
			<li>Sottolista
				<ol>
					<li>Voce sottolista</li>
					<li>Voce sottolista</li>
				</ol>
			</li>			
		</ol>
	</section>
	<section id="modulo" class="container"> 
	  	<header>
			<h1>Elementi del form</h1>
		</header>
		<form>
			<label>Inserimento testo</label>
			<input type="text" maxlength="50" placeholder="Inserisci il nome" name="nome" id="nome"/><br />
			<input type="checkbox" name="newsletter" value="si" />
			<label>Invia newsletter</label><br />
			<label>Maschio</label>
			<input type="radio" name="sesso" value="M" checked="checked" /> <label>Femmina</label>
			<input type="radio" name="sesso" value="F" /><br />
			<label>Messaggio</label><br />
			<textarea rows="10" maxlength="500" placeholder="Inserisci un messaggio"></textarea><br />
			<button type="button" id="bottoneDiProva">Cliccami!</button>
		</form>
	</section>
	<section id="articolo" class="container">
		<header>
			<h1>Articolo</h1>
		</header>
		<article>
			<header>
				<h1>Questo è un articolo</h1>
				<h3>di Mario Rossi</h3>
			</header>
			<div class="clearfix row">
				<figure>
					<img src="https://unsplash.it/640/480/?random" alt="Immagine casuale da unplash.it" title="Questa è un immagine" />
					<figcaption>Immagine casuale</figcaption>
				</figure>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure magnam ex vel aliquam aperiam numquam fugit, asperiores quas quo, molestias modi nemo possimus laudantium repellat enim, quasi rerum non consequuntur.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita quo alias enim? Voluptatum unde dolore natus aliquam facere, provident minima numquam neque error placeat inventore perspiciatis laborum tenetur non excepturi distinctio, sint a suscipit voluptate et molestiae? Asperiores nesciunt nobis sequi, sint maiores similique rerum, neque laboriosam, voluptatum, delectus earum?</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore accusamus aliquam, aperiam id, ullam adipisci aliquid necessitatibus libero error earum recusandae ipsum tempora suscipit quaerat dolor harum sapiente inventore hic, voluptatem eius mollitia officiis. Eius aperiam eaque perspiciatis debitis, quidem repellat atque temporibus, dignissimos beatae modi, facilis cum possimus rerum!</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi nemo facilis aut officia saepe quisquam, debitis soluta totam fuga omnis quam ad, impedit mollitia quaerat ipsa dolores, commodi quia tempore!</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet excepturi, sapiente, consequuntur enim autem nam dolores accusamus quasi necessitatibus exercitationem asperiores atque culpa ratione saepe consectetur recusandae qui magnam facilis quaerat reiciendis! Error accusamus in fuga nemo eligendi sed veniam ut consectetur libero cum dolore, dolorum harum nulla ea perspiciatis quidem dolores ipsam repellat inventore.</p>
			</div>
		</article>
	</section>
	<!--
    Abbiamo elimeinato il video in quanto non responsive. Rimandiamo l'impostazione del video
    responsive a quando affronteremo il framework CSS e Javascript Bootstrap.

	<section id="video" class="container">
		<header>
			<h1>Video</h1>
		</header>
		<div>
			<iframe width="854" height="480" src="https://www.youtube.com/embed/aCI_uYdgNrM" frameborder="0" allowfullscreen></iframe>
		</div>
	</section>

	-->
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
/* 	
Queste le regole riguardano l'utput 
su tutti i dispositivi. Abbiamo aggiunto 
in fondo delle correzioni per gli schermi 
inferiori a 1200px di larghezza.
*/
/* 
Uso i web font di Google fonts per testo 
normale e i titoli
*/
body {
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	font-size: 18px;
	color: #333333;
	margin: 0;
	padding: 0;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 400;
}

/*
	Corpo personalizzato per i titoli
*/
h1 {
	font-size: 4em;
}
h2 {
	font-size: 3em;
}
h3 {
	font-size: 2.2em;
}
h4 {
	font-size: 1.5em;
}
h5 {
	font-size: 1em;
}
h6 {
	font-size: 0.85em;
}

/*
	Varie componenti della barra superiore
*/
.main-header{
	background-color: midnightblue;
	color: #f6f6f6;
	position: fixed;
	top:0;
	left:0;
	right: 0;
}

.main-header .logo {
	float: left;
}
.main-header .navbar {
	float:right;
}

/*
	Classe da assegnare ad elementi che contengono 
	elementi che usano float: right o float:left
*/
.clearfix {
	overflow: auto;
}
.clearfix::after {
	content:"";
	clear: both;
	display: table;
}

/*
	Barra di navigazione
*/
.navbar > ul > li {
	list-style: none;
	display: inline-block;
}
.navbar > ul > li a {
	color: #ffffff;
	padding:18px 20px;
	text-decoration: none;
	/*font-weight: 700;*/
	font-size: 22px;
}
.navbar > ul > li a:hover,
.navbar > ul > li a:focus {
	background-color: rgba(255,255,255,0.2);
	outline: none;
}

/*
	Classe che da una larghezza determinata 
	ad un elemento e lo colloca in mezzo allo 
	schermo
*/
.container {
	width: 1180px;
	margin:0 auto;
}

.main-header .logo {
	font-weight: 700;
	line-height: 1;
	font-size: 46px;
	padding-top: 5px;
}
.logo img {
	max-height: 100%;
	width: auto;
}

/*
	Margine interno superiore aggiunto alle section 
	figle di body per evitare che la barra 
	superiore con position:fixed le copra
*/
body > section {
	padding-top: 65px;
}

/* 
	Personalizzazione dell'header di ogni section della pagina
*/
body > section > header {
	margin-bottom: 50px;
	border-bottom: #cccccc 2px solid;
}

body > section > header h1 {
	font-size: 4.7em;
	margin-bottom: 0;
}

/*
	Impostazione responsive della figure in relazione 
	all'article con testo che scorre intorno all'immagine
*/
article figure {
	margin: 0;
	width: 50%;
	float: left;
	padding: 0 15px;
	box-sizing: border-box;
}
article figure figcaption {
	background-color: black;
	color: white;
	font-size: 0.80em;
	padding: 3px 10px;
}

article p {
	padding: 0 15px;
}

/*
	Impostanzione responsive delle immagini
	che si ridimensionano rispetto a cio che 
	le contiene.
*/
img {
	max-width: 100%;
	height: auto;
}

/*
	Condue margini esterni negativi faccio in modo che gli
	elementi figure e p che sono dento article (che hanno 
	margini interni) si allineino ai bordi
*/
.row {
	margin-left: -15px;
	margin-right: -15px;
}

/* Regole che valgono per schermi di larghezza compresa tra 993px e 1200px */
@media only screen and (max-width:1200px) {
	.container {
		width: 960px;
	}
}

/* Regole che valgono per schermi di larghezza compresa tra 763px e 992px */
@media only screen and (max-width:992px){
	.container {
		width: 738px;
	}
	.navbar > ul > li a {
		font-size: 18px;
	}
}

/* Regole che valgono per schermi di larghezza compresa tra 739px e 768px */
@media only screen and (max-width:768px){
	.container {
		box-sizing: border-box;
		width: 100%;
		padding: 0 15px;
	}
	article figure {
		width: 100%;
	}
}

/* Regole che valgono per schermi di larghezza <= 740px; */
@media only screen and (max-width:740px) {
	.navbar {
		display: none;
	}
}

ANIMAZIONI CON CSS

TRANSITION

  • trasition 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
  • CSS3 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);
}

Esercizi sulle animazioni

Se clicchi su edit on Code Pen puoi provare a moficare il codice per creare i tuoi effetti.

Esercizio 1

See the Pen Esercizio su transition by Bruno Migliaretti (@magicbruno) on CodePen.

Esercizio 2

See the Pen Effetti animati su un immagine by Bruno Migliaretti (@magicbruno) on CodePen.

Torna all'inizio