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) {
[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>
</body>
</html>
CSS
@charset "utf-8";
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;
}
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;
}
.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;
}
.clearfix {
overflow: auto;
}
.clearfix::after {
content:"";
clear: both;
display: table;
}
.navbar > ul > li {
list-style: none;
display: inline-block;
}
.navbar > ul > li a {
color: #ffffff;
padding:18px 20px;
text-decoration: none;
font-size: 22px;
}
.navbar > ul > li a:hover,
.navbar > ul > li a:focus {
background-color: rgba(255,255,255,0.2);
outline: none;
}
.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;
}
body > section {
padding-top: 65px;
}
body > section > header {
margin-bottom: 50px;
border-bottom: #cccccc 2px solid;
}
body > section > header h1 {
font-size: 4.7em;
margin-bottom: 0;
}
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;
}
img {
max-width: 100%;
height: auto;
}
.row {
margin-left: -15px;
margin-right: -15px;
}
@media only screen and (max-width:1200px) {
.container {
width: 960px;
}
}
@media only screen and (max-width:992px){
.container {
width: 738px;
}
.navbar > ul > li a {
font-size: 18px;
}
}
@media only screen and (max-width:768px){
.container {
box-sizing: border-box;
width: 100%;
padding: 0 15px;
}
article figure {
width: 100%;
}
}
@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;
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);
-webkit-transform: translate(50px, 100px);
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);
-webkit-transform: rotate(20deg);
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);
-webkit-transform: scale(2, 3);
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);
-webkit-transform: skewX(20deg);
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);
-webkit-transform: skewY(20deg);
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
Esercizio 2