Ultimi Commenti

  • Ciao Anakin, si puoi usar... Vedi...
    30.01.16 18:35
    di BatEn
  • Ciao, volevo chiedere se ... Vedi...
    16.01.16 15:51
    di Anakin
  • Trovo l'articolo interess... Vedi...
    27.08.15 10:08
    di Michele
  • Articolo davvero Completo... Vedi...
    17.04.14 00:19
    di Marco
  • Ciao, benvenuto tra noi. Vedi...
    21.06.13 14:26
    di BatEn

Top Five Commentatori

Donazione

Sostieni Mente Geniale effettuando una donazione per migliorare i contenuti del sito e premiare i nostri sforzi.

Importo: 

Powered by OSTraining.com

Login

HTML5 & CSS3 - Parte 5 PDF Stampa E-mail
( 0 Votes )
Scritto da Enrico Battuello   
Martedì 09 Agosto 2011 01:51

Nelle prime due lezioni di questo tutorial abbiamo parlato di HTML5, presentando alcuni dei nuovi tag introdotti con esso ed abbiamo creato la parte di codice HTML che costituisce il progetto d'esempio che desideriamo realizzare, ovvero la pagina di un blog.

Nella terza e quarta lezione, poi, abbiamo iniziato a trascrivere il codice del foglio di stile necessario ad impaginare le diverse sezioni del nostro documento HTML. In particolare, siamo partiti dalla definizione di una rapida sezione di reset nel CSS, per poi passare alla stilizzazione della barra di navigazione e della sezione "intro" della nostra pagina, facendo particolare riferimento ad alcuni tag nuovi, introdotti con le specifiche CSS3, necessari per posizionare, formattare e impaginare le immagini di sfondo di una specifica sezione.

Prima di proseguire questo tutorial desidero evidenziare il fatto che la parte precedente di esso (la quarta) è stata modificata rispetto alla prima pubblicazione. Ciò è stato necessario in quanto l'ultimo aggiornamento di Google Chrome ha leggermente modificato la specifica di utilizzo dell'attributo di stile background, il che ha comportato una variazione di comportamento del precedente foglio di stile. Ulteriori dettagli sono disponibili nella quarta parte di questo tutorial con particolare riferimento alla nota del 25/06/2011.

Per chi volesse rivedere le parti già pubblicate può consultare la sezione "Articoli precedenti" sottostante.

 


Articoli precedenti:

HTML5 & CSS3 - Parte 1

In questo tutorial creeremo la pagina di un Blog usando tecniche di ultima generazione basate su HTML5 e CSS3.

Il tutorial mira a mostrare il modo in cui saranno costruiti i siti web lato frontend allorché le software house avranno integrato le nuove specifiche HTML e CSS nei loro programmi di navigazione. Difatti gran parte dei più noti browser web, non supporta appieno le nuove specifiche di questi linguaggi, a cominciare da Internet Explorer 8. Tuttavia, la versione 9 di quest'ultimo browser, giunta ormai in fase di beta test, dovrebbe colmare il gap presente rispetto software di navigazione dii altri produttori.

Leggi articolo

 

HTML5 & CSS3 - Parte 2

Nella prima parte di questo tutorial abbiamo introdotto alcuni concetti chiave legati alle nuove specifiche di HTML5, abbiamo introdotto alcuni nuovi tag per la costruzione di pagine web ed abbiamo parlato dell fatto che questi nuovi tag sono semanticamente significativi per i motori di ricerca e per gli screen reader.

Successivamente, abbiamo introdotto il progetto d'esempio che desideriamo realizzare che consiste nell'implementazione dell'interfaccia di frontend di un ipotetico Blog, abbiamo presentato una bozza della struttura della pagina e una sua prima conversione in codice HTML5.

Leggi articolo

 

HTML5 & CSS3 - Parte 3

