html5

Web Design Mark-Up

semantico Salvatore Paone

[email protected]

a.a. 2012/2013 | Salvatore Paone | [email protected]

Libri consigliati per questo corso:

The Tecnology

Come è noto HTML e CSS sono i due acronimi che racchiudono il DNA dell'interattività in ambito Web. A fine anni 90 divennero raccomandazioni e da allora abbiamo a disposizione HTML4.01 e CSS2. L'evoluzione è passata da XHTML ovvero HTML riscritto con le ferree regole dell'XML (noto metalinguaggio molto apprezzato anche in ambito umanistico per la marcatura delle risorse digitali). XHTML è stato subito preso in mano dagli sviluppatori e la sua diffusione è stata capillare. Il nostro modulo, di stampo pratico, utilizzerà suddetti Mark-Up per creare pagine web interattive soffermandoci sul web semantico, approdo ancora in essere ovvero: HTML5; oltre che allo studio dei CSS3.

HTML5 e CSS3 sono già più che sufficientemente supportati dai browser di ultima generazione e quindi già pronti ad essere usati per modellare le proprie opere (vedremo di volta in volta il supporto). Il nuovo linguaggio rappresenta una rivoluzione con novità consistenti, alcune scelte sono discutibili, ma va apprezzato il pragmatismo che ha guidato la definizione del nuovo standard ovvero: meglio far diventare specifica tutto ciò che prima tutti comunque utilizzavano come buona prassi. In HTML5 la semantica viene stabilita a priori e diviene standard condiviso.

The Tecnology

Grandi aspettative

Come il W3C presenta HTML5


The Tecnology

L'immaginazione incontra l'implementazione. HTML5 non è ancora una raccomandazione, ma è destinato a divenire la pietra angolare del World Wide Web, HTML5 è il linguaggio di marcatura destinato a sostenere l'evoluzione e a favorire il pieno potenziale che il web ha da offrire. Siamo di fronte a una rivoluzionaria raccolta di strumenti a cui HTML5 fornisce un ricco vocabolario. Data di rilascio, salvo sorprese, a fine 2014

http://www.w3.org/html/logo/

HTML5 Semantics

Verrà dato un senso alla struttura: la semantica è davanti e al centro di HTML5. Un ricco insieme di tag consentono una più utile gestione dei dati sia per i programmi sia per gli utenti.

Offline & Storage

Le Web Apps si avvieranno più velocemente e potranno lavorare anche off-line, grazie alla HTML5 App Cache, così come alla memorizzazione locale dei dati.

Device Access

Cominciando con le API di Geolocalizzazione, le Web App potranno dialogare con diversi Device e saranno in grado di riconoscere caratteristiche ed esperienze utente.

Multimedia

Audio e Video saranno cittadini di prima classe nel web ripensato da HTML5, gli elementi multimediali vivranno in armonia con le Applicazioni.

3D, Graphics & Effects

Con il supporto a SVG, Canvas, WebGL, CSS3 con funzionalità 3D, potremo stupire gli utenti con una grafica mozzafiato resa nativamente dal browser dando l'addio plug-in (si vedrà...)

CSS3 Styling

CSS3 offriranno - ma già offrono - una vasta gamma di stili e effetti, migliorando le Applicazioni Web senza sacrificare la struttura semantica o la performance. Inoltre il Web Open Font Format (WOFF) fornirà una flessibilità e un controllo tipografico mai visto prima.

Seppure a fronte di un crescente supporto da parte dei browser per HTML5, non mancano alcune voci critiche che invitano a raffreddare facili entusiasmi soprattuto a causa di alcuni browser un po' ritardatari; per iniziare a lavorare con HTML5 può essere perciò d'aiuto sondare il supporto di una data funzionalità utilizzando:

•  http://caniuse.com •  http://html5readiness.com •  http://html5test.com •  http://mobilehtml5.org

Compatibilità e gestione delle incompatibilità

