CSS Introduzione ai Cascading Style Sheet - Dott. Ing. Ivan Ferrazzi V1.7 del 04/01/2018
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
Dott.Ing.Ivan Ferrazzi
CSS
Introduzione
ai
Cascading Style Sheet
Dott. Ing. Ivan Ferrazzi
V1.7 del 04/01/2018
1/45Dott.Ing.Ivan Ferrazzi
Copyright ©2017 Dott.Ing. Ivan Ferrazzi
Permission is granted to copy, distribute and/or modify this
document under the terms of the GNU Free Documentation
License, Version 1.2 or any later version published by the
Free Software Foundation; with no Invariant Sections, no
Front-Cover Texts, and no Back-Cover Texts.
2/45Dott.Ing.Ivan Ferrazzi
Indice generale
INTRODUZIONE....................................................................................................4
I METODI DEL CSS...............................................................................................5
CSS in linea......................................................................................................5
CSS a stile incorporato nella pagina................................................................6
CSS in un foglio esterno...................................................................................6
LE CLASSI............................................................................................................8
LAVORARE CON GLI ID.........................................................................................9
GLI STILI.............................................................................................................10
I parametri di stile per il testo.......................................................................10
I parametri di stile per i caratteri...................................................................12
I parametri di stile per il box-model...............................................................13
I parametri di stile per definire le posizioni....................................................17
I parametri di stile per la visibilità.................................................................19
I parametri di stile per lo sfondo....................................................................20
I parametri di stile per le liste........................................................................22
I parametri di stile per le tabelle....................................................................23
RAGGRUPPAMENTO E NIDIFICAZIONE................................................................24
Raggruppamento di stili.................................................................................24
Elementi nidificati..........................................................................................24
Nidificazione padre/figlio................................................................................25
Stile per elemento a seguire..........................................................................25
Stile per tutti gli elementi a seguire..............................................................26
PSEUDO-CLASSI ED ELEMENTI...........................................................................27
Pseudo-classi per il tag a...............................................................................27
Pseudo-classe per il primo figlio....................................................................28
Pseudo-classe per elementi con il focus........................................................28
Pseudo-elementi su testi in elementi a blocco...............................................28
Pseudo-elementi per l'aggiunta di contenuto................................................29
MEDIA QUERIES.................................................................................................30
Come integrare le media queries...................................................................30
Tipi di dispositivi............................................................................................31
Caratteristiche di dispositivi..........................................................................31
CSS3..................................................................................................................34
Stili per i contenitori ed i loro contenuti.........................................................34
Importazione di font aggiuntivi......................................................................38
Stili per la trasformazione degli elementi......................................................39
Effetti di transizione.......................................................................................40
Effetti di animazione......................................................................................42
LE VARIE UNITA'.................................................................................................44
Le unità di misura per le dimensioni..............................................................44
I valori assoluti...............................................................................................44
I valori relativi................................................................................................45
I valori assoluti...............................................................................................45
I valori di posizionamento..............................................................................45
3/45Dott.Ing.Ivan Ferrazzi
INTRODUZIONE
I CSS nascono con lo scopo di facilitare la gestione della formattazione di
pagine web, infatti questi possono definire ad esempio il colore di sfondo, il
tipo e colore dei caratteri, l'impaginazione dei documenti ecc.
Questa gestione della formattazione ci semplifica notevolmente il lavoro di
manutenzione o di modifica di un sito, basti pensare a un sito web composto da
centinaia di pagine, le quali fanno riferimento ad uno stile, la modifica di
questo produrrebbe un cambiamento dello stile di tutte le pagine.
I CSS si possono utilizzare in tre modi:
● in linea, cioè inseriti direttamente nel tag HTML,
● a stile incorporato, cioè inseriti ad inizio pagina nel HEAD,
● In un foglio di stile esterno, cioè un file con estensione .css che contiene
tutti gli stili ai quali fa riferimento la pagina web.
Gli stili devono rispettare delle regole di sintassi, gli attributi vanno racchiusi tra
parentesi graffe {...}, per simbolo di uguaglianza si utilizzano i due punti (:) e
più attributi si separano con il punto e virgola (;).
Per esempio:
P {textalign: justify; color:red; fontsize:32pt;}
4/45Dott.Ing.Ivan Ferrazzi
I METODI DEL CSS
Vediamo ora i tre modi con i quali possiamo utilizzare le direttive CSS.
CSS in linea
La modalità in linea si adotta per assegnare uno stile ad una parte di
codice, senza che questo vada a influire sul resto della pagina.
Lo stile viene inserito direttamente nel tag HTML, utilizzando l'attributo
STYLE. Esempio:
ciao
Questo stile non sarà esteso a tutti gli SPAN ma si limiterà a modificare lo
stile del colore e la grandezza del carattere di tutto ciò che è compreso
solo tra l'apertura e la chiusura di questo SPAN.
Per quanto riguarda la sintassi gli stili devono essere racchiusi tra
virgolette o apici e separati da punto e virgola, preceduti dall'attributo
STYLE=.
L'attributo STYLE può essere associato a quasi tutti i tag HTML, ma
soprattutto vengono utilizzati quei tag che fanno da “contenitori”, cioè
se usati da soli non producono alcun effetto, ma utilizzati in combinazione
con gli stili modificano tutto ciò che contengono, come , ,
, , , ecc.
DIV produce un ritorno a capo con la sua chiusura, mentre SPAN no e si
può utilizzare anche all'interno di un DIV. Esempio:
5/45Dott.Ing.Ivan Ferrazzi
ciao mi chiamo ivan
CSS a stile incorporato nella pagina
Lo stile incorporato è un modo per definire uno stile che dovrà assumere
un tag, il quale sarà adottato da tutta quella tipologia di tag presenti nella
pagina. Questo fa si che non bisogna definire ogni volta all'interno di un
tag lo stile, ma lo si può definire una volta sola all'interno di HEAD.
Questo metodo non impedisce di utilizzare lo stile in linea, che ha
prevalenza su quello incorporato.
La sintassi per lo stile incorporato, prevede che lo stile sia inserito nel
HEAD e che che sia compreso dall'apertura e chiusura del tag STYLE con
dichiarazione dell'attributo TYPE es:
span {
color: red;
font-size: 12pt;
font-family: Arial,Verdana;
}
Così facendo si stabilisce gli stili che dovranno adottare tutti gli SPAN
della pagina. Se si avesse bisogno di commentare uno stile, questo deve
essere racchiuso tra /* e */. Esempio:
span {
color: red; /* colore rosso*/
font-size: 54pt; /* grandezza carattere */
}
CSS in un foglio esterno
Gli stili oltre alla modalità in linea e alla modalità integrata ad inizio
pagina, possono essere inseriti tramite un foglio esterno, separato dalla
pagina, la quale ne fa solo un richiamo.
Questo non preclude l'utilizzo della modalità in linea o di quella integrata
ad inizio pagina, che avrebbero priorità sul foglio esterno.
Il foglio esterno non è altro che un file di testo dove andremo a scrivere
semplicemente tutti gli stili che vogliamo, ma dovrà essere salvato con
estensione .css.
Dal punto di vista sintattico, basta scrivere le dichiarazioni di stile come
quelle integrate ad inizio pagina, ad esempio:
6/45Dott.Ing.Ivan Ferrazzi
span {
color: Red;
font-size: 67pt;
}
p {
color: Yellow;
font-family:Arial, ”MS Sans Serif”;
}
Un parametro dello stile composto da più parole, come potrebbe essere
un tipo di scrittura, bisogna racchiuderlo tra virgolette (vedi esempio
precedente).
Ora basta salvare il file con estensione .css per far si che si possa
richiamare dalla pagina.
Il richiamo avviene mediante il comando:
compreso tra
oppure con @import url(nome_file.css); compreso tra i tag
I CSS a stile incorporato oppure quelli esterni possono assegnare uno stile
anche a determinati elementi di un tag. Possiamo ad esempio attivarlo uno
stile per il tag ma solo per gli elementi di tipo text come segue:
input[type=”text”] {background-color:blue}
7/45Dott.Ing.Ivan Ferrazzi
LE CLASSI
Un modo molto pratico ed utilizzato per definire gli stili sono le classi, un
sistema mediante il quale si creano degli stili, battezzandoli con un nome, il
quale verrà richiamato dal tag.
É possibile così creare quanti stili vogliamo, attribuendogli nomi diversi
richiamandoli ogni volta ce ne sia il bisogno.
Per definire una classe basta digitare un nome preceduto da un punto (.) al
posto del nome del tag nella dichiarazione di stile. Esempio:
.mio_stile {
color: red;
font-size: 56pt;
font-style: italic;
}
La scelta del nome non ha importanza, ma sarebbe meglio sceglierlo attinente
allo stile, così che quando lo si utilizzerà verrà ricordato più facilmente. Inoltre
si possono utilizzare solo lettere maiuscole e minuscole, underscore (_), trattini
(-) e numeri, dovi i numeri non devono stare in prima posizione.
Ora basta solo richiamare la classe dal tag HTML
....
Nel richiamo allo stile, che si fa con l'attributo class, non si inserisce il punto
davanti al nome. Le classi sono supportate da tutti i tag HTML. Si possono
utilizzare anche più stili combinati inserendo i nomi divisi da spazi vuoti.
8/45Dott.Ing.Ivan Ferrazzi
LAVORARE CON GLI ID
I CSS ci danno la possibilità di utilizzare gli ID, cioè degli identificatori
attribuibili a qualsiasi tag. Lo scopo degli identificatori è quello di poter indicare
univocamente l'oggetto all'interno della nostra struttura HTML.
Il funzionamento è semplice, in quanto sono molto simili alle classi, basta
definire un ID nello STYLE interno o esterno che sia, dargli un nome preceduto
dal cancelletto (#). Esempio:
#nome {
position: absolute;
top: 40px;
left: 32px;
z-index: 1;
}
L'ID va naturalmente inserito all'interno del tag con l'apposito attributo:
ciao
Per il nome possiamo utilizzare lettere maiuscole o minuscole, underscore (_),
trattini (-) oppure numeri, dove i numeri non possono stare in prima posizione.
9/45Dott.Ing.Ivan Ferrazzi
GLI STILI
I parametri di stile per il testo
text-align: left|right|center|justify;
Questo stile permette di modificare l'allineamento del testo.
left allineamento a sinistra
right allineamento a destra
center centrato
justify giustificato
Esempi:
P {text-align: left;}
P {text-align: right;}
DIV {text-align: center;}
DIV {text-align: justify;}
text-decoration: overline|underline|line-through|blink|none;
Questo stile permette di modificare la decorazione del testo.
overline sopralineato
underline sottolineato
line-through sbarrato
blink lampeggiante
none senza
Esempi:
10/45Dott.Ing.Ivan Ferrazzi
H1 {text-decoration: overline;}
P {text-decoration: underline;}
DIV {text-decoration: overline underline;}
P {text-decoration: line-through;}
P {text-decoration: blink;}
P {text-decoration: none;}
font-style: normal|italic|oblique;
Questo stile permette di modificare la proprietà stile del testo.
normal stile di default
italic stile corsivo
oblique sitle obliquo
text-indent: {rientro di pixel} | {rientro in percentuale};
Questo stile permette di modificare l'indentazione del testo.
Esempi:
P {text-indent: 12px;}
DIV {text-indent: 20%;}
text-transform: capitalize|uppercase|lowercase;
Questa direttiva di stile permette di effettuare delle trasformazioni del
testo.
capitalize trasforma in maiuscola la prima lettera di ogni parola
uppercase trasforma tutto in maiuscolo
lowercase trasforma tutto in minuscolo
Esempi:
P {text-transform: capitalize;}
P {text-transform: uppercase;}
P {text-transform: lowercase;}
line-height: normal|{numero}|{percentuale};
Questo parametro di stile permette di definire lo spazio di interlinea,
quindi lo spazio tra le singole righe.
normal interlinea normale
{numero} interlinea espressa in em
{percentuale} interlinea espressi in percentuale
Esempi:
P {line-height: 3em;}
DIV {line-height: 50%;}
11/45Dott.Ing.Ivan Ferrazzi
letter-spacing: numero;
Questo parametro di stile permette di definire lo spazio tra le lettere
espresso dal valore di numero.
Esempi:
P {letter-spacing: 1em;}
DIV {letter-spacing: 2px;}
direction: rtl|ltr;
Con questo attributo possiamo definire la direzione del testo.
rtl il testo va da destra verso sinistra
ltr il testo va da sinistra verso destra
Esempi:
DIV {direction: rtl}
I parametri di stile per i caratteri
font-family: tipo_carattere1,tipo_carattere2,...;
Questo parametro di stile permette di definire il tipo di carattere da
utilizzare per il testo desiderato. I vari font devono essere separati da
virgola. Specificando più font si ha la possibilità di definire un font
alternativo in caso in cui il primo non sia presente sulla macchina del
visitatore.
Esempi:
P {font-family: verdana, arial, sans-serif;}
DIV {font-family: "MS Sans Serif", verdana, sans-serif;}
font-size: valore;
Questo attributo permette di definire la dimensione del testo espresso in
punti (pt), pixel (px), in percentuale oppure usando la proprietà del testo
come ad esempio larger.
Esempi:
P {font-size: 9pt;}
I {font-size: larger;}
B {font-size: 18px;}
H1 {font-size: 150%;}
font-style: normal|italic|oblique;
Questo attributo permette di definire lo stile da utilizzare per il blocco
desiderato.
Esempi:
H1 {font-style: normal;}
12/45Dott.Ing.Ivan Ferrazzi
P {font-style: italic;}
B {font-style: oblique;}
font-variant: normal|small-caps;
Questo parametro permette di definire delle varianti allo stile da
apportare al testo desiderato.
Esempi:
P {font-variant: small-caps;}
B {font-variant: normal;}
font-weight: bold|normal|{valore};
Con questo attributo possiamo definire lo spessore da utilizzare per la
visualizzazione del testo.
bold grassetto
normal spessore normale
valore valore numerico compreso tra 100 (normale) a 700
(grassetto)
Esempi:
P {font-weight: bold;}
H1 {font-weight: 700;}
color: valore;
Questo parametro permette di definire il colore da utilizzare espresso in
valore esadecimale, come colore in lingua inglese, oppure con l'utilizzo di
rgb(r,g,b).
Esempi:
P {color: red;}
DIV {color: #990099;}
H1 {color: rgb(255,0,0);}
I parametri di stile per il box-model
Intorno ai vari contenuti HTML sono presenti degli spazi ben definiti che
permettono di modificare le proprietà di layout dell'elemento stesso.
L'elemento base è l'area all'interno della quale viene mostrato il contenuto
dell'elemento. Intorno a questa troviamo il bordo ( border), mentre tra questi due
si trova un'area che ci permette di staccare il contenuto dal bordo ( padding).
Intorno al bordo troviamo un'ulteriore area (outline) che possiamo formattare
così come formattiamo lo stile del bordo. L'ultimo spazio utilizzabile è il
margine (margin) che ci permette di staccare l'elemento visualizzato dagli altri
elementi presenti all'interno della pagina.
13/45Dott.Ing.Ivan Ferrazzi
Il box-model può essere quindi rappresentato come segue:
margin
outline
border
padding
contenuto
Negli elementi di tipo block oppure inline-block è possibile utilizzare le seguenti
proprietà che permettono di modificare la larghezza e l'altezza del elemento in
questione.
width: {valore in pixel}|{valore percentuale}|auto
Questo parametro permette di definire la larghezza del contenitore.
Esempio:
#css {position: absolute; width: 300px; left: 100px; top: 50px;}
height: {valore in pixel}|{valore percentuale}|auto
Questo parametro permette di definire l'altezza del contenitore.
Esempio:
#css {position: absolute; height: 400px; ... }
Attenzione, perché di default width e height modificano solo ed esclusivamente
lo spazio messo a disposizione per il contenuto. Questo vuol dire che tutti gli
eventuali parametri settati in aggiunta vanno sommati al valore iniziale.
L'intero spazio in larghezza che il browser deve dedicare ad un elemento è
quindi:
width + padding-left + padding-right + border-left + border-right + outline-left
+ outline-right + margin-left + margin-right
Spesso e volentieri non si tiene conto del outline perché poco utilizzato.
Abbiamo quindi:
14/45Dott.Ing.Ivan Ferrazzi
width + padding-left + padding-right + border-left + border-right + margin-left
+ margin-right
Come proprietà per lo spazio tra il contenuto ed il bordo usiamo: padding,
padding-top, padding-left, padding-right e padding-bottom.
padding: valore [valore [valore valore]];
Questo parametro permette di definire lo spazio definendo ogni spazio, lo
spazio alto-basso e sinistro-destro, oppure i quattro valori separati. Il
valore viene assegnato come valore fisso o percentuale.
padding-top: valore;
Questo parametro permette di definire lo spazio superiore di un
componente. Il valore viene assegnato come valore fisso o percentuale.
padding-left: valore;
Questo parametro permette di definire lo spazio sinistro di un
componente. Il valore viene assegnato come valore fisso o percentuale.
padding-right: valore;
Questo parametro permette di definire lo spazio destro di un
componente. Il valore viene assegnato come valore fisso o percentuale.
padding-bottom: valore;
Questo parametro permette di definire lo spazio inferiore di un
componente. Il valore viene assegnato come valore fisso o percentuale.
Come proprietà per il bordo troviamo: border-style, border-width e border-color.
border-style: valore [valore [valore valore]];
Questo parametro permette di definire lo stile del bordo utilizzato.
none non viene utilizzato bordo
dotted bordo punteggiato
dashed bordo tratteggiato
solid bordo solido
double bordo doppio
groove bordo 3D incavo
ridge bordo 3D concavo
inset bordo 3D abbassato
outset bordo 3D inalzato
border-width: valore;
Questo parametro permette di definire lo spessore del bordo.
15/45Dott.Ing.Ivan Ferrazzi
border-color: valore;
Questo parametro permette di definire il colore del bordo, per i valori
vedere color.
Come proprietà per l'area intorno al bordo troviamo: outline-style, outline-
width e outline-color.
outline-style: valore [valore [valore valore]];
Questo parametro permette di definire lo stile dell'area intorno al bordo
utilizzato.
none non viene utilizzato bordo
dotted bordo punteggiato
dashed bordo tratteggiato
solid bordo solido
double bordo doppio
groove bordo 3D incavo
ridge bordo 3D concavo
inset bordo 3D abbassato
outset bordo 3D inalzato
outline-width: valore;
Questo parametro permette di definire lo spessore dell'area intorno al
bordo.
outline-color: valore;
Questo parametro permette di definire il colore dell'area intorno al bordo,
per i valori vedere color.
Come proprietà per il margine possiamo usare: margin, margin-top, margin-left,
margin-right e margin-bottom.
margin: valore [valore [valore valore]];
Questo parametro permette di definire il margine di un componente
definendo ogni margine, il margine alto-basso e sinistro-destro, oppure i
quattro valori separati. Il valore viene assegnato come valore fisso o
percentuale.
margin-top: valore;
Questo parametro permette di definire il margine superiore di un
componente. Il valore viene assegnato come valore fisso o percentuale.
margin-left: valore;
Questo parametro permette di definire il margine sinistro di un
16/45Dott.Ing.Ivan Ferrazzi
componente. Il valore viene assegnato come valore fisso o percentuale.
margin-right: valore;
Questo parametro permette di definire il margine destro di un
componente. Il valore viene assegnato come valore fisso o percentuale.
margin-bottom: valore;
Questo parametro permette di definire il margine inferiore di un
componente. Il valore viene assegnato come valore fisso o percentuale.
Per quanto riguarda il margine abbiamo l'effetto overlapping. Questo vuol dire
che definendo il margine su due elementi vicini il margine che si ottiene tra i
due elementi sarà quello più ampio tra i due. Se il primo elemento ha un
margine di 20px ed il secondo di 25px, lo spazio fra i due elementi sarà di 25px
perché i due margini si sovrappongono.
Se un elemento si trova all'interno di un contenitore il margine superiore ed
inferiore del elemento subiranno un overflow, ossia verranno inseriti al di fuori
dal contenitore, a meno che questo non abbia un padding oppure un border
settato.
Questo strano effetto si annulla utilizzando il float (che vediamo più avanti).
Con la seguente proprietà possiamo dire al browser cosa deve essere compreso
nella dimensione definita da width e height.
box-sizing: content-box|border-box;
Questo parametro permette di definire l'effettiva dimensione del
elemento.
content-box valore di default la dimensione è quella del contenuto
border-box la dimensione comprende anche padding e border
I parametri di stile per definire le posizioni
position: absolute|fixed|relative|static
Questo parametro permette di definire la posizione del contenitore di
appartenenza.
absolute definisce una posizione assoluta; come riferimento
viene preso il primo contenitore “padre” con
posizionamento non statico; se non ne trova usa come
riferimento l'elemento body. I valori iniziali di top e left
saranno quelli necessari per spostare l'elemento dalla
sua posizione assoluta a quella statica.
fixed stacca l'elemento dalla struttura statica e utilizza come
riferimento di posizionamento la finestra del browser
17/45Dott.Ing.Ivan Ferrazzi
all'interno della quale viene inserito; l'elemento rimane
fisso anche se la pagina viene scrollata. I valori iniziali
di top e left saranno quelli necessari per spostare
l'elemento dall'angolo in alto a sinistra del browser a
quella statica.
relative stacca l'elemento dalla struttura statica, ma utilizza
come riferimento il proprio posizionamento all'interno
della stessa struttura
static si ottiene un posizionamento naturale anche se le
coordinate sono uguali per oggetti diversi questi non si
sovrappongono
Esempio:
#css {position: absolute;; left: 100px; top: 50px;}
top: {valore in pixel}|{valore percentuale}|auto
Questo parametro permette di definire il margine superiore.
Esempio:
#css {position: absolute; top: 50px; left: 100px;}
left: {valore in pixel}|{valore percentuale}|auto
Questo parametro permette di definire il margine sinistro.
Esempio:
#css {position: absolute; top: 50px; left: 100px;}
display: block|inline|inline-block|table|table-cell|table-row|none
Questo parametro permette di definire lo spazio utilizzato per l'oggetto in
questione.
block l'oggetto viene inserito utilizzando un'interruzione prima
e dopo l'oggetto stesso; inserimento avviene in
modalità verticale
inline l'oggetto viene inserito in sequenza, quindi
orizzontalmente
inline-block l'oggetto viene inserito in sequenza, quindi
orizzontalmente, ma può essere modificato in altezza e
larghezza
table comportamento base del tag table
table-cell comportamento base di una cella di tabella
table-row comportamento base di una riga di tabella
none l'oggetto viene reso invisibile e tolto dall'attuale
struttura visualizzata (a differenza del hidden con
visibility dove lo spazio occupato rimane visibile)
18/45Dott.Ing.Ivan Ferrazzi
Esempio:
#css {display: none; ... }
z-index: valore
Questo parametro permette di definire la profondità dell'oggetto. In alcuni
casi non funzione se non viene definita anche la proprietà top. Se non
dovesse servire va comunque settata con valore 0px.
Esempio:
#css {position: absolute; z-index: 10; top: 0px; height: 400px; ... }
float: left|right|none;
Questo parametro permette di definire il flusso degli elementi inserito
all'interno del componente stesso.
left tutti gli elementi con questa proprietà vengono messi in
pila, uno dopo l'altro da sinistra verso destra (fino a
quando non viene utilizzata la proprietà clear)
right tutti gli elementi con questa proprietà vengono messi in
pila, uno dopo l'altro da destra verso sinistra (fino a
quando non viene utilizzata la proprietà clear)
clear: left|right|both;
Questo parametro permette di annullare la proprietà di flusso e di iniziare
su una nuova riga.
I parametri di stile per la visibilità
Per ogni elemento inserito all'interno della nostra struttura è possibile
definire il comportamento di visibilità necessario. Possiamo decidere di
mostrare o meno un contenuto o addirittura definirne il grado di
trasparenza.
overflow: visible|hidden|scroll|auto
Questo parametro permette di definire il comportamento di
visualizzazione del contenuto di un contenitore (come ad esempio un
div).
visible nel caso in cui il contenuto fosse più ampio della
dimensione del contenitore questo verrebbe
visualizzato al di fuori del contenitore stesso
hidden nel caso in cui il contenuto fosse più ampio della
dimensione del contenitore questo verrebbe nascosto
scroll in questo caso vengono aggiunte le scrollbars per
19/45Dott.Ing.Ivan Ferrazzi
visualizzare l'intero contenuto
auto le scrollbars vengono aggiunto solamente nel caso in
cui verrebbe sforato lo spazio messo a dispozione
Esempio:
#css {width: 200px; height: 200px; overflow: auto; ... }
visibility: hidden|visible
Questo parametro permette di definire la visibilità dell'oggetto.
hidden l'elemento viene nascosto, ma rimane lo spazio
utilizzato dall'elemento quando è visibile
visible l'elemento viene visualizzato
Esempio:
#css {position: absolute; visibility: hidden; height: 400px; ... }
opacity: {0.0-1.0}; (Firefox)
(IE)
filter: alpha(opacity={1-100});
Questo parametro permette di definire l'opacità dell'oggetto.
Esempio:
#css {opacity:0.4; filter: alpha(opacity=40);}
I parametri di stile per lo sfondo
Vediamo ora i parametri di stile che possiamo utilizzare per modificare le
proprietà dello sfondo. Vediamo come poter inserire un'immagine nello
sfondo e come andare a modificare le proprietà di posizionamento
all'interno di esso.
background-color: valore;
Questo parametro permette di definire il colore di sfondo espresso in
valore esadecimale, come colore in lingua inglese, oppure con l'utilizzo di
rgb(r,g,b).
Esempi:
P {background-color: yellow}
DIV {background-color: #33ccff}
H1 {background-color: rgb(255,255,0)}
background-image: url('[percorso/]file_immagine');
Questo parametro permette di definire l'immagine da utilizzare come
immagine di sfondo.
20/45Dott.Ing.Ivan Ferrazzi
Esempi:
P {background-image: url('percorso/immagine.gif');}
DIV {background-image: url('logo.gif');}
background-repeat: repeat|repeat-x|repeat-y|no-repeat|inherit;
Questo parametro permette di definire le proprietà di ripetizione
dell'immagine da utilizzare come sfondo. Un'immagine inserita come
sfondo viene normalmente ripetuta sia orizzontalmente che
verticalmente.
repeat ripetizione sia orizzontale che verticale
repeat-x ripetizione orizzontale
repeat-y ripetizione verticale
no-repeat senza ripetizione
inherit eredita le proprietà dall'impostazione del padre
Esempi:
DIV {background-image: url('logo.gif');
background-repeat: repeat-x}
DIV {background-image: url('logo.gif');
background-repeat: no-repeat}
background-attachment: scroll|fixed|inherit;
Questo parametro permette di definire le proprietà dell'immagine da
utilizzare come sfondo.
scroll per far scorrere lo sfondo insieme al testo
fixed per fissare lo sfondo e far scorrere solo il testo
inherit eredita la proprietà dall'impostazione del padre
Esempi:
{background-image: url('logo.gif'); background-attachment: scroll;}
{background-image: url('logo.gif'); background-attachment: fixed;}
background-position: {vpos hpos|x% y%|xpos ypos|inherit};
Questo parametro permette di definire il punto di partenza dell'immagine
da inserire come sfondo. Come posizione possiamo inserire top left, top
center, top right, center left, center center, center right, bottom left,
bottom center, bottom right, x%, y%, xpos, ypos, oppure inherit
vpos può essere top, center, oppure bottom
hpos può essere left, center, oppure right
x% y% sono le coordinate x e y in percentuale
xpos ypos sono le coordinate x e y
inherit eredita la proprietà dall'impostazione del padre
21/45Dott.Ing.Ivan Ferrazzi
Esempi:
DIV {background-image: url('logo.gif');
background-repeat: no-repeat;
background-position: right top}
background-size: {contain|cover};
Questo parametro permette di definire come l'immagine di sfondo deve
coprire il suo contenitore.
I parametri di stile per le liste
Le liste vengono principalmente suddivise in due gruppi: gli elenchi puntati e gli
elenchi numerati.
Per gli elenchi puntati possiamo avere i seguenti stili:
list-style-type: valori;
Questo stile permette di definire il tipo di puntatore da utilizzare. Per
questo parametro possiamo utilizzare i seguenti valori:
none non utilizza puntatore
disc valore di default; visualizza un punto
circle visualizza un cerchio vuoto
square visualizza un quadrato
list-style-position: inside|outside;
Questo stile permette di definire la posizione della lista.
list-style-image: url('[percorso/]file_immagine');
Questo parametro permette di definire l'immagine da utilizzare come
puntatore.
Esempi:
UL {list-style-image: url('percorso/immagine.gif');}
UL {list-style-image: url('logo.gif');}
Per gli elenchi numerati possiamo avere i seguenti stili:
list-style-type: valori;
Questo stile permette di definire il tipo di puntatore da utilizzare. Per
questo parametro possiamo utilizzare i seguenti valori:
none non utilizza puntatore
22/45Dott.Ing.Ivan Ferrazzi
armenian visualizza la numerazione “Armenian”
decimal visualizza la numerazione con numero
decimal-leading-zero visualizza la numerazione con 0 e numero
georgian visualizza la numerazione “Georgian”
lower-alpha visualizza la numerazione a, b, c, ecc.
lower-greek visualizza la numerazione alpha, beta, ecc.
lower-latin visualizza la numerazione “Latin”
lower-roman visualizza la numerazione i, ii, iii, ecc.
upper-alpha visualizza la numerazione A, B, C, ecc.
upper-latin visualizza la numerazione A, B, C, ecc.
upper-roman visualizza la numerazione I, II, III, ecc.
list-style-position: inside|outside;
Questo stile permette di definire la posizione della lista.
I parametri di stile per le tabelle
border-collapse: collapse|separate;
Questo stile permette di definire la disposizione delle celle all'interno
della tabella:
collapse le celle vengono unite l'una all'altra
separate le celle vengono separate
border-spacing: value [value];
Questo stile permette di definire lo spazio tra le celle. Con l'assegnazione
di un valore assegnamo sia lo spazio orizzontale che verticale. Con due
valori definiamo quello orizzontale con il primo valore, quello verticale
con il secondo.
caption-side: top|bottom;
Questo parametro permette di posizionare l'etichetta della tabella al di
sopra o al di sotto della tabella stessa.
empty-cells: show|hide;
Questo parametro permette di definire se mostrare o meno il bordo di
celle vuote.
table-layout: auto|fixed;
Questo parametro permette di definire il tipo di layout con il quale creare
la tabella.
23/45Dott.Ing.Ivan Ferrazzi
RAGGRUPPAMENTO E
NIDIFICAZIONE
Vediamo nel seguente capitolo come creare delle classi di stile che vengono
utilizzate da gruppi di elementi o elementi nidificati.
Raggruppamento di stili
Quando dobbiamo creare delle classi di stile uguali per più selettori
possiamo raggruppare i selettori separandoli da una virgola:
h1, p, a {
color: red;
}
Nell'esempio creiamo una classe che utilizziamo per i tag h1, p e a.
Elementi nidificati
Se volessimo specificare invece una classe di stile da utilizzare per tutti
gli elementi presenti all'interno di un determinato elemento (quindi
nidificati) potremmo utilizzare lo spazio come segue:
div h1 {
color: red;
}
24/45Dott.Ing.Ivan Ferrazzi
In questo caso definiamo la classe di stile per tutti gli elementi h1
(indipendentemente dalla profondità dell'elemento in questione!) che si
trovano all'interno di un qualsiasi elemento div. Nel prossimo codice il
contenuto dei tag scritti in grassetto verranno scritti in rosso:
Questo è il titolo
Secondo titolo
Altro titolo
Nuovamente un titolo
Nidificazione padre/figlio
Per limitare l'utilizzo della classe di stile solamente al primo livello di
appartenenza possiamo scrivere:
div>h1 {
color: red;
}
In questo caso intendiamo solamente gli elementi h1 che si trovano
all'interno del primo livello di un qualsiasi tag div. Nel prossimo codice
solamente il contenuto dei tag scritti in grassetto verranno scritti in rosso:
Questo è il titolo
Secondo titolo
Altro titolo
Nuovamente un titolo
Stile per elemento a seguire
Inoltre abbiamo anche la possibilità di creare degli stili validi solamente
per tag che si trovano dopo determinati elementi. Il controllo avviene su
elementi “fratelli” della struttura:
div + p {
color: red;
}
25/45Dott.Ing.Ivan Ferrazzi
In questo caso la classe di stile verrà presa in considerazione da tutti gli
elementi p che seguono (sullo stesso livello) un elemento div. Nel
prossimo codice solamente il contenuto dei tag scritti in grassetto
verranno scritti in rosso:
testo
altro testo
Nuovamente testo
prova
Questo no
Stile per tutti gli elementi a seguire
Se non volessimo limitare l'utilizzo della classe di stile solo all'elemento
che si trova direttamente dopo quello in questione, ma bensì a tutti quelli
che seguono potremmo scrivere come segue:
div ~ p {
color: red;
}
Nel prossimo codice solamente il contenuto dei tag scritti in grassetto
verranno scritti in rosso:
testo
altro testo
Nuovamente testo
prova
Questo no
26/45Dott.Ing.Ivan Ferrazzi
PSEUDO-CLASSI ED ELEMENTI
Le pseudo-classi, oppure i pseudo-elementi, permettono di aggiungere specifici
effetti ai vari selettori in questione. Le sintassi che possiamo utilizzare sono:
selettore:pseudo-classe
selettore.classe:pseudo-classe
selettore:pseudo-elemento
selettore.classe:pseudo-elemento
Vediamo alcune delle pseudo-classi o dei pseudo-elementi più comuni.
Pseudo-classi per il tag a
a:link {...}
Questa pseudo-classe permette di definire lo stile del link non ancora
visitato.
a:visited {…}
Questa pseudo-classe permette di definire lo stile del link visitato.
a:hover {…}
Permette di definire lo stile per il link quando il puntatore del mouse ci
passa sopra.
a:active {…}
27/45Dott.Ing.Ivan Ferrazzi
Permette di definire lo stile da utilizzare per il link che viene selezionato.
Pseudo-classe per il primo figlio
selettore:first-child {...}
Questa pseudo-classe identifica il primo tag indicato dal selettore
presente all'interno di un qualsiasi altro tag. Nel seguente esempio:
p:first-child {
color: red;
}
il testo di ogni primo tag p presente all'interno di un qualsiasi altro tag
verrà scritto in rosso. Nel prossimo codice le righe in grassetto sono
quelle che verranno scritte in rosso:
primo elemento
secondo elemento
primo elemento
secondo elemento
Per indicare solamente il primo tag p all'interno di ogni div scriviamo
come segue:
div > p:first-child {
color: red;
}
Pseudo-classe per elementi con il focus
selettore:focus {...}
Questa pseudo-classe identifica lo stile da utilizzare nel caso in cui si
passi il focus ad un determinato elemento.
input:focus {
background-color: yellow;
}
In questo esempio a tutti gli elementi input che prenderanno il focus
verrà cambiato il colore di sfondo in giallo.
Pseudo-elementi su testi in elementi a blocco
selettore:first-line {...}
28/45Dott.Ing.Ivan Ferrazzi
Questo pseudo-elemento viene usato per modificare lo stile della prima
riga dell'elemento in questione. Questo pseudo-elemento può essere
utilizzato solamente su elementi di blocco.
selettore:first-letter {...}
Questo pseudo-elemento viene usato per modificare lo stile della prima
lettera dell'elemento in questione. Anche questo pseudo-elemento può
essere utilizzato solamente su elementi di blocco.
Pseudo-elementi per l'aggiunta di contenuto
selettore:before {...}
Questo pseudo-elemento viene usato per aggiungere del contenuto prima
del contenuto dell'elemento stesso. Il seguente esempio aggiunge
un'immagine prima del titolo:
h1:before {
content: url(dot.png);
}
selettore:after {...}
Questo pseudo-elemento viene usato per aggiungere del contenuto dopo
il contenuto dell'elemento stesso. Il seguente esempio aggiunge
un'immagine dopo il testo presente come titolo:
h1:after {
content: url(dot.png);
}
29/45Dott.Ing.Ivan Ferrazzi
MEDIA QUERIES
Oggi giorno esistono vari dispositivi con caratteristiche di visualizzazione
diverse l'uno dall'altro. I media queries sono dei filtri che permetto di
riconoscere le caratteristiche del dispositivo di visualizzazione con lo scopo di
utilizzare un foglio di stile adeguato all'esigenza.
Come integrare le media queries
Possiamo integrare le media queries importando un foglio di stile esterno,
oppure direttamente all'interno del blocco style della nostra pagina. Per
importare fogli di stile esterni possiamo utilizzare l'attributo media del tag
link come segue:
se vogliamo invece integrare le media queries direttamente all'interno
del blocco style scriviamo:
@media screen {
…
}
30/45Dott.Ing.Ivan Ferrazzi
Tipi di dispositivi
Il primo elemento all'interno delle media query identifica il dispositivo,
oppure i dispositivi se separati da virgola, per i quali vale la rispettiva
regola. I dispositivi che si possono usare sono:
all identifica tutti i dispositivi
aural per sintetizzatori e dispositivi voce
braille per dispositivi tattili braille
embossed per stampanti braille
handheld per dispositivi piccoli e/o portatili
print per stampanti
projection per presentazione su proiettori
screen per schermi di computer
speech per dispositivi vocali
tty per dispositivi a dimensione di caratteri fissa (terminal)
tv per dispositivi come televisori
Esempio:
@media screen,print {
…
}
Caratteristiche di dispositivi
Oltre ad identificare il dispositivo possiamo aggiungere delle regole che
ne determinano le specifiche caratteristiche. Più regole possono essere
combinate in maniera logica utilizzano and, or oppure not. Nel caso in cui
ci fossero all'interno della media query più dispositivi le caratteristiche
verrebbero specificate per ognuno di essi. Esempio:
screen and (orientation:landscape), handheld and (orientation:landscape)
Vediamo ora le caratteristiche più utilizzate:
width, min-width, max-width
Questa caratteristica identifica la larghezza di visualizzazione del
dispositivo (nel browser il ViewPort). width identifica la larghezza precisa,
min-width identifica il valore uguale o maggiore, mentre max-width
identifica il valore uguale o minore. Esempio:
@media all and (min-width:400px) and (max-width:800px) {
…
}
31/45Dott.Ing.Ivan Ferrazzi
Questo codice identifica tutti gli schermi che hanno una visualizzazione
tra 400px e 800px.
height, min-height, max-height
Questa caratteristica identifica l'altezza di visualizzazione del dispositivo
(nel browser il ViewPort). height identifica l'altezza precisa, min-height
identifica il valore uguale o maggiore, mentre max-height identifica il
valore uguale o minore.
device-width, min-device-width, max-device-width
La caratteristica device-width identifica la larghezza effettiva dello
schermo del dispositivo e non solo la parte utilizzata per la
visualizzazione del documento. I prefissi min e max vengono utilizzati
esattamente come nella caratteristica width.
device-height, min-device-height, max-device-height
In questo caso definiamo l'altezza effettiva dello schermo del dispositivo.
Anche qui i prefissi min e max vengono utilizzati come nella caratteristica
height.
orientation
Questa caratteristica permette di utilizzare il valore landscape oppure
portrait. In questo caso il valore si riferisce alle proporzioni tra width e
height. Se width è maggiore di height ci troviamo in visualizzazione
landscape. Nel momento in cui height supera il valore di width
l'orientamento sarà portrait.
@media handheld and (orientation:portrait) {
…
}
aspect-ratio
Questa caratteristica permette di definire una proporzione più precisa tra
width e height utilizzando come valore due numeri interi separati dal
simbolo / (es. 4/3, 16/9, ecc.). Anche questa caratteristica permette
l'utilizzo dei prefissi min e max.
device-aspect-ratio
Questa caratteristica è identica a aspect-ratio solo che mette a confronto
32/45Dott.Ing.Ivan Ferrazzi
le proporzioni di device-width e device-height. Anche qui si possono
utilizzare i prefissi min e max.
color
Questa caratteristica permette di specificare il numero dei bit utilizzati
per rappresentare un color all'interno del dispositivo in questione.
Utilizzando il semplice nome della caratteristica, quindi senza aggiungere
un valore, permette di indicare tutti i dispositivi che mettono a
disposizione una visualizzazione a colori.
@media all and (color) {
…
}
color-index
Questa caratteristica permette di specificare il numero di colori supportati
all'interno della tavolozza colori del dispositivo. Anche qui possiamo
utilizzare i prefissi min e max come già visto precedentemente.
@media screen and (min-color-index:16) {
…
}
33/45Dott.Ing.Ivan Ferrazzi
CSS3
Questa sezione è stata creata per dare una panoramica iniziale a quelle che
possono essere le potenzialità introdotte dalle direttive CSS3. Per garantire una
compatibilità attraverso i diversi browser diventa indispensabile l'utilizzo di
determinati prefisse preimpostate per i vari browser in questione. I prefissi che
utilizziamo sono: -moz- (per Mozilla Firefox), -ms- (per Internet Explorer),
-webkit- (per Safari e Chrome) e -o- (per Opera). Per evitare di ripetere
continuamente il codice all'interno di vari esempi ci baseremo solamento sulle
proprietà base e quelle definite per l'utilizzo all'interno dei Mozilla Firefox. Per
una compatibilità maggiore vanno ripetute le varie proprietà modificando
semplicemente i prefissi.
Stili per i contenitori ed i loro contenuti
border-radius: h_pixel [/ v_pixel];
Questo stile permette di definire gli angoli arrotondati degli elementi:
h_pixel questa proprietà ci permette di impostare le dimensioni
degli angoli in pixel. Possiamo inserire un valore (per
modificare tutti gli angoli), due valori (alto-
sinistra/basso-destra e alto-destra/basso-sinistra), tre
valori (alto-sinistra alto-destra/basso-sinistra basso-
destra), oppure quattro valori (alto-sinistra alto-destra
basso-destra basso-sinistra).
v_pixel questa proprietà, se presente, definisce l'altezza
dell'rettangolo nell'angolo che andrà a definire
l'arrotondamento desiderato. h_pixel in questo caso ne
34/45Dott.Ing.Ivan Ferrazzi
andrà a definire la larghezza.
Esempio:
div {
border-radius: 40px / 20px;
-moz-border-radius: 40px / 20px;
}
box-shadow: h_pos v_pos [blur] [spread] [color] [inset];
Questo stile permette di definire l'ombra del relativo oggetto in
questione.
h_pos questo valore ci da la possibilità di definire lo
spostamento orizzontale dell'ombra. Questo valore è
obbligatorio.
v_pos questo valore ci da la possibilità di definire lo
spostamento verticale dell'ombra. Anche questo valore
è obbligatorio.
blur questo valore identifica la larghezza della sfumatura
che vogliamo dare all'ombra. Questo valore è
facoltativo.
spread questo valore identifica il quanto si deve allargare
l'ombra che stiamo creando. L'effetto è quello che si
ottiene allontanando o avvicinando la fonte di luce che
genera l'ombra in questione.
color questo valore ci da la possibilità di definire il colore
dell'ombra.
inset questo parola viene aggiunta come valore per creare
un'ombra generata verso l'interno dell'oggetto in
questione.
Esempio:
div {
box-shadow: 10px 10px 5px black;
-moz-box-shadow: 10px 10px 5px black;
}
background-size: width height;
Questo stile permette di definire la grandezza dell'immagine che
inseriamo come immagine di sfondo.
width questo valore ci da la possibilità di definire la larghezza
dell'immagine in questione. Possiamo utilizzare anche
valori percentuali se vogliamo adattare la larghezza alla
dimensione del suo contenitore.
35/45Dott.Ing.Ivan Ferrazzi
height questo valore ci da la possibilità di definire l'altezza
dell'immagine in questione. Possiamo utilizzare anche
valori percentuali se vogliamo adattare l'altezza alla
dimensione del suo contenitore.
Esempio:
div {
width: 200px;
height: 200px;
background-image: url(back.jpg);
background-repeat: no-repeat;
background-size: 100px 100px;
-moz-background-size: 100px 100px;
}
background-origin: box_model;
Questa proprietà ci permette di definire la parte del contenitore di
riferimento per il posizionamento dell'immagine di sfondo.
box_model questo valore definisce la parte del contenitore di
riferimento. I valori possibili sono: border-box, padding-
box, oppure content-box.
Esempio:
div {
width: 200px;
height: 200px;
padding: 20px;
border: 5px solid black;
background-image: url(back.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-origin: content-box;
-moz-background-origin: content-box;
}
text-shadow: h_pos v_pos [blur] [color];
Questo stile permette di definire l'ombra di parti testuali.
h_pos questo valore ci da la possibilità di definire lo
spostamento orizzontale dell'ombra. Questo valore è
obbligatorio.
v_pos questo valore ci da la possibilità di definire lo
spostamento verticale dell'ombra. Anche questo valore
è obbligatorio.
blur questo valore identifica la larghezza della sfumatura
che vogliamo dare all'ombra. Questo valore è
36/45Dott.Ing.Ivan Ferrazzi
facoltativo.
color questo valore ci da la possibilità di definire il colore
dell'ombra.
Esempio:
div {
text-shadow: 2px 2px 1px black;
-moz-text-shadow: 2px 2px 1px black;
}
column-count: nr_colonne;
Questo stile permette di definire il numero delle colonne da utilizzare
all'interno di un contenitore. Attualmente è possibile definire il numero
delle colonne, ma non la larghezza delle singole.
Esempio:
div {
column-count: 3;
-moz-column-count: 3;
}
column-gap: valore;
Questo stile permette di definire lo spazio tra una colonna e l'altra.
Esempio:
div {
column-count: 3;
-moz-column-count: 3;
column-gap: 30px;
-moz-column-gap: 30px;
}
column-rule: spessore stile colore;
Questa proprietà ci permette di definire la linea separatrice tra le varie
colonne che abbiamo definito.
spessore questo valore definisce lo spessore che vogliamo dare
alla linea
stile questo valore definisce lo stile che possiamo dare alla
linea (vedi gli stili che abbiamo utilizzato per i bordi)
colore questo valore permette di definire il colore della linea
da utilizzare
Esempio:
37/45Dott.Ing.Ivan Ferrazzi
div {
column-count: 3;
-moz-column-count: 3;
column-gap: 30px;
-moz-column-gap: 30px;
column-rule: 1px solid black;
-moz-column-rule: 1px solid black;
}
Importazione di font aggiuntivi
La gestione di font aggiuntivi all'interno dei nostri siti internet fino ad ora
non era possibile. Per garantire una giusta visualizzazione del nostro sito
era indispensabile limitarsi ai font standard compatibili sui vari browser in
questione.
CSS3 mette a disposizione la possibilità di caricare la configurazione di
font aggiuntivi che possiamo depositare direttamente sul server web.
L'unica cosa che dobbiamo fare è definire un font mediante @font-face
definendo il nome che vogliamo dare al font, la posizione del file che ci
interessa, l'eventuale formato del file e le eventuali proprietà di
riferimento.
Per quanto riguarda i vari formati di font dobbiamo sapere che Internet
Explorer supporta i font .eot (Embedded Open Type), mentre Firefox,
Chrome, Safari e Opera supportano i font di formato .ttf (True Type Font)
e .otf (Open Type Fonts). Possiamo utilizzare anche i font .woff (Web
Open Font Format) riconosciuti da tutti i browser, oppure SVG font/shapes
supportati però solamente da Chrome, Safare ed Opera.
Il nome del font da importare lo definiamo con font-family, la posizione
del file con src. Vediamo un piccolo esempio:
@font-face {
font-family: myfont;
src: url('segoesc.ttf'),
url('segoesc.eot') format('opentype'); /*IE*/
}
div {
font-family: myfont;
}
Notiamo quindi all'interno del @font-face la possibilità di aggiungere i vari
formati separati da una virgola dove la funzione format ci permette di
definire il formato del file che andiamo ad aggiungere. Il nuovo font viene
poi utilizzato riprendendo il nome del font all'interno dell'elemento che ci
interessa.
Nell'esempio precedente abbiamo definito un font di tipo normale. La
formattazione in grassetto dello stesso font si trova però in file diverso.
Ecco che dobbiamo quindi aggiungere un nuovo @font-face per definire
38/45Dott.Ing.Ivan Ferrazzi
anche le proprietà relative al nuovo stile di carattere che possiamo
utilizzare. In questo caso aggiungiamo all'esempio precedente anche il
seguente blocco:
@font-face {
font-family: myfont;
src: url('segoescb.ttf'),
url('segoescb.eot') format('opentype');
font-weight: bold;
}
Qui notiamo l'utilizzo dello stesso nome, cambia però il file che
importiamo ed in più si aggiunge la proprietà di stile che ne identifica le
proprietà. L'interprete HTML, avendo lo stesso nome che identifica il font
con proprietà diverse, utilizzerà proprio l'aggiunta delle proprietà in
questione (nel nostro caso il font-weight: bold) per identificare il file da
utilizzare per la visualizzazione del testo in questione. Altre proprietà che
si possono utilizzare sono: font-stretch, font-style e unicode-range.
Stili per la trasformazione degli elementi
CSS3 mette a disposizione la proprietà transform che utilizza una serie di
funzioni in grado di trasformare l'aspetto degli elementi HTML. Per
trasformare un elemento possiamo utilizzare una serie di funzioni
separate da uno spazio.
transform: translate(x_pos,y_pos);
Questa funzione permette di spostare l'elemento in questione senza
dover utilizzare la proprietà position:
x_pos questo valore sposta l'elemento orizzontalmente dalla
sua posizione di origine.
v_pos questo valore sposta l'elemento verticalmente dalla sua
posizione di origine.
Esempio:
div {
transform: translate(100px,50px);
-moz-transform: translate(100px,50px);
}
transform: rotate(deg);
Questa funzione permette rotare l'elemento in questione:
deg questo valore definisce il grado di rotazione
dell'elemento. L'unità di misura da utilizzare è deg.
39/45Dott.Ing.Ivan Ferrazzi
Esempio:
div {
transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
transform: scale(x_prop,y_prop);
Questa funzione scalare l'elemento in questione:
x_prop questo valore definisce la larghezza di destinazione in
base a quella attuale. Il valore della larghezza attuale è
pari a 1. 2 aumenta la larghezza del doppio, mentre 0.5
la dimezza.
y_prop questo valore definisce l'altezza di destinazione in base
a quella attuale. Il valore dell'altezza attuale è pari a 1.
2 aumenta l'altezza del doppio, mentre 0.5 la dimezza.
Esempio:
div {
transform: scale(2,2);
-moz-transform: scale(2,2);
}
transform: skew(x_deg,y_deg);
Questa funzione permette di roteare intorno all'asse x ed intorno all'asse
y:
x_deg questo valore definisce i gradi di rotazione intorno
all'asse x. L'unità di misura da utilizzare è deg.
y_deg questo valore definisce i gradi di rotazione intorno
all'asse y. L'unità di misura da utilizzare è deg.
Esempio:
div {
transform: skew(10deg,20deg);
-moz-transform: skew(10deg,20deg);
}
Effetti di transizione
CSS3 mette a disposizione una serie di animazioni tra le quali troviamo
appunto l'effetto di transizione. L'effetto di transizione viene attivato su
una o più proprietà dell'elemento stesso. Nel momento in qui una delle
proprietà indicate subisce una variazione, questa non sarà istantanea, ma
40/45Puoi anche leggere