Nelle lezioni precedenti di questo tutorial abbiamo parlato di HTML5, abbiamo presentato alcuni dei nuovi tag introdotti con esso ed abbiamo creato la parte di codice HTML che costituisce il progetto d'esempio che abbiamo deciso di realizzare, ovvero la creazione della pagina di un blog.

A partire da questa lezione, invece, parliamo di CSS3 ed introduciamo il codice necessario ad impaginare e formattare il nostro markup.

Leggi articolo

 

HTML5 & CSS3 - Parte 4

Nelle prime due lezioni di questo tutorial abbiamo parlato di HTML5, abbiamo presentato alcuni dei nuovi tag introdotti con esso ed abbiamo creato la parte di codice HTML che costituisce il progetto d'esempio che desideriamo realizzare, ovvero la pagina di un blog.

Nella terza lezione, poi, abbiamo iniziato a "stendere" il foglio di stile CSS per impaginare i diversi elementi della pagina. In particolare, abbiamo visto la sezione di reset ed inizializzazione del CSS e la sezione di formattazione della barra di navigazione.

Leggi articolo


 

Proseguiamo, quindi, con la stesura del nostro foglio di stile e passiamo ad impaginare la sezione dei contenuti della pagina del nostro Blog.

 

CSS3 - Stilizzazione dei contenuti

Come abbiamo visto nel secondo articolo di questo tutorial la sezione dei contenuti si compone, in realtà, di due grandi aree: l'area dei contenuti principale (Main Content Area) e l'area della barra laterale (Sidebar).

Per prima cosa allineamo queste due aree tra loro. Questa operazione è piuttosto semplice da eseguire; è sufficiente aggiungere al nostro foglio di stile il codice seguente:

#content {
	display: table;
}

	#mainContent {
		display: table-cell;
		width: 620px;
		padding-right: 22px;
	}

	aside {
		display: table-cell;
		width: 300px;
		background: url("/images/sidebar_background.png") top left;
		/* vertical-align:top; */ /* necessario per Firefox */
	}

Osservando il codice possiamo notare che, a conti fatti, quello che abbiamo fatto è stato utilizzare la sezione "content" dei contenuti come fosse una tabella. Infatti, abbiamo impostato l'attributo display di tutta la sezione a "table" e l'attributo display delle sottoaree "mainContent" e "aside" come "table-cell" (celle di tabella) di dimensioni rispettivamente uguali a 620px e 300px. Ciò rappresenta una ulteriore novità introdotta dalla release 3 dello standard CSS. Difatti, fino ad ora, per effettuare un'operazione di allineamento come quella che abbiamo appena eseguito venivano utilizzati dei comandi float. Fermo restando che l'uso delle tabelle per impaginare gli elementi del layout è sempre sconsigliato, in realtà, con queste poche linee abbiamo beneficiato delle caratteristiche delle tabelle senza mai utilizzare un tag "table".

In questo modo, pur usando un'intera sezione come una tabella, abbiamo mantenuto il codice pulito e facilmente leggibile. In termini più generali, quindi, con le nuove specifiche CSS3 è possibile impostare gli elementi in modo che si comportino come tabelle. Ciò senza alcun dubbio rende più facile la creazione di nuovi layout.

Passiamo quindi a stilizzare l'area dei contenuti principale.

 

CSS3 - Stilizzazione dei contenuti - Area dei contenuti principale

L'area dei contenuti principale si compone di diverse sottosezioni. Iniziamo a vedere la sottosezione relativa ai post del blog.

 

CSS3 - Stilizzazione dei contenuti - Area dei contenuti principale - Post del Blog

La stilizzazione dell'intestazione del post è piuttosto semplice e, in parte, è già stata data. Infatti il titolo dell'intervento fa riferimento al tag "h2" presente nella sezione "reset ed inizializzazione" del nostro foglio di stile (vedi parte 3 di questo tutorial). Vediamo, pertanto, le istruzioni necessarie a stilizzare gli altri elementi dell'header concentrandoci, però, prevalentemente sulla generazione di un layout multicolonna per il contenuto dell'articolo del blog.