Identificazione delle funzionalità, buona idea... seguendo questa filosofia, Modernizr, nota libreria Javascript, testa in maniera booleana le funzionalità restituendo vero o falso. • Modernizr: verifica il riconoscimento di specifiche funzioni. • Excanvas: abilita Internet Explorer all'utilizzo delle funzionalità di <canvas>; anche se sembra ancora da verificare la sua efficacia lo segnalo comunque. • Close-pixelate: consente particolari soluzioni artistiche. • Popcorn: aggiunge sottotitoli ad un filmato, progetto in rapida evoluzione...


Queste librerie Javascript per la compatibilità appena viste consentono, in questo periodo di transizione, prima che il supporto definitivo di HTML5 su tutti i browser diventi realtà, consento l'uso di HTML5 e sopperire all'eventuale mancato supporto.

La promessa di queste soluzione è di poter utilizzare da subito le funzioni di HTML5 senza dover revisionare il codice in futuro: quando il supporto sarà definitivo basterà disabilitare le librerie.


Con Modernizr, per esempio, il test per verificare il suppporto video diventerebbe: <script>

if(Modernizr.video) {

/* codicecon video supportato */

} else { /* codice alternativo per mancato

supporto */

</script> Le correnti norme dell'HTML5 non specificano quali formati video i browser debbano supportare nel tag video. Pertanto ad oggi essi possono supportare qualunque formato che i loro sviluppatori ritengano appropriato. Il Dibattito sul formato unico è molto interessante ed è paradigmatico di molte diatribe informatiche.


In breve: in questa fase di transizione alcune specifiche HTML5 sono utilizzaibili subito mentre altre presentano ancora un supporto ancora limitato, partendo da queste considerazioni abbiamo visto Modernizr:

"Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites."

• http://modernizr.com • https://github.com/Modernizr/Modernizr


In sintesi: utili elementi da tenere in considerazione sono: 1.  le tabelle di compatibilità viste prima 2.  prevedere una strategia per la gestione delle

incompatibilità, ovvero ragionare in termini di retro-compatibilità, strategia fondamentale per non scontentare percentuali di utenti

http://browsershots.org


Salvatore Paone [email protected]

Semantica di HTML5


Semantica di HTML5

Chi viene da studi umanistici sa che la semantica è quella branca della linguistica che studia il significato delle parole, nel nostro caso la semantica e riferita ai <tag> che si spogliano di ogni implicazione stilitistica e di formattazione. Qualcuno si ricorda <blink> e <marquee>, chi viene da XHTML ben conosce la distinzione struttura/formattazione, con HTML5 questa distinzione diviene ancora più evidente.

Per la costruzione del layout all'inizio si utilizzavano le tabelle, ma è una modalità del secolo scorso, la sostituizione di queste con i <div> ha migliorato di molto la situazione, gli sviluppatori si facevano però facilmente prendere la mano nidificando in maniera compulsiva <div> neutri che, grazie a div id e div class, sono richiamati dai selettori CSS. Anche le tecnologie assistive beneficieranno di tale semantica e si ipotizza a breve un impatto negli algoritmi di indicizzazione.

Semantica di HTML5

<!DOCTYPE html> Una delle novità di HTML5 è il doctype corto ovvero: <!doctype html> o doctype dtdless, che essendo privo di indicazioni sulla DTD (Document Type Definition) o sul linguaggio utilizzato, forza automaticamente il browser in modalità standard senza l’aggiunta di ulteriore codice. <meta charset="UTF-8">

La codifica dei caratteri avviene specificando un charset valido per il documento che sostituisce il precedente: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Chi ben comincia...

Per il collegamento a file esterni (Script e CSS) si usano sempre i tag <script> e <style> ai quali però si può omettere l’attributo “type”; nel caso dei fogli stile, quando si utilizza il tag <link> occorre aggiungere l’attributo “rel”: <script>// script interno</script> <script src="js/javascriptesterno.js"></script>

<style>/* Foglio di stile interno */</style>

<link href="css/fogliodistileesterno.css" rel="stylesheet“>

Collegamenti

HTML5 semplifica la scrittura del Mark-Up fornendo un nuovo vocabolario semantico che attribuisce significato a tutti gli elementi che definiscono la struttura del documento e che erano resi attraverso i <div> e attraverso gli attributi id e di class, ecco alcuni tag: <section> <header> <footer> <article> <aside> <nav> <video> <audio>

Un nuovo vocabolario

Naturalmente i <div> restano comunque validi nel caso in cui sia necessario introdurre dei contenitori per raggiungere specifici effetti di impaginazione. Sostituendo molti dei <div> con gli elementi semantici che identificano la struttura del documento si mantiene il codice più pulito, compatto e comprensibile.

Layout con attributi id e class utilizzati sia con HTML 4.01 che con XHTML 1.0 e 1.1

si trattava di prassi

La costruzione del Layout in HTML 4.01 e XHTML 1.0 e 1.1

Nuovo vocabolario Nuovi tag

Layout sematico reso con nuovi elementi strutturali; la prassi diviene specifica;

La costruzione del Layout in HTML5

I nuovi tag descrizione dei nuovi elementi

della specifica


Secondo le specifiche l'elemento header contrassegna l'intestazione della sezione di un documento, un’introduzione, eventualmente un <hgroup>, un logo, uno slogan, la cosiddetta tag-line; è legittimo avere anche <nav> all'interno: <header> <h1><a href="index.html">Titolo principale della sezione</a></h1>

<p>Scritto da Salvatore Paone</p>

<time datetime="2011-09-28" pubdate="pubdate"></time> </header>

Elemento <header>

Gli elementi di supporto alla navigazione sono racchiusi in un tag <nav> dedicato a raccogliere i link della navigazione principale fornendo un Mark-Up più rigoroso dal punto di vista semantico di grande aiuto per gli Screen Reader. <nav> <ul>

<li><a href="about.html">About</a></li>

<li><a href="press.html">Press</a></li>

<li><a href="faq.html">F.A.Q.</a></li>

</ul> </nav>

Elemento <nav>

Si può dare al tag footer lo stesso modello di contenuto degli elementi <header> e <nav>, ma rappresentando il pie' di pagina per la sezione a cui si applica, ma non deve stare necessariamente al termine della pagina. <footer>

<nav> <ul>

<li><a href="faq.html">faq</a></li>

<li><a href="mappa.html">Mappa</a></li>

</ul>

</nav> </footer>

Elemento <footer>

Demarca un insieme di contenuti fra di loro logicamente correlati, come le sezioni di una home page come Contatti, News... Esso cmq non è da intendersi come un contenitori privo di significato, utilizzato solo per dare una serie di stili, in quel caso va ancora benissimo l'utilizzo del tag <div>.

<section>

<h1>WWF</h1>

<p>The World Wide Fund for Nature (WWF) is....</p> </section>

Elemento <section>

Si usa per marcare un contenuto che sia almeno in linea di principio utilizzabile o distribuibile in modo indipendente. I tag <article> possono essere nidificati se vi è una relazione fra il contenuto nidificato e il contenitore.

Potential sources for the <article> element: Forum post Blog post News story Comment

Elemento <article>

Questo tag marca un contenuto che è in relazione con l'elemento che lo annida, può essere usato sia dentro sia fuori il tag <article>: Se è utilizzato all'interno di <article>, il contenuto deve essere specifico a tale articolo (ad esempio, note, suggerimenti, citazioni, glossari o elenchi di link correlati). Se è utilizzato come contenitore di qualcosa che si trova al di fuori del flusso dell’articolo, il contenuto deve essere relativo all’intero sito (ad esempio moduli di ricerca, link di navigazione aggiuntiva, ed event. contenuto pubblicitario se il contesto è relativo alla pagina).

Elemento <aside>

La specifica definisce l'uso del tag <figure> impiegato per contrassegnare: "self-contained content, like illustrations, diagrams, photos, code listings, etc. While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document." Le informazioni racchiuse da questo tag possono essere arricchite dal tag <figcaption> creando una didascalia.

Nuovi elementi <figure> e <figcaption>

In sintesi il tag <figcaption> fornisce una didascalia al tag <figure>, ecco un esempio:

<figure>

<img src="img_pulpit.jpg" alt="The Pulpit Rock" /> <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>

</figure>

Elemento <figcaption>

Questo tag raggruppa due o più intestazioni (da h1 ad h6), tutte le intestazioni così marcata sono trattare al livello del titolo più importante, ecco un esempio:

<hgroup>

<h1>Stranilivelli</h1> <h2>Grafica e Web Design</h2>

</hgroup>

Le due intestazioni vengono considerate come un tutt'uno marcando h2 come un sottotitolo che non va a interferire con altri h2 presenti nel documento.

Elemento <hgroup>

L'elemento demarca data e ora: <time datetime="YYYY-MM-DDThh:mm:ssTZD"> <p>Erano solo le <time datetime="2010-10-21T05:00+01:00">5 di mattina</time> quando ho raggiunto Milano.</p> • YYYY - year (e.g. 2011) • MM - month (e.g. 01 for January) • DD - day of the month (e.g. 08) • T - a required separator if time is also specified • hh - hour (e.g. 22 for 10.00pm) • mm - minutes (e.g. 55) • ss - seconds (e.g. 03) • TZD - Time Zone Designator

Elemento <time>

L'elemento <mark> demarca una parte di testo per enfatizzarne il significato, il browser restituisce il testo come se fosse evidenziato. La specifica suggerisce ad esempio l'uso per demarcare una parte di testo successiva ad una ricerca:

<p>Do not forget to buy <mark>milk</mark> today.</p>

The <mark> tag defines marked text. Use the <mark> tag if you want to highlight parts of your text.

Elemento <mark>

Alcune importanti novità riguardano anche il tag <a> soprattutto relativamente ad alcuni annidamenti che prima non erano accettati; p.e. possono nidificarsi paragrafi, liste, tabelle e addirittura sezione, basta che questi non contengano a loro volta pulsanti o altri link.

<a href="http://www.w3schools.com"><p>Do not forget to buy <mark>milk</mark> today.</p></a>

Fra un po' vedremo il nuovo attributo target.

Vecchi non più vecchi Elemento <a>

Scopo del tag <address> è di proporre informazioni di contatto relative all'articolo o al suo contenitore più diretto. <address> Written by <a href="mailto:[email protected]">Salvo Paone</a>.<br /> Visit us at:<br /> www.stranilivelli.com<br /> Firenza<br /> Italia </address>

Vecchi non più vecchi Elemento <address>

<b> ovvero bold è stato usato in passato per la formattazione del testo, ma in HTML5 i tag che avevano come obiettivo la definizione di stili sono stati sforbiciati, uno dei pochi a salvarsi è stato <b> assieme ad <i> per il corsivo, probabilmente per il largo uso in miliardi di pagine web. Per <b> vi sono evidenti aree di sovrapposizione con i tag <strong>, <em> e <mark> mentre <i> ha scenari d'uso più definiti quali le frasi idiomatiche, termini tecnici, parole straniere.

Vecchi non più vecchi Elemento <b> e <i>

<cite> è una altro caso dibattuto di semantica, indica come già nelle versioni precedenti citazioni di fonti esterne al documento. E' stata lungamente dibattuta la prassi consolidata di marcare anche le persone, il nome, se "citato". L'argomento è ancora dibattuto e non si esclude una ulteriore rivisitazione di questo tag. <p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

The <cite> tag defines the title of a work (e.g. a book, a song, a movie, a TV show, a painting, a sculpture...).

Note: A person's name is not the title of a work.

Vecchi non più vecchi Elemento <cite>

<hr> ovvero Horizontal Rule ha avuto un sognificato visuale che in HTML5 viene meno in quanto l'interruzione deve essere tematica:

<h1>HTML</h1>

<p>HTML is a language for describing web pages.....</p>

<hr>

<h1>CSS</h1>

<p>CSS defines how to display HTML elements.....</p>

Vecchi non più vecchi Elemento <hr>

<menu> deprecato in HTML 4.01 è stato ripristinato nella nuova versione del linguaggio per racchiudere una lista di comandi, sono i valori dell'attributo type che indicano che tipo di menù sia stato dichiarato. <menu type="toolbar">

<menu type="context"> <menu type="list">

mentre <label> è utilizzato per dare un nome al menù: <li><menu label="File"><button type="button" onclick="file_new()">New...</button></li> Ad oggi il supporto è praticamente nullo

Vecchi non più vecchi Elemento <menu>

<small> finora utilizzato per riprodurre il corpo del testo in maniera più piccola, rimane con HTML5 l'elemento per marcare parti che per contenuto e brevità possono essere mostrate in piccolo: p.e. le note a margine o i diritti d'autore.

Differences Between HTML 4.01 and HTML5 Practically none. In HTML 4.01 the small element is displayed as smaller text. In HTML5 the small element defines small text and other side comments, and is displayed as smaller text.

Vecchi non più vecchi Elemento <small>

In HTML 4.01, the <strong> tag defines strong emphasized text, but in HTML5 it defines important text.

<em>Emphasized text</em>

<strong>Strong text</strong>

Sui vecchi tag riesumati in HTML5 è opportuno fare un po' di chiarezza nonostante le aree di sovrapposizione possano esistere.

Approfondimento

Vecchi non più vecchi Elemento <strong>

Html5 è rigoroso! Vuole rafforzare la semantica delle pagine web, e per farlo deve interrompere una serie di brutte abitudini degli sviluppatori:

Basta elementi e/o attributi con significato di stile. Per questo ci sono i CSS

Basta elementi e/o attributi che hanno causato problemi di accessibilità e usabilità (i famosi frame, frameset, & co.)

Elementi e attributi non più validi

Ecco la lista degli esiliati:

applet, acronym, basefont, big, bgsound, blink, center, dir, font, frame, frameset, noframes, index, listing, marquee, multicol, nobr, noembed, nextid, plaintext, rb, s, spacer, strike, tt, u, xmp

Si veda la sezione ufficiale

Elementi e attributi non più validi

Salvatore Paone [email protected]

Per iniziare un progetto HTML5


Il leader indiscusso della categoria è HTML5 Boilerplate, un template che racchiude un mix di soluzioni HTML5 cross-compatibili con davvero (quasi) tutti i browser, ma anche stili CSS e librerie JavaScript a disposizione degli sviluppatori smaliziati che vogliono un prodotto moderno e funzionante con le nuove specifiche.

Boilerplate è stato ideato da Paul Irish, membro nella comunità di sviluppo di Google Chrome e jQuery. Questa soluzione ha portato grande entusiasmo ed ha guadagnato un enorme successo tra i gruppi di lavoro.

HTML5 Boilerplate

Un altro interessante tool è Initializr, un completo ed avanzato configuratore per generare un template HTML5 personalizzato con componenti avanzati e moduli Javascript d’avanguardia, tra i quali appunti quelli di Boilerplate. Si può decidere :

1. se inserire codice di esempio di avvio nella pagina iniziale; 2. se includere script JavaScript o la libreria jQuery; 3. se utilizzare Modernizr o html5shiv; 4. se utilizzare un file di configurazione per il server (.htaccess, Web.config o nginx.conf).

Initializr

Ognuno di questi tools contiene ovviamente un file di reset (ricordiamo l’importanza dimantenere un sito web compatibile con tutti i browser inserendo delle istruzioni CSS in grado di impostare una visualizzazione comune degli elementi html di una pagina web).

Il nuovo concorrente della lista è HTML5 Reset, un nome in grado di competere con Normalize.css. Il progetto è un insieme di file con una struttura studiata dai suoi autori per rendere facile e intuitivo lo sviluppo di applicazioni HTML5, troviamo anche un tema WordPress HTML5!

HTML5 reset

Arrivati a questo punto avremo bisogno di riempire il documento HTML5 di contenuti e funzionalità. Per farlo dovrai conoscere i tag e le specifiche delle nuove API: una risorsa come questa sarà d’aiuto. Si tratta di un cheatsheet che presenta ciascun tag con una esaustiva descrizione.

HTML5rocks è un'altra interessante risorsa che propone svariati esempi di codice e tutorial per apprendere alcuni dei punti essenziali della tecnologia.

Altre risorse: link e Cheat Sheets

[email protected]

CSS3, il braccio destro

di HTML5


CSS3, Novità:

Braccio destro di HTML5

• Strumenti tipografici

• Opacità degli elementi

• Angoli smussati

• Transizioni

• Trasformazioni

• Animazioni

Si usano meno immagini da usare nei “punti giusti” e nel modo giusto..

a[href^="mailto:"] {text-decoration:none; color: green; font-weight: bold;}

in questo caso l'attributo devo contenere un "URL mailto"

<footer>

<a href="mailto:[email protected]"> [email protected]</a>oppure puoi compilare il form

<a href="/contattami.php">contatti</a> </footer>

Nuovi selettori di attributo

time[datetime*="-09-"] {color: green; font-weight: bold;}

viene applicato a tutti i time che presentano un attributo datatime che abbia quel determinato valore.

<p> Era il <time datetime="2010-09-01"> primo settembre 2010</time> ... </p>

<p>Un mese prima, il <time datetime="2011-08-01"> primo agosto 2010</time>... </p>


a[href$=".edu"] {color: red; font-weight: bold;}

viene applicato a tutte le a che presentano un attributo che termini con quel determinato valore.

<p><a href="http://www.example.edu" title="edu link">conoscenza</a></p>

<p><a href="http://www.example.com" title="com link">denaro</a></p>

<p><a href="http://www.example.org" title="org link">solidarietà</a></p>


Fra le pseudo classi dinamiche: a:link {color:#FF0000;}

a:visited {color:#00FF00;}

a:hover {color:#FF00FF;}

a:active {color:#0000FF;}

si aggiunge elem:target che agisce sull'elemento dell'ancora che rappresenta a destinazione del link.

Esempio 1

Pseudo-classi

A List Apart apre la sua sezione sui Web Fonts scrivendo: "C'è vita dopo Georgia e Verdana"; a dimostrare la grande attenzione sul modulo CSS3 relativo alla tipografia. La regola @font-face permette di includere qualunque tipo di carattere aggirando la limitazione client. Il supporto: The @font-face rule is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari. However, Internet Explorer 9 only supports .eot type fonts, while Firefox, Chrome, Safari, and Opera support .ttf and .otf type fonts. Note: Internet Explorer 8 and earlier versions, do not support the @font-face rule.

Web Fonts ed effetti tipografici

@font-face { font-family: MEgalopolisExtra;

src: url(fonts/MEgalopolisExtra.otf);

}

body {font-family: MEgalopolisExtra, sans-serif;}

La prima dichiarazione assegna un mome al set di caratteri, la seconda mi indica il percorso del file .otf; nel caso in cui @font-face non sia supportato sarà ignorato dal browser. Esempio 2



Estensione Supporto

.ttf GC+, FF3.5+, O10+, S3.1+

.otf GC+, FF3.5+, O10+, S3.1+

.eot IE4+

.svg O10+

.woff GC6+ FF3.6+, IE9

Vista la precedente tabella a prescindere dal supporto a @font-face si dovrà fornire il carattere nel formato corretto, nel caso di IE il formato .eot Strumenti: http://www.fontsquirrel.com/ http://www.fontsquirrel.com/fontface/generator http://www.smeltery.net/


Indispensabile una tecnica di utilizzo cross-browser : @font-face{

font-family: MEgalopolisExtra;

src: url(/fonts/my_font.eot);

src: local(MEgalopolisExtra), url(/fonts/my_font.ttf)

format("truetype");

}

.fontface {

font: 16px MEgalopolisExtra, Helvetica, sans-serif;

}


Altra strategia è cufón - fonts for the people, permette l’utilizzo di qualunque font si voglia, oppure Google fonts.

•  http://cufon.shoqolate.com/generate/

•  http://www.google.com/webfonts


Testo ombreggiato: fino a poco tempo fa ci si doveva servire di software grafici, la promessa del text-property è quella di liberarci da questo onere fornendo pagine più leggere e accessibili.

Effetti tipografici

Text-shadow è la nuova proprietà di formattazione testi per il web, introdotta nell’ultima release dei fogli di stile. Il testo ombreggiato è una novità grafica di facile implementazione per titoli, sottotitoli e blocchi di testo. Il markup di realizzazione è facile e immediato: h1{text-shadow: 2px 3px 3px #ff0000;} il primo indica lo spostamento dell’ombra in orizzontale di 2 pixel (asse x), il secondo di 3 pixel in verticale (asse Y), il terzo definisce la sfocatura e il quarto il colore. I primi 2 elementi sono obbligatori e vengono sempre definiti prima in orizzontale poi in verticale. La sfocatura (blur) e il colore sono invece attributi facoltativi.

Effetti tipografici

In realtà giocando con questi valori, p.e.: h1{text-shadow: 2px 3px 3px #ff0000;}

vediamo come questi siano alla base anche di altri effetti come il bagliore: body{background: #000;}

h1{text-shadow: 1px 1px 5px #fff;} e la sfocatura: h1{text-shadow: 1px 1px 5px #fff;}

Effetti tipografici

Propietà Browser

text-shadow GC2+, FF3.5+, O9.5+, Safari 3+

Per quel che riguarda la compatibilità multipiattaforma, la proprietà CSS3 text-shadow è supportata in tutti i maggiori browser ad eccezione del software Microsoft < IE10. Infatti, CSS3 text-shadow su Internet Explorer non funziona regolarmente, se non ricorrendo a qualche piccolo trucco dai risultati poco esaltanti: i filtri proprietari Glow, Shadow e DropShadow:



Effetti tipografici

Un metodo comune era, ed è tuttora, quello di ottenere le colonne attraverso tanti <div> quanti il numero di colonne necessarie per poi flottarle a sinistra dando larghezze con misure relative od assolute. Il Modulo “Multicolumn layout” dei CSS3, rivoluziona il mondo dell’impaginazione web rendendola flessibile e facilitandole l’implementazione e, cosa non da poco, l'accessibilità, il tutto con poche righe di codice:

*purtroppo il supporto è con prefissi proprietari

Impaginazione del testo in colonne

Argomento Browser

colonne multiple* GC4+, FF3+, Safari4+, Opera

div{ -moz-column-count:3; /* Firefox */

-webkit-column-count:3; /* S e GC */

column-count:3;

}

oppure div{

-moz-column-width: 10em;

-webkit-column-width: 10em;

column-width: 10em; }


lo spazio fra colonne viene gestito da column-gap mentre column-rule pone una riga fra le colonne. div{

-moz-column-width: 10em;

-webkit-column-width: 10em;

column-width: 10em; -moz-column-gap: 3em;

-webkit-column-gap: 3em;

column-gap: 3em;

-moz-column-rule: 0.3em dotted #ccc;

-webkit-column-rule: 0.3em dotted #ccc; column-rule: 0.3em dotted #ccc;}


Un unico modulo CSS3 si occupa della definizione di bordi e sfondi. Esempio di compatibilità:

*FF vuole -moz, mentre Safari prima della 5 vuole -webkit-

Bordi e Sfondi

Proprietà Browser *

border-radius GC5+, FF3.5+, Safari5+, IE9, O10.5

div{ border-radius:2em;

}

equivale a: border-top-left-radius:2em; border-top-right-radius:2em;

border-bottom-right-radius:2em;

border-bottom-left-radius:2em;

Esempi su w3schools.com

Bordi e Sfondi

div{ border-radius: 2em 1em 4em / 0.5em 3em;

}

equivale a: border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em;

border-bottom-right-radius: 4em 0.5em;

border-bottom-left-radius: 1em 3em;

Esempi su w3schools.com

Bordi e Sfondi

vecchio metodo per stondare i bordi: <table width="200" cellpadding="0" cellspacing="0" border="0"><tr><td width="14"><img src="http:img/top-left.gif" width="14" height="14" border="0"></td><td width="172"></td>

<td width="14"><img src="img/top-right.gif" width="14" height="14" border="0"></td></tr><tr><td></td><td><p> Lorem ipsum dolor sit amet </p></td> <td></td></tr><tr><td><img src="img/bottom-left.gif" width="14" height="14" border="0"></td><td></td>

<td><img src="img/bottom-right.gif" width="14" height="14" border="0"></td></tr></table>

Bordi e Sfondi

border-radius: 30px 70px 10px 0px

Utile tool: http://border-radius.com

Bordi e Sfondi

border-radius: 30px 0px 8px

Utile tool: http://border-radius.com

Bordi e Sfondi

La proprietà box-shadow consente di applicare un'ombreggiatura ad un elemento HTML: div{

box-shadow: 10px 10px 5px #888888;

}

Sintassi: box-shadow: h-shadow v-shadow blur spread color inset;

http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

Ombreggiatura applicata ai box

Per quanto riguarda la compatibilità cross-browser si ripresentano moz e webkit in quanto in la proprietà e ben supportata da in IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1.

#example1{ -moz-box-shadow: 10px 10px 5px #888;

-webkit-box-shadow: 10px 10px 5px #888;

box-shadow: 10px 10px 5px #888;

}

Esempi: www.css3.info/preview/box-shadow/

Ombreggiatura applicata ai box

Il modulo CSS3 relativo a bordi e sfondi permettere di raggiungere un controllo più raffinato anche sulle immagini di background, p.e. gli sfondi multipli: #div{

width: 640px;

height: 210px; border: 3px solid #ccc;

background: url(http://img/caffe.jpg) top left no-repeat,

url(http://img/neve.jpg) top right no-repeat }

Sfondi

Questo modulo CSS3 introduce anche il controllo delle dimensioni delle immagini grazie alla proprietà background-size

div{

background:url(img_flwr.gif);

background-size:80px 60px;

background-repeat:no-repeat;

}

Al solito, accanto alla proprietà nella sua forma standard, adottare per garantire un'ampia compatibilità cross-browser la proprietà -moz-background-size a favore di Firefox e -webkit-background-size a favore delle meno recenti versioni di Safari.

Sfondi

La proprietà background-size permette 4 diverse modalità di definizione:

Le prime due più immediate:

• Valori Assoluti: p.e. 100px 50px la prima indica la larghezza, la seconda indica lunghezza. • Valori relativi: relativi all'elemento contenitore e vengono indicati in %.

Sfondi

Le seconde due più particolari: Contain: l'img viene ridimensionata per adattarsi all'area dell'elemento cui viene applicata; mantiene sempre il suo rapporto di aspetto, la visualizzeremo sempre nella sua interezza, nessuna parte sarà tagliata, ma alcune aree dell'elemento potrebbero risultare scoperte. Cover: l'img viene ridimensionata per coprire interamente l'elemento a cui viene applicata; in questo processo possono essere tagliate alcune parti dell'immagine per adattarla al meglio all'elemento, alle sue dimensioni e al rapporto d'aspetto di quest'ultimo, l'elemento sarà sempre coperto nella sua interezza. http://css.html.it/guide/lezione/5115/background-size/

Sfondi

Con opacity è possibile definire il livello di trasparenza non solo di uno sfondo, ma di qualunque elemento. Di fatto, come recita la specifica, con opacity regoliamo il modo in cui un oggetto presente sulla pagina si fonde nella resa a schermo con lo sfondo. Ogni elemento ha di default un valore di opacity pari a 1. Se vogliamo regolare la sua trasparenza, usiamo una scala che va da 0.0 (oggetto completamente trasparente) a 1 (oggetto completamente opaco): div{

background:white; color:black; opacity: 0.5

}

Sfondi

#box1{ width:400px;

height:400px;

padding:20px;

color:#000;

background-color: white; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

filter: alpha(opacity=50); opacity:0.5;

}

Sfondi

html5

Documents