Fondamenti CSS Alessandro Pascoli - alessandropascoli.it/teaching
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
Fondamenti CSS Alessandro Pascoli alessandropascoli.it/teaching
Fondamenti CSS
Tipografia
body {
font-size: 1em; }
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /*La rimozione del margine superiore permette di
aggirare il problema che si crea quando i margini possono
fuoriuscire dal blocco che li contiene. Il margine inferiore che
rimane permetterà di distanziare gli elementi che seguono.*/
padding-right: 15px; padding-left: 15px; /*L'aggiunta di una
spaziatura ai lati degli elementi contenuti nei blocchi, anziché
direttamente nei blocchi stessi, consente di evitare ogni
calcolo matematico relativo ai riquadri.*/ }
alessandropascoli.it/teaching
Fondamenti CSS
Tipografia: dimensione dei font
font-size: 1em;
p { font-size: 1em; }
h1 { font-size: 1.3em; }
h6 { font-size: 0.8em; }
Punti e Pica: misure per la stampa.
Pixel: misura esatta e cross-browser, ma ignora le impostazioni dell’utente.
Em: misura relativa pari all’altezza di “M” del font.
Nei CSS 1em è la misura del font predefinito dall’utente. Usando em è corretto definire la
dimensione del font di base (generalmente in body) così da sfruttare la ereditarietà delle
regole CSS. Di default 1em = 16px.
Exe: misura relativa pari all’altezza di “x” del font.
Percentuale: misura relativa pari al valore di default del browser.
Parole chiave assolute: definite una rispetto all’altra.
xx-small; x-smal; small; medium; large; x-large; xx-large.
Generalmente: medium = 1em = 16px.
Parole chiave relative: assumono le dimensioni dall’elemento genitore.
smaller; larger.
alessandropascoli.it/teaching
Fondamenti CSS
Tipografia: scelta dei font (web-safe)
body {
font-family: "Times New Roman", Times, Georgia, serif; }
p { font-family: sans-serif; }
p { font-family: Arial, Helvetica, sans-serif; }
Caratteri web-safe: Famiglie generiche
- Verdana, Geneva, sans-serif; serif: con grazie
- Tahoma, Arial, Helvetica, sans-serif; (es. Georgia e Times New Roman)
- Georgia, Palatino, serif; sans-serif: senza grazie
- ‘Times New Roman’, Times, serif; (es. Arial, Verdana).
- ‘Courier New’, Courier, monospace; monospace: caratteri monospaziati
(il Courier, ad esempio, è utilizzato negli
editor testuali).
corsive
fantasy
alessandropascoli.it/teaching
Fondamenti CSS
Tipografia: scelta dei font (@font-face)
@font-face {
font-family: 'font_name';
src: url('font_name.eot?'), /*IE 6-7-8*/
url('font_name.woff') format('woff'), /*IE 9, Chrome 5+,
Firefox 3.6, Opera 10+*/
url('font_name.ttf') format('truetype'), /*Safari e varie
versioni di altri browser*/
url('font_name.svg#id34') format('svg'); /*vecchie versioni di
Android e di browser Webkit*/ }
body { font-family: ‘font_name’, Verdana, sans-serif; }
Con la proprietà @font-face è possibile caricare, all’interno delle pagine web, font non
standard salvati fisicamente all’interno della directory del sito web.
Ciò consente di visualizzare correttamente il font in tutti i browser anche quando esso non
è installato all’interno del device client.
alessandropascoli.it/teaching
Fondamenti CSS
Link
a:link { color: #000; text-decoration: underline; }
a:visited { color: #999; text-decoration: underline; }
a:hover { color: #900; text-decoration: none; }
a:active { color: #F00; text-decoration: none; }
a:focus { color: #900; text-decoration: none; }
Le pseudo-classi relative ai link devono essere dichiarate sempre nel seguente ordine:
link, visited, hover, active, e poi a seguire.
(LoVe HAte)
alessandropascoli.it/teaching
Fondamenti CSS
Immagini: bordi, sfondo
a img { border: none; }
body {
background-image: url(image1.png);
background-repeat: repeat-x;
background-color: #9CF;
background-attachment: fixed; }
#content {
margin: 2em 4em 2em 4em;
background-color: #FFFFFF;
padding: 1em 1em 40px 1em;
background-image: url(image2.png);
background-repeat: no-repeat;
background-position: right bottom; }
alessandropascoli.it/teaching
Fondamenti CSS
Immagini: sfondo con più immagini
html {
background-image: url(image1.png);
background-repeat: repeat-x;
background-color: #d2d7e4; }
body {
background-image: url(image2.png);
background-repeat: no-repeat;
background-position:98% 2%;
margin: 0;
padding: 50px 0 0 0; }
È possibile ottenere un effetto a più immagini aggiungendo uno sfondo agli elementi che
sono annidati, come il tag html o il tag body.
alessandropascoli.it/teaching
Fondamenti CSS3
Immagini: sfondo con più immagini
body {
background:
url(angel_01.png) repeat fixed 40% 40%,
url(angel_02.png) repeat fixed 25% 55%,
url(angel_01.png) repeat fixed 15% 15%,
url(moon.png) no-repeat fixed 95% 5%;
background-color:#06C; }
Con i CSS3 c'è la possibilità di impostare più immagini di background su uno stesso
elemento, specificandone il tipo di posizionamento, la ripetizione e le coordinate
attraverso la consueta sintassi. Possiamo vedere un interessante effetto applicato al body:
le immagini di sfondo utilizzate (delle png trasparenti) si sovrappongono in base all'ordine
delle dichiarazioni, ed essendo posizionate in percentuale si spostano e scorrono al resize
della finestra del browser. La proprietà background-color, essendo l'ultima dichiarazione, è
l'unica regola ad essere interpretata dai browser che non supportano gli sfondi multipli.
alessandropascoli.it/teaching
Fondamenti CSS
Liste
ul, ol, dl { padding: 0; margin: 0; /*A causa delle differenze
tra browser è buona norma impostare a zero il margine e la
spaziatura interna negli elenchi. Si può fare qui oppure nelle
voci degli elenchi (li, dt, dd).*/ }
Lorem ipsum dolor sit amet
!
Aliquam tincidunt mauris eu risus
Definition list
Consectetur adipisicing elit
Lorem ipsum dolor sit amet
Ut enim ad minim veniam
alessandropascoli.it/teachingFondamenti CSS
Liste: menu verticale 01
#navigation { width: 200px; }
/* 1. formatta l’elenco */
#navigation ul {
" list-style: none;
" margin: 0;
" padding: 0; }
/* 2. formatta le voci della lista con un
bordo inferiore */
Recipes #navigation li {
Contact Us " border-bottom: 1px solid #ED9F9F; }
Articles /* 3. formatta lo stile del link */
Buy Online #navigation li a:link,
#navigation li a:visited {
" display: block;
" padding: 0.4em 0 0.4em 0.5em;
" border-left: 12px solid #711515;
" border-right: 1px solid #711515;
" background-color: #B51032;
" color: #FFFFFF;
" text-decoration: none;}
/* 4. effetto rollover */
#navigation li a:hover {
" background-color: #711515;
" color: #FFFFFF; }
...
alessandropascoli.it/teachingFondamenti CSS
Liste: menu verticale 02
...
/* 5. rientro sinistro del sottoelenco */
#navigation ul ul {
" margin-left: 12px; }
/* 6. stili per il sottoelenco */
#navigation ul ul li {
" border-bottom: 1px solid #711515;
" margin:0; }
#navigation ul ul a:link,
Recipes #navigation ul ul a:visited {
" background-color: #ED9F9F;
Starters " color: #711515; }
Main Courses #navigation ul ul a:hover {
Desserts " background-color: #711515;
" color: #FFFFFF;}
Contact Us
Articles
Buy Online
alessandropascoli.it/teachingFondamenti CSS
Liste: menu orizzontale
#navig #navigation {
" font-size: 100%; }
/* 1. formatta l’elenco */
Recipes #navigation ul {
Contact Us " list-style: none;
Articles " margin: 0;
Buy Online " padding: 0; }
/* 2. formatta le voci della lista da
verticale a orizzontale */
#navigation li {
" display: inline; }
/* 3. formatta lo stile del link */
#navigation a:link,
#navigation a:visited {
" padding: 0.4em 1em 0.4em 1em;
" color: #FFFFFF;
" background-color: #B51032;
" text-decoration: none;
" border: 1px solid #711515; }
/* 4. effetto rollover */
#navigation a:hover {
" color: #FFFFFF;
" background-color: #711515; }
alessandropascoli.it/teachingFondamenti CSS Dropdown menu 01
Fondamenti CSS Dropdown menu 02
Fondamenti CSS
CSS sprite
ul#nav {
list-style-type: none;
padding: 0;
margin: 0; }
#nav a:link,
#nav a:visited {
display: block;
Recipes width: 150px;
Contact Us height: 20px;
Articles color: #000;
Buy Online text-decoration: none;
padding-left: 30px;
margin: 0 0 10px 0;
background-image: url(sprite.png);
background-repeat: no-repeat;
background-position: left top; }
#nav a:hover {
background-position: 0 -30px;
color: #F00; }
#nav a:active {
background-position: 0 -60px;
color: #0F0; }
alessandropascoli.it/teachingFondamenti CSS
Posizionamento { position: static }
.box { width: 200px; height: 200px;
position: static; }
#red { background: red; }
#green { background: green; }
#blue { background: blue; }
position: static (valore di default)
L’elemento static si posiziona normalmente secondo il
flusso del documento. Le proprietà left e top non si
applicano.
alessandropascoli.it/teachingFondamenti CSS
Posizionamento { position: relative } 01
.box { width: 200px; height: 200px;
position: relative; }
#red { background: red; }
#green { background: green; }
#blue { background: blue; }
position: relative
L’elemento relative si dispone esattamente come quello
posizionato con static.
alessandropascoli.it/teachingFondamenti CSS
Posizionamento { position: relative } 02
.box { width: 200px; !height: 200px;
position: relative; }
#red { background: red; }
#green { background: green;
left: 200px; }
#blue { background: blue; }
position: relative
L’elemento relative può essere spostato in modo relativo
alla sua posizione normale.
Aggiungendo un posizionamento offset all’elemento
#green questo farà riferimento alle coordinate del
documento stesso (es. 200px a partire da sinistra).
Un sistema di coordinate è un punto di riferimento per le
proprietà offset.
Quando un elemento #green è posizionato in modo
relativo, la posizione dell’elemento che segue #blue è
calcolata come se #green non fosse spostato.
alessandropascoli.it/teachingFondamenti CSS
Posizionamento { position: relative } 03
.box { width: 200px; !height: 200px;
position: relative; }
#red { background: red; }
#green { background: green;
left: 200px; }
#blue { background: blue; }
position: relative
Creare un sistema di coordinate per gli elementi figlio è
una caratteristica della proprietà di posizionamento
relativo.
Se piazziamo l'elemento #green all'interno di #red,
otterremo un risultato differente, poiché #green si
posizionerà relativamente al sistema di coordinate di
#red: a causa del nuovo sistema di coordinate, il blocco
#green misura il suo offset di 200 pixel dalla sinistra del
blocco #red invece che dal documento.
alessandropascoli.it/teachingFondamenti CSS
Posizionamento { position: absolute } 01
.box { width: 200px; height: 200px;
position: absolute; }
#red { background: red;
top: 0px; left: 0px; }
#green { background: green;
top: 0px; right: 0px; }
#blue { background: blue;
right: 0px; bottom: 0px; }
#yellow { background:yellow;
bottom: 0px; left: 0px; }
position: absolute
L’elemento absolute si posiziona in modo assoluto
rispetto al suo primo elemento padre e viene rimosso dal
flusso normale: significa che è possibile metterlo ovunque
e non influenzerà o sarà influenzato da nessun altro
elemento nel flusso.
Esattamente come un valore relative, gli elementi
posizionati assolutamente rispondono alle proprietà di
offset per il posizionamento.
Si può settare un elemento a top: 100px e left: 200px e
quell'elemento si piazzerà esattamente a 100 pixel dal top
e a 200 pixel dalla sinistra del documento.
alessandropascoli.it/teachingFondamenti CSS
Posizionamento { position: absolute } 02
.box { width: 200px; height: 200px;
position: absolute; }
#red { background: red;
top: 0px; left: 0px; }
#green { background: green;
top: 0px; right: 0px; }
#blue { background: blue;
right: 0px; bottom: 0px; }
#yellow { background:yellow;
bottom: 0px; left: 0px; }
.gray { background: gray;
position: absolute;
top: 10%; left: 10%;
width: 50px; height: 50px; }
position: absolute
Proprio come gli elementi relative, gli elementi absolute
creano un nuovo sistema di coordinate per gli elementi
figlio.
In questo esempio viene messo un elemento #gray in
ciascun blocco: le coordinate di offset sono prese rispetto
ad ogni elemento padre.
alessandropascoli.it/teachingFondamenti CSS
Posizionamento { position: absolute } 03
body { background: red; }
#box_black { position: absolute;
top: 30px; right: 30px;
bottom: 30px; left: 30px;
background: black; }
#box_yellow { position: absolute;
top: 50px; right: 50px;
bottom: 50px; left: 50px;
background: yellow; }
position: absolute
Usando le quattro proprietà di offset è possibile allargare
un elemento senza definirne larghezza o altezza: sarà
vincolato solo dall'elemento padre o dal documento
stesso.
In questo esempio è stato creato un effetto bordo nero
tramite offset di 30 pixel a partire dal documento ed è
interamente fluido al variare delle dimensioni del
documento.
(È stato dato un colore red a body solo per meglio
evidenziare l’effetto).
alessandropascoli.it/teachingFondamenti CSS
Posizionamento { position: absolute } 04
#box_sx { position: absolute;
top: 0; right: 30%;
bottom: 0; left: 0;
background: fuchsia; }
#box_dx { position: absolute;
top: 0; right: 0;
bottom: 0; left: 70%;
background: lime; }
position: absolute
In questo esempio si è creato un layout a due colonne che
riempie l'intera altezza del documento.
alessandropascoli.it/teachingFondamenti CSS
Posizionamento { position: fixed }
#box_content,
#box_footer p { width: 900px;
margin: 0 auto; }
#box_footer { position: fixed;
bottom: 0;
left: 0;
right: 0;
background: lime;
padding: 10px 0; }
Lorem ipsum dolor sit amet...
...
position: fixed
La posizione dell’elemento fixed è calcolata secondo il
Copyright © 2012 modello absolute, ma con la differenza che per fixed
l’elemento padre è sempre la viewport (la finestra del
browser o del device). Inoltre un elemento fixed non fa lo
scroll insieme al documento, ma rimane fisso.
In questo esempio le proprietà di offset left e right sono
impostate a zero: in questo modo è possibile stirare la
larghezza dell'elemento perché abbia la stessa
dimensione della viewport mentre agganciamo
l'elemento in fondo usando bottom: 0.
Il supporto nei browser più vecchi è irregolare.
alessandropascoli.it/teachingFondamenti CSS
Float 01
img { float: right;
margin: 10px; }
Quisque eget odio ac lectus...
...
Proin vel ante a orci tempus...
...
Etiam scelerisque, nunc ac egestas...
...
float
Un elemento float viene spostato a sinistra o a destra sulla
riga corrente, mentre il contenuto può scorrere lungo il
suo lato (o può essere impedito dal farlo dalla proprietà
clear). Il contenuto scorre lungo il lato destro di un
elemento flottato a sinistra e viceversa.
I suoi valori sono: left, right, none.
Eccetto che con le immagini che hanno una dimensione
intrinseca che il browser riconosce, float necessita sempre
la definizione di una dimensione orizzontale con la
proprietà width.
alessandropascoli.it/teachingFondamenti CSS
Float 02
.box { float: left;
width: 200px;
height: 200px; }
#red { background: red; }
#green { background: green; }
#blue { background: blue; }
float
Nel flusso normale ogni elemento di tipo block (div, p, h1,
etc.) si impila sopra l'altro verticalmente, dall'alto della
viewport verso il basso.
Gli elementi a cui è applicato il float passano dall'essere
uno sopra all'altro ad uno di fianco all'altro, purché vi sia
spazio sufficiente nell'elemento padre perché ogni
elemento a cui è applicato il float vi trovi spazio.
Se nell’elemento padre non c'è abbastanza spazio per
tutti, i blocchi float scendono su una seconda riga per
disporsi uno accanto all’altro.
alessandropascoli.it/teachingFondamenti CSS
Clear 02
.box { width: 200px; height: 200px; }
.float { float: left; }
.clear { clear: left; }
#red { background: red; }
#green { background: green; }
#blue { background: blue; }
#yellow { background:yellow; }
both: si dice all'elemento che il suo bordo superiore deve
stare sotto ad ogni elemento a cui è applicata la proprietà
left o right.
alessandropascoli.it/teachingFondamenti CSS3
CSS3
W3C CSS Specifications
http://www.w3.org/TR/CSS/
W3C Cascading Style Sheets
http://www.w3.org/Style/CSS/
W3C Ufficio Italiano
http://www.w3c.it/
Browser vendor prefixes
Principali ambiti di novità nei CSS3: Browser differenti talvolta implementano le nuove
— I selettori. proprietà CSS3 usando prefissi proprietari diversi a
— La gestione di bordi e sfondi. seconda del produttore.
Ciò significa che, al momento, è necessario ripetere una
— Funzionalità legate al testo e ai font. certa dichiarazione di una certa regola con il suo prefisso
— La definizione del colore. per ogni browser.
— Il layout.
Esempio:
— Media queries.
transition: all 0.3s ease-out;
— Transizioni, trasformazioni, animazioni. -moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
alessandropascoli.it/teachingFondamenti CSS3
Bordi: {border-radius} / 01
.box {
width: 50px; height: 50px;
padding: 50px; margin: 10px; float: left;
background: grey; text-align: center; }
#border-radius_A {
/* Android ≤ 1.6, iOS 1-3.2, Safari 3-4 */
-webkit-border-radius: 30px;
/* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+,
Opera 10.50+, Safari 5+ */
border-radius: 30px;
}
border-radius
#border-radius_B { Creare angoli arrotondati.
-webkit-border-radius: 30px 0px 30px 0px;
border-radius: 30px 0px 30px 0px; Definisce i valori di arrotondamento dei quattro angoli di
} un elemento.
È possibile applicare il medesimo valore a tutti e quattro
gli angoli e per entrambi i raggi orizzontale e verticale.
A È possibile applicare quattro valori per il raggio
orizzontale e quattro per il raggio verticale dell’angolo
divisi da uno slash “/”.
B È possibile applicare valori separati e differenti ai quattro
angoli (ottenendo angoli ellittici).
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
alessandropascoli.it/teachingFondamenti CSS3
Bordi: {border-radius} / 02
.box {
width: 50px; height: 50px;
padding: 50px; margin: 10px; float: left;
background: grey; text-align: center; }
#border-radius_C {
-webkit-border-radius: 30px 50px 80px
130px;
border-radius: 30px 50px 80px 130px;
}
#border-radius_D { border-radius
-webkit-border-radius: 30px 50px 80px Creare angoli arrotondati.
130px/130px 50px 80px 30px;
border-radius: 30px 50px 80px 130px/130px Definisce i valori di arrotondamento dei quattro angoli di
50px 80px 30px; un elemento.
} È possibile applicare il medesimo valore a tutti e quattro
gli angoli e per entrambi i raggi orizzontale e verticale.
È possibile applicare quattro valori per il raggio
C orizzontale e quattro per il raggio verticale dell’angolo
divisi da uno slash “/”.
È possibile applicare valori separati e differenti ai quattro
D angoli (ottenendo angoli ellittici).
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
alessandropascoli.it/teachingFondamenti CSS3
Bordi: {border-radius} / 03
.box {
width: 50px; height: 50px;
padding: 50px; margin: 10px; float: left;
background: grey; text-align: center; }
#border-radius_E {
-webkit-border-radius: 150px;
border-radius: 150px;
}
E border-radius
Creare angoli arrotondati.
Definisce i valori di arrotondamento dei quattro angoli di
un elemento.
È possibile applicare il medesimo valore a tutti e quattro
gli angoli e per entrambi i raggi orizzontale e verticale.
È possibile applicare quattro valori per il raggio
orizzontale e quattro per il raggio verticale dell’angolo
divisi da uno slash “/”.
È possibile applicare valori separati e differenti ai quattro
angoli (ottenendo angoli ellittici).
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
alessandropascoli.it/teachingFondamenti CSS3
Ombre: {box-shadow} / 01
.box {
width: 50px; height: 50px;
padding: 50px; margin: 10px;
float: left; text-align: center;
background-color: #FF0; }
#box-shadow_A {
/* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
-webkit-box-shadow: 5px 5px 10px 3px #666;
/* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
box-shadow: 5px 5px 10px 3px #666; box-shadow
} Aggiungere ombra ad un elemento.
box-shadow: 5px 5px 10px 3px #666;
#box-shadow_B {
-webkit-box-shadow: inset 5px 5px 10px 3px Il primo valore (5px) sposta l'ombra in orizzontale.
#666; Il secondo valore (5px) sposta in verticale.
box-shadow: inset 5px 5px 10px 3px #666; È possibile usare valori negativi.
} Questi due valori sono obbligatori.
Il terzo valore (10px) determina la sfocatura (blur radius)
dell'ombra: un più alto valore equivale ad una maggiore
A sfocatura. Zero (0) determina un'ombra netta.
Non è possibile usare valori negativi.
Il quarto valore (3px) definisce il grado di diffusione
B (spread radius) dell'ombra: con alti valori l'ombra si
espande in tutte le direzioni.
È possibile usare valori negativi determinando un’ombra
sempre più contratta sino a scomparire.
Chiude con il colore dell’ombra (#666).
alessandropascoli.it/teachingFondamenti CSS3
Ombre: {box-shadow} / 02
.box {
width: 50px; height: 50px;
padding: 50px; margin: 10px;
float: left; text-align: center;
background-color: #FF0; }
#box-shadow_C {
-webkit-box-shadow: -5px -5px 10px 3px
#F00, 5px 5px 10px 3px #00F;
box-shadow: -5px -5px 10px 3px #F00, 5px box-shadow
5px 10px 3px #00F; Aggiungere ombra ad un elemento.
}
È possibile definire più ombre, separando le definizioni
dei valori di ciascuna ombra con una virgola (,).
C
alessandropascoli.it/teachingFondamenti CSS3
Sfondi: {background: linear-gradient}
background: linear-gradient
background-image: linear-gradient
Definire una sfumatura lineare come immagine di sfondo.
background: linear-gradient (top, #F0F 0%, #FF0 100%);
È possibile definire il punto di partenza (top) tra le seguenti
parole chiave: top, top left, top right, bottom, bottom left,
bottom, right, left right. Poi si imposta il primo colore (#F0F)
e il valore offset che definisce il punto in cui il colore
compare (0% o 0.0/1.0). Quindi si imposta il secondo colore
(FF0). È possibile usare più colori.
Vedi: http://www.colorzilla.com/gradient-editor/
#box { position:absolute; left:30px; top:30px; right:30px; bottom:30px; }
.linear-gradient {
background: #ff00ff;/*Old browsers*/
background: -moz-linear-gradient(top, #ff00ff 0%, #ffff00 100%);/*FF3.6+*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff00ff),
color-stop(100%, #ffff00));/*Chrome,Safari4+*/
background: -webkit-linear-gradient(top, #ff00ff 0%, #ffff00 100%);/*Chrome10+,Safari5.1+*/
background: -o-linear-gradient(top, #ff00ff 0%, #ffff00 100%);/*Opera 11.10+*/
background: -ms-linear-gradient(top, #ff00ff 0%, #ffff00 100%);/*IE10+*/
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff00ff',
endColorstr='#ffff00', GradientType=0 );/*IE6-9*/
background: linear-gradient(top, #ff00ff 0%, #ffff00 100%); }
alessandropascoli.it/teachingFondamenti CSS3
Sfondi: {background: radial-gradient}
background: radial-gradient
background-image: radial-gradient
Definire una sfumatura lineare come immagine di sfondo.
background: radial-gradient (center, ellipse cover, #0F0
0%, #00F 100%); }
È possibile definire il punto di origine (center) tra le seguenti
parole chiave o una loro combinazione: top, bottom, middle,
left, center, right. Poi si definisce la forma della sfumatura:
circle o ellipse. Quindi i colori.
Vedi: http://ie.microsoft.com/testdrive/Graphics/
CSSGradientBackgroundMaker/Default.html
#box { position:absolute; left:30px; top:30px; right:30px; bottom:30px; }
.radial-gradient {
background: #00ff00;
background: -moz-radial-gradient(center, ellipse cover, #00ff00 0%, #0000ff 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-
stop(0%, #00ff00), color-stop(100%, #0000ff));
background: -webkit-radial-gradient(center, ellipse cover, #00ff00 0%, #0000ff 100%);
background: -o-radial-gradient(center, ellipse cover, #00ff00 0%, #0000ff 100%);
background: -ms-radial-gradient(center, ellipse cover, #00ff00 0%, #0000ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00',
endColorstr='#0000ff', GradientType=1 );
background: radial-gradient (center, ellipse cover, #00ff00 0%, #0000ff 100%); }
alessandropascoli.it/teachingFondamenti CSS3
Sfondi: {background-size}
body {
background: url(background.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
-moz-background-size: 50% 50%;
-o-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
background-size: 50% 50%; }
background-size
Definire le dimensioni delle immagini usate come sfondo.
background-size: 50% 50%;
background-size: 200px 50px;
È possibile definire le dimensioni sia in percentuale che
in unità di misura.
Il primo valore corrisponde alla larghezza, il secondo
all’altezza.
Se si usa un solo valore, il secondo è uguale ad auto.
alessandropascoli.it/teachingFondamenti CSS3
Sfondi: {background-size: cover}
body {
background: url(background.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover; }
background-size
Definire le dimensioni delle immagini usate come sfondo.
background-size: cover;
Usando la parola chiave cover, l'immagine si
ridimensiona per riempire totalmente lo sfondo
dell'elemento: è possibile che alcune parti dell’immagine
siano tagliate per mantenere ratio, dimensioni e rapporti.
alessandropascoli.it/teachingFondamenti CSS3
Sfondi: {background-size: contain}
body {
background: url(background.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
-moz-background-size: contain;
-o-background-size: contain;
-webkit-background-size: contain;
background-size: contain; }
background-size
Definire le dimensioni delle immagini usate come sfondo.
background-size: contain;
Usando la parola chiave contain, l'immagine si
ridimensiona per adattarsi all'elemento: nessuna parte
dell’immagine sarà tagliata, ma alcune aree dello sfondo
potrebbero essere non riempite.
alessandropascoli.it/teachingFondamenti CSS3
Colore: {opacity}
body { background: url(background.jpg); }
.box {
width: 100px; height: 400px;
padding: 50px; margin: 10px;
float: left; text-align: center;
background-color: #F00; }
#opacity_03 {
opacity: 0.3;
filter: alpha(opacity=30); /* IE6-IE8 */ }
#opacity_06 {
opacity: 0.6;
filter: alpha(opacity=60); /* IE6-IE8 */ }
#opacity_09 {
opacity: 0.9;
filter: alpha(opacity=90); /* IE6-IE8 */ }
opacity
Definire la trasparenza di un elemento.
Opacity 0.3 opacity: 0.3
Di default ogni elemento ha un valore pari a 1.0
Opacity 0.6 (completamente opaco). Valori inferiori a 1.0
determinano la sua trasparenza fino ad arrivare a 0.0
(completamente trasparente).
Opacity 0.9 Opacity viene ereditata da tutti gli elementi discendenti.
alessandropascoli.it/teachingFondamenti CSS3
Colore: {rgba}
body { background: url(background.jpg); }
.box {
width: 100px; height: 400px;
padding: 50px; margin: 10px;
float: left; text-align: center; }
#rgba_03 {
background-color: rgba(0, 255, 0, 0.3); }
#rgba_06 {
background-color: rgba(0, 255, 0, 0.6); }
#rgba_09 {
background-color: rgba(0, 255, 0, 0.9); }
RGBa 0.3
rgba
RGBa 0.6 Definire il colore di un elemento e la sua trasparenza alfa
rgba(0%, 100%, 0%, 0.3); = rgba(0, 255, 0, 0.3);
RGBa 0.9 Le notazioni Red, Green e Blue possono essere espresse in
percentuale o valori da 0 a 255.
Il canale Alfa, che determina la trasparenza, si esprime
usando valori tra 0.0 (completamente trasparente) e 1.0
(completamente opaco).
alessandropascoli.it/teachingFondamenti CSS3 Media queries È possibile usare media query per specificare quali CSS usare in base a certe caratteristiche segnalate di un dispositivo. Il browser nel dispositivo controlla la media query, quindi usa il corrispondente CSS per visualizzare la pagina web. /* La seguente media query specifica il file phone.css per dispositivi larghi da 320 a 480 pixel. */ La seconda parte di una media query, quella con le caratteristiche del tipo di media, va posta tra parentesi tonde. È possibile esprimere più media queries separandole da una virgola. alessandropascoli.it/teaching
Fondamenti CSS3
Media queries: media
Una media query prevede l'uso di un tipo di
media per cui devono essere usati gli stili
CSS.
Ad esempio, telefono, TV, tablet, etc.
Se non specificato, gli stili CSS sono rivolti a
tutti i media.
all per tutti i dispositivi di visualizzazione;
screen schermo di computer;
print pagina stampata;
projection presentazioni e proiezioni;
speech dispositivi a sintesi vocale;
braille supporti basati sull'uso del braille;
embossed stampanti braille;
handheld dispositivi mobili con schermo piccolo
o con browser con limitate capacità grafiche;
tty dispositivi a carattere fisso come i terminali;
tv visualizzazione su schermi televisivi.
alessandropascoli.it/teachingFondamenti CSS3 Media queries: and, not, only Una media query è un'espressione logica, che può essere vera o falsa. È vera se soddisfa tutte le condizioni espresse nella query facendo anche ricorso a operatori logici. and esegue un'unione logica tra due espressioni: @media screen and (color) Questa media query sarà vera se la pagina viene visualizzata su uno schermo di computer a colori. not nega il risultato della query: @media screen and (not color) only nasconde il foglio di stile agli user agent più datati: @media only screen and (color) Vecchi browser salteranno questa dichiarazione. alessandropascoli.it/teaching
Fondamenti CSS3
Media queries: come e dove dichiarare
@media
@import
Dichiarare una media query in con l'attributo media dell'elemento link:
Dichiarare una media query all'interno di un foglio di stile con la direttiva @media:
@media screen and (color) {
/* qui vanno le regole CSS */
}
Dichiarare una media query all'interno di un foglio di stile con la direttiva @import:
@import url(colore.css) screen and (color);
alessandropascoli.it/teachingFondamenti CSS3
Media queries: (width)
(width: )
(min-width: )
(max-width: )
Definisce la larghezza della viewport,
non le dimensioni dello schermo del
dispositivo.
@media screen
and (min-width: 768px)
and (max-width: 1024px) {
#box1 { color: red; }
}
/* Quando la larghezza della finestra è compresa tra 768px e
1024px il testo in #box1 diventa rosso */
alessandropascoli.it/teachingFondamenti CSS3 Media queries: (height) (height: ) (min-height: ) (max-height: ) Definisce l'altezza della viewport. alessandropascoli.it/teaching
Fondamenti CSS3
Media queries: (device-width)
(device-width: )
(min-device-width: )
(max-device-width: )
Definisce la larghezza dello schermo intero
del dispositivo (area di rendering).
/* Smartphones (portrait and landscape) */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* qui vanno le regole CSS */
}
alessandropascoli.it/teachingFondamenti CSS3 Media queries: (device-height) (device-height: ) (min-device-height: ) (max-device-height: ) Definisce l’altezza dello schermo intero del dispositivo (area di rendering). alessandropascoli.it/teaching
Fondamenti CSS3
Media queries: (aspect-ratio)
(aspect-ratio: 3/4)
(min-aspect-ratio: 3/4)
(max-aspect-ratio: 3/4)
Definisce il rapporto tra larghezza (width) e
altezza (height) della viewport.
@media screen
and (aspect-ratio: 3/4) {
/* qui vanno le regole CSS */
}
alessandropascoli.it/teachingFondamenti CSS3
Media queries: (device-aspect-ratio)
(device-aspect-ratio: 16/9)
(min-device-aspect-ratio: 16/9)
(max-device-aspect-ratio: 16/9)
Definisce il rapporto tra larghezza (device-
width) e altezza (device-height) dello
schermo intero del dispositivo (area di
rendering).
@media screen
and (device-aspect-ratio: 16/9),
screen and (device-aspect-ratio: 3/4) {
/* qui vanno le regole CSS */
}
alessandropascoli.it/teachingFondamenti CSS alessandropascoli.it/teaching
Puoi anche leggere