A tal proposito, è bene osservare che fino alla versione 2.1 delle specifiche CSS era praticamente impossibile generare un layout multicolonna senza prima suddividere manualmente il testo. Ora, invece, con le nuove specifiche CSS3 l'operazione è diventata davvero semplice come evidenziato dal codice seguente:

#blogPosts article p {
	text-align:justify;
}

.blogPost {
	column-count: 2;
	column-rule: 1px solid DarkGray;
	column-gap: 22px;

	/* Column-count not implemented yet */
	-moz-column-count: 2;
	-webkit-column-count: 2;

	/* Column-rule not implemented yet */
	-moz-column-rule: 1px solid DarkGray;
	-webkit-column-rule: 1px solid DarkGray;

	/* Column-gap not implemented yet */
	-moz-column-gap: 22px;
	-webkit-column-gap: 22px;
}


	.blogPost header {
		column-span: all;

		/* Column-span not implemented yet */
		-moz-column-span: all;
		-webkit-column-span: all;
	}

		.blogPost header p, .blogPost header p a {
			font-size: 14px;
			font-style: italic;
			color: #777;
		}

	.blogPost img {
		display: block;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:22px;
		box-shadow: 3px 3px 7px #777;

		/* box-shadow not implemented yet */
		-moz-box-shadow: 3px 3px 7px #777;
		-webkit-box-shadow: 3px 3px 7px #777;

	}

Ma analizziamo in dettaglio quello che abbiamo fatto. Innanzitutto abbiamo giustificato l'allineamento di tutti i paragrafi all'interno dell'articolo del blog. Poi, mediante le istruzioni "column-count" e "column-gap" abbiamo istruito il browser affinché impagini l'articolo su due colonne distanziate tra loro di 22px. Inoltre con l'istruzione "column-rule" abbiamo separato le due colonne con una linea verticale spessa 1 pixel e di colore grigio scuro.

Si osservi che per impaginare l'articolo in forma multicolonna, oltre ai tag canonici previsti dalla specifica CSS3, abbiamo inserito anche delle direttive particolari per i browser web Safari, Google Chrome e Mozilla Firefox. Questo si è reso necessario in quanto questi ultimi hanno comandi che non si conformano pienamente allo standard.

Oltre aille istruzioni per impaginare l'articolo in forma multicolonna, abbiamo poi detto al browser, mediante la nuova proprietà "box-shadow", di decorare ogni immagine presente nell'articolo del blog con un effetto d'ombra.

Partendo dal nostro esempio, quindi, vediamo come lavora il comando "box-shadow".

Procedendo nella lista dei parametri da sinistra verso destra abbiamo che:

  • Il primo valore (3px) rappresenta lo spostamento (offset) orizzontale dell'ombra rispetto all'immagine. In particolare, se questo valore è positivo (come nel nostro caso) lo spostamento avviene sulla destra; se questo valore, invece, è negativo, lo spostamento avviene sulla sinistra;
  • Il secondo valore (3px) rappresenta lo spostamento (offset) verticale dell'ombra rispetto all'immagine. Se questo valore è positivo (come nel nostro caso), lo spostamento avviene verso il basso; al contrario, se questo valore è negativo, lo spostamento avviene verso l'alto.
  • Il terzo valore (7px) rappresenta il valore di sfocatura (blur) dell'ombra e viene applicato intorno a tutta la superficie di quest'ultima. Un valore del blur pari a 0px rende l'ombra molto netta, quasi solida.
  • Infine, l'ultimo valore (#777) rappresenta il colore assegnato all'ombra.

Oltre a quanto mostrato con questo esempio, tengo a far osservare che la proprietà "box-shadow" ha anche altre possiibilità.

Innanzitutto, il valore relativo al blur è opzionale, per cui nel nostro esempio avremmo potuto tralasciare di specificare il valore di 7px per l'effetto blur riducendo, ovviamente, la qualità complessiva del rendering della pagina web.

Poi, dopo il parametro relativo all'effetto blur, il comando "box-shadow" accetta un altro parametro opzionale ovvero la distanza di diffusione (spread distance) dell'ombra. Anche questo valore viene applicato intorno a tutta la superficie di quest'ultima.

Infine esiste una keyword opzionale "inset" mediante cui è possibile far cadere l'ombra all'interno dell'oggetto piuttosto che all'esterno (comportamento di default).

Ma la cosa più sensazionale che è possibile fare con il comando "box-shadow" è l'applicazione contemporanea di più ombre allo stesso oggetto, ciascuna con i propri parametri. Per fare ciò è sufficiente separare la definizione di ciascuna ombra (comprensiva dei propri parametri) mediante una virgola.

Ciò consente la realizzazione di figure complesse ed artisticamente interessanti con poche linee di codice. Vediamo un esempio pratico in cui per rapidità abbiamo inserito in un'unica pagina html sia il codice HTML5 che quello CSS3.

La figura che ci apprestiamo a realizzare è uguale a quella mostrata nell'immagine seguente:

Immagine complessa realizzata con box-shadow

Il codice HTML5 e CSS3 necessario per realizzarla è il seguente:

<!doctype html>
<html>
<head>

	<style type="text/css">
	/* CSS Reset */
	html, body {
		margin: 0;
		padding: 0;
	}

	/* Da' al browser la direttiva di renderizzare l'header come blocco */
	header {
		display: block;
	}

	section {
		display:table;
	}

	/* imposta margini, ampiezza, colore di sfondo e fonts del documento html */
	body {
		margin: 0 auto;
		width: 940px;
		font: 13px/22px Helvetica, Arial, sans-serif;
		background: #f0f0f0;
	}

	#content {
		/* margin: 22px 0; */
		width:200px;
		height:200px;
		border:12px solid blue;
		background-color:orange;

		border-top-left-radius:60px 90px;
		/* border-top-left-radius not implemented yet */
		-moz-border-radius-topleft:60px 90px;

		border-bottom-right-radius:60px 90px;
		/* border-bottom-right-radius not implemented yet */
		-moz-border-radius-bottomright:60px 90px;

		-box-shadow: 64px 64px 24px 40px rgba(0,0,0,0.4),
			12px 12px 0px 18px rgba(0,0,0,0.4) inset;
		/* box-shadow not implemented yet */
		-moz-box-shadow: 64px 64px 24px 40px rgba(0,0,0,0.4),
			12px 12px 0px 18px rgba(0,0,0,0.4) inset;
		-webkit-box-shadow: 64px 64px 24px 40px rgba(0,0,0,0.4),
			12px 12px 0px 18px rgba(0,0,0,0.4) inset;
	}
	</style>
	<title>Multi Shadow</title>
</head>
<body>
	<header>
		<h1>Multi Shadow</h1>
	</header>
	<section id="content">
	</section>
</body>
</html>

Le parti interessanti del codice appena visto sono le istruzioni HTML5 e CSS3 che fanno riferimento alla sezione identificata dall'id "content". Su questa sezione, a cui è stata data una dimensione di 200 x 200 pixel e per cui è stato definito un bordo di 12 pixel di colore blu, sono stati applicati due effetti d'ombra mediante l'uso del comando "box-shadow".

Il primo di essi genera l'ombra sottostante l'immagine di primo piano. Il secondo effetto, invece, genera l'ombra interna all'oggetto. Per entrambi gli effetti è interessante notare l'uso della nuova proprietà "rgba". Essa riceve in input quattro valori che, come indicato dal suo stesso nome, rappresentano, nell'ordine, il valore di colore Rosso (Red), il valore di colore verde (Green), il valore di colore Blu (Blue) ed il valore di trasparenza (alpha channel) associati alla specifica ombra. Vi è però una differenza fra l'ultimo valore ed i primi 3. Infatti, mentre i parametri Red, Green e Blue variano in un range compreso fra 0 e 255, il quarto parametro di Alpha Channel, invece, varia in un range di valori decimali compreso fra 0 ed 1. Inoltre per esso 0 rappresenta la massima trasparenza (l'ombra non è visibile) mentre 1 costituisce la massima visibilità (nel nostro ultimo esempio un valore di 1 per la trasparenza renderebbe l'ombra di colore nero marcato).

In un certo senso la proprietà "rgba" sostituisce e per alcuni aspetti migliora la proprietà "opacity". Inoltre, come criterio generale di utilizzo, possiamo dire che essa può essere usata con tutti gli elementi su cui possono essere applicate le proprietà "color", "background-color" e "border-color".

Prima di tornare alla pagina di blog del nostro tutorial spendiamo due parole anche sulle due proprieta CSS3: "border-top-left-radius" e "border-bottom-right-radius" che abbiamo introdotto con il nostro ultimo esempio, in cui queste istruzioni consentono la generazione degli angoli arrotondati superiore-sinistro ed inferiore-destro dell'immagine.

Queste proprietà si comportano in modo simile all'istruzione "border-radius" solo che prendono in input uno o due valori numerici, espressi in pixel o percentuale, e con essi creano il semiasse orizzontale ed il semiasse verticale di un'ellisse la cui quarta parte diventa l'angolo di rotazione del bordo.

Immagine complessa realizzata con box-shadow con evidenza ellissi arrotondamento

Nel caso in cui a queste proprietà venga passato un unico valore esse settano automaticamente il secondo parametro al valore del primo ed in questo caso l'ellisse diventa una circonferenza. Inoltre, se uno dei due valori è impostato a zero, l'angolo non viene arrotondato e resta quadrato.

Per quanto riguarda l'ordine dei parametri, il primo valore rappresenta la misura del semiasse orizzontale dell'ellisse (ottenuta come distanza dal bordo laterale sinistro o destro), mentre il secondo valore rappresenta la misura del semiasse verticale della medesima ellisse (ottenuta sempre come distanza dal bordo superiore o inferiore).

Chiaramente oltre alle proprietà "border-top-left-radius" e "border-bottom-right-radius" esistono anche le proprietà "border-top-right-radius" e "border-bottom-left-radius" che riguardano, rispettivamente, l'angolo superiore-destro e l'angolo inferiore-sinistro.

Per verificare il supporto del proprio browser al codice appena visto è sufficiente selezionare questo link. La pagina viene visualizzata correttamente in Safari, Google Chrome (v. 12.0.742.100 o superiore) e Mozilla Firefox (v.3.6.14 o superiore) mentre in browser come Internet Explorer 8 viene mostrato solo il testo "Multi Shadow".

Ora torniamo al nostro tutorial e passiamo a stilizzare i commenti fatti dagli utenti agli articoli del blog.

 

CSS3 - Stilizzazione dei contenuti - Area dei contenuti principale - Commenti

Per stilizzare i commenti degli utenti del nostro blog utilizzeremo il seguente codice CSS:

#comments {
	margin-top: 21px;
	padding-top: 22px;
	border-top: 1px solid #d7d7d7;
}

	#comments article {
		display: table;
		padding: 22px;
	}

	#comments article:nth-child(2n+1) {
		padding: 21px;
		background: #E3E3E3;
		border: 1px solid #d7d7d7;

		border-radius:11px;

		/* Border-radius not implemented yet */
		-moz-border-radius: 11px;
		-webkit-border-radius: 11px;
	}

		#comments article header {
			display: table-cell;
			width: 220px;
			padding-right: 22px;
		}

			#comments article header a {
				display: block;
				font-weight: bold;
				color: #000;
			}

				#comments article header a:hover {
					text-decoration: none;
				}

		#comments article p {
			padding: 0;
			text-align:justify;
		}

Il codice non presenta particolari novità in quanto i tag utilizzati sono già stati visti nei precedenti articoli di questo tutorial.

L'unica istruzione che merita di essere commentata è la pseudo-classe "nth-child" che è un selettore che sceglie elementi all'interno di una lista di figli di un elemento padre in base alla posizione che questi possiedono in essa. Nel nostro caso, considerato che la lista dei commenti fatti ad un post parte da una posizione di indice 0 e considerato che il parametro passato al selettore è (2n+1), "nth-child" seleziona tuttii i commenti che hanno una posizione di indice dispari. Avremmo potuto ottenere lo stesso risultato passando al selettore il valore (odd). Invece, per selezionare tutti gli elementi di indice pari della lista è sufficiente passare ad "nth-child" il valore (2n) o il valore (even).

Passiamo ora a stilizzare la form per l'inserimento di un nuovo commento all'articolo del blog.

 

CSS3 - Stilizzazione dei contenuti - Area dei contenuti principale - Form Nuovo Commento

I comandi CSS che adotteremo per stilizzare la form di inserimento di un nuovo commento sono i seguenti:

form {
	margin-top: 21px;
	padding-top: 22px;
	border-top: 1px solid #d7d7d7;
}

	form p {
		display: table;
		margin-bottom: 22px;
		padding: 0 22px;
	}

	form label {
		display: table-cell;
		width: 140px;
		padding-right: 20px;
		text-align: right;
		font-weight: bold;
		vertical-align: top;
	}

	form input[type="text"], form input[type="email"], form input[type="url"] {
		display: table-cell;
		width: 300px;
		height: 20px;
		border: 1px solid #d7d7d7;
	}

	form textarea {
		width: 300px;
		height: 100px;
		border: 1px solid #d7d7d7;
	}

	form input[type="submit"] {
		margin-left: 162px;
	}

Come si vede, il codice è facilmente leggibile e comprensibile, soprattutto se accompagnato dal codice HTML a cui fa riferimento e, pertanto, non necessita di ulteriori commenti.

Con la stesura del CSS per il modulo di inserimento di un nuovo commento termina l'impaginazione dell'area dei contenuti principale. Passiamo, quindi, a considerare l'elemento successivo dell'area dei contenuti ovvero la barra di navigazione laterale (sidebar) del nostro blog.

 

CSS3 - Stilizzazione dei contenuti - Sidebar

La stilizzazione della barra di navigazione è molto semplice da eseguire. Essa, in parte, è già stata iniziata all'inizio di questo articolo e viene completata con le istruzioni seguenti:

	aside section {
		display:block;
		margin: 22px 0 0 22px;
		padding: 11px 22px;
		background: url("/images/sidebar_section_background.png") repeat-x;

		border-radius: 11px;

		/* Border-radius not implemented yet */
		-moz-border-radius: 11px;
		-webkit-border-radius: 11px;
	}

		aside section ul {
			margin: 0 0 0 -20px;
			list-style: none;
		}

			aside section ul li a {
				display: block;
				text-decoration: none;
				color: #000;
			}

				aside section ul li a:hover {
					text-decoration: underline;
				}

Anche il codice CSS relativo alla Sidebar è molto semplice e non necessita di ulteriori spiegazioni.

In ultimo, per concludere, passsiamo ad impaginare gli elementi che compongono il pie' di pagina (footer) del nostro blog.

 

CSS3 - Stilizzazione elementi pie' di pagina

Le istruzioni CSS con cui impaginiamo i diversi elementi che compongono il footer della nostra pagina di blog sono le seguenti:

footer {
	position: absolute;
	left: 0px;
	right:0px;
	width: 100%;
	background: #222;
}

	footer #mainFooterArea {
		display: table;
		margin: 0 auto;
		width: 940px;
		color: #777;
	}

		footer #mainFooterArea #popular, footer #mainFooterArea #about, footer #mainFooterArea #blogroll {
			display: table-cell;
			width: 260px;
		}

		footer #mainFooterArea #popular, footer #mainFooterArea #blogroll {
			padding-left:20px;
		}

	footer #mainFooterArea section header h3 {
		color: #FFF;
	}

	footer #mainFooterArea #about p {
		text-align:justify;
	}

			footer #mainFooterArea #popular header h3, footer #mainFooterArea #blogroll header h3 {
	  			padding-left:10px;
			}

	footer #mainFooterArea section a {
		color: #999;
	}

		footer #mainFooterArea section a:hover {
			color: #FFF;
			text-decoration: none;
		}

	footer #mainFooterArea section ul {
		margin: 0 0 0 0px;
		list-style: square;
		color: #565656;
	}

		footer #mainFooterArea section ul li a {
			display: block;
		}

Anche in questo caso il codice è "semplice" e non necessita di particolari commenti.

Con questo CSS si conclude il nostro tutorial sull'uso di HTML5 e CSS3.

Chi volesse vedere il risultato finale della nostra pagina stilizzata può farlo a questo link. La pagina viene renderizzata correttamente in Google Chrome (v.12.0.742.100 o superiore), nell'ultima versione di Safari e dovrebbe funzionare correttamente anche con la versione 11 (o superiore) del browser Opera.

Invece, il risultato della renderizzazione risulta parziale con Mozilla Firefox 3.6.14. Un discreto miglioramento per questo browser, che comunque non supporta l'attributo CSS "column-span" usato per l'intestazione dell'articolo, può essere ottenuto selezionando questo altro link, in cui al foglio di stile iniziale sono stati aggiunti un attributo "display:block;" per la sezione "intro" ed un attributo "vertical-align:top;" per l'elemento "aside" della barra di navigazione.

Prima di concludere, al fine di dimostrare come un layout ben strutturato ed organizzato possa essere facilmente modificato ed adattato, vediamo un restyling della nostra pagina web in cui l'articolo del blog viene presentato su 3 colonne invece che su 2 ed il footer presenta quattro sezioni invece di 3. La versione "pulita" per Google Chrome (v.12.0.742.100 o superiore), Safari ed Opera (v.11 o superiore) è visibile a questo link. Quella compatibile anche con FireFox, invece, è visionabile su questo altro link.

In ultimo, tengo a precisare che, anche se ufficialmente questo articolo chiude il tutorial introduttivo su HTML5 e CSS3, ad esso farà seguito un ulteriore articolo in cui mostrerò come adattare il codice HTML e gli stili CSS per visualizzare la pagina del blog in modo pressocché omogeneo su tutti i principali browser web, incluso Internet Explorer 8. Per quest'ultimo, come vedremo, sarà necessario anche un piccolo Javascript.

Viene allegato a questo articolo l'archivio zip contenente le immagini, il codice html ed il codice css che sono stati adoperati in questo tutorial (solo per utenti registrati).

 


Articoli successivi:

HTML5 & CSS3 - Appendice Speciale (Parte 1)

In questo articolo, che costituisce un'appendice al tutorial su HTML5 e CSS3 postato nei mesi scorsi, vedremo come modificare la pagina del blog precedentemente analizzata in modo da renderla fruibile e visivamente gradevole sia sotto Internet Explorer 8/9, che sotto Google Chrome, Safari e Mozilla Firefox.

Quello che ci interessa, in particolare, è raggiungere una buona compatibilità del nostro codice con le versioni 8 e 9 del browser di casa Microsoft.

Leggi articolo

 

HTML5 & CSS3 - Appendice Speciale (Parte 2)

Nella prima parte di questa appendice al tutorial su HTML5 e CSS3 abbiamo introdotto gli script che utilizziamo per rendere la nostra pagina di blog compatibile con tutti i principali browser web in circolazione (Internet Explore 8 o superiore, Google Chrome, Mozilla Firefox, Safari).

Inoltre, abbiamo visto il codice HTML univoco della nostra pagina web.

Ora ci apprestiamo ad esaminare il codice sorgente dei due fogli di stile utilizzati.

Leggi articolo


 

Ultimo aggiornamento Venerdì 07 Dicembre 2012 01:37