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 4 PDF Stampa E-mail
( 0 Votes )
Scritto da Enrico Battuello   
Domenica 06 Marzo 2011 23:08

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.

Per chi volesse rivedere le parti già discusse 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


 

Proseguiamo, quindi, con la stesura del nostro foglio di stile e passiamo ad impaginare l'introduzione. Fino ad ora, comunque, non abbiamo visto nessun tag specifico CSS3, ma ora le cose si fanno più interessanti.

Come abbiamo visto nella parte 2 di questo tutorial, il markup associato alla sezione "intro" è piuttosto semplice. Infatti, abbiamo una sotto-sezione "header", seguita da un paragrafo "<p>". Tuttavia, per fare sembrare il tutto più attraente stilizzeremo il tutto usando alcune nuove features CSS3.

Ma andiamo subito al codice:

#intro {
	margin-top: 76px;
	height: 220px;
	background: url("/images/intro_car.png") top 487px no-repeat, url("/images/intro_background.png") repeat-x right;

	/* background-size: 44% 100%, 100%; */

	/* Background-size not implemented yet */
	/* -webkit-background-size: 44% 100%, 100%; */   /* Google Chrome e Safari */
	/* -o-background-size: 44% 100%, 100%;      */   /* Opera                  */
	/* -khtml-background-size: 44% 100%, 100%;  */   /* Konqueror              */
	/* -moz-background-size: 44% 100%, 100%;    */   /* Mozilla Firefox        */

	border-radius: 22px;

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

Vediamo in dettaglio ciò che abbiamo fatto. Per prima cosa abbiamo fissato per la sezione "intro" un margine superiore di 76px rispetto all'oggetto precedente (nel caso specifico la sezione "header", considerato che la sezione nav è collocata in modo assoluto).

Poi abbiamo definito il background per la sezione "intro" come somma di due immagini; la prima è l'immagine di una macchina sportiva:

Immagine macchina sportiva con misure per tutorial html5 css3

la seconda invece è una di quelle texture che in inglese viene chiamata "seamless image" o "seamless texture", nota in italiano come texture ciclica, che può essere replicata un numero indefinito di volte sull'asse orizzontale e/o sull'asse verticale senza che ci si accorga delle linee di giunzione fra le diverse ripetizioni:

Immagine texture ciclica per tutorial html5 css3 con misure

A titolo informativo si osservi che entrambe le immagini sono in formato png (Portable Network Graphics) ma l'immagine della macchina è dotata di un background trasparente che consente la visualizzazione delle immagini e/o degli sfondi sottostanti. Per chi volesse ulteriori dettagli aggiungo che questa texture è stata creata utilizzando Gimp 2.6, un programma di fotoritocco gratuito discretamente potente, rilasciato sotto licenza GPL v.2, nato e sviluppato in ambiente Linux e disponibile da qualche tempo anche su piattaforma Windows. Nell'immagine precedente la trasparenza è rappresentata dalla scacchiera a due tonalità di grigio.

La possibilità di usare due o più immagini simultaneamente componendole come sfondo di una specifica sezione è una delle nuove features aggiunte dalle specifiche CSS3. In particolare, nel nostro caso abbiamo inserito nella sezione "intro" l'immagine dell'auto sportiva "senza ripeterla", allineandola al top della sezione ed a 487px (px=pixel) dal margine sinistro e ad essa, poi, abbiamo aggiunto come sfondo la seconda immagine "ripetendola" sull'asse x da sinistra verso destra fino a riempire l'intera sezione. Pertanto, essendo l'immagine di sfondo larga 1px ed essendo l'area da riempire ampia 940px abbiamo fatto replicare al browser la seconda texture sull'asse orizzontale (x) per 940 volte.

Il vantaggio derivante dall'uso di una texture molto piccola e "ripetibile", per generare uno sfondo, è principalmente legato ai tempi di caricamento della pagina web. Difatti, indipendentemente dalle dimensioni dello sfondo usato, l'immagine che il browser deve caricare è sempre molto piccola. Nel nostro caso, ad esempio, la texture di sfondo occupa solo 336 byte.

L'effetto che si ottiene, invece, non ha nulla da invidiare a quello che si avrebbe utilizzando un'unica texture di 940x220 px, con lo svantaggio che quest'ultima ha dimensioni molto maggiori e richiede più tempo per il caricamento.

Prima di mostrare l'immagine relativa al background ottenuto per la sezione "intro" si osservi che su di essa è stato applicato anche l'attributo "border-radius" a cui è stato dato il valore di 22px. A cosa serve questa proprietà ? Questa istruzione, anch'essa appartenente alle specifiche CSS3, da al browser la direttiva di arrotondare gli angoli di una regione secondo un arco di circonferenza di 90° ottenuto da un cerchio avente raggio pari al valore specificato per il suddetto attributo (nel nostro caso 22px).

Esempio di arrotondamento sezione in base a cerchio di raggio 22 pixel

Se si osserva il codice CSS relativo alla sezione "intro" è possibile notare che, oltre all'istruzione "border-radius", sono presenti una serie di proprietà dal nome simile che rappresentano attributi specifici dei diversi produttori di browser. Ciò è necessario in quanto la proprietà "border-radius" non è riconosciuta da molti browser che, invece, implementano una propria specifica di questo attributo.

Nel caso specifico sia Mozilla Firefox che Google Chrome ignoreranno la proprietà "border-radius" ed al suo posto utilizzeranno rispettivamente "-moz-border-radius" e "-webkit-border-radius".

La figura seguente mostra il rendering che si ottiene in Google Chrome ed in Safari con l'html ed il css correnti:

Esempio di composizione di immagini per generare un background

In Firefox (3.6.13), invece, il rendering dello sfondo della sezione "intro" fallisce per via di un doppio problema: un bug che affligge l'attributo background per il tag "section" ed un supporto ridotto alle specifiche CSS3 per lo stesso attributo background.

Pertanto, per poter sistemare la visualizzazione occorre sostituire nell'html il codice:

<section id="intro">
	<header>
		<h2>Ti piacciono le auto? Sei nel posto giusto!</h2>
	</header>
	<p>Sei un appassionato di auto? In questo sito puoi trovare opinioni e recensioni sulle case automobilistiche, test drive e schede sulle prove su strada e tutte le anteprime del 2010. Inoltre, se cerchi il massimo dalla tua auto, puoi consultare la nuovissima sezione "Tuning".</p>
</section>

con il codice:

<div id="intro">
	<header>
		<h2>Ti piacciono le auto? Sei nel posto giusto!</h2>
	</header>
	<p>Sei un appassionato di auto? In questo sito puoi trovare opinioni e recensioni sulle case automobilistiche, test drive e schede sulle prove su strada e tutte le anteprime del 2010. Inoltre, se cerchi il massimo dalla tua auto, puoi consultare la nuovissima sezione "Tuning".</p>
</div>

e cambiare il CSS della sezione intro in:

#intro {
	margin-top: 76px;
	height: 220px;
	background: url("/images/intro_car.png"), url("/images/intro_background.png");
	background-repeat: no-repeat, repeat-x;
	background-position: 487px 0px, right;

	/* background-size: 44% 100%, 100%; */

	/* Background-size not implemented yet */
	/* -webkit-background-size: 44% 100%, 100%; */   /* Google Chrome e Safari */
	/* -o-background-size: 44% 100%, 100%;      */   /* Opera                  */
	/* -khtml-background-size: 44% 100%, 100%;  */   /* Konqueror              */
	/* -moz-background-size: 44% 100%, 100%;    */   /* Mozilla Firefox        */

	border-radius: 22px;

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

Si noti che, quando si specifica il valore dell'attributo "background" come composizione di più immagini, l'immagine più a sinistra nella specifica dei diversi url è anche quella che risulta in primo piano nello sfondo generato. Procedendo verso destra ciascuna ulteriore immagine va sempre più in secondo piano rispetto alle precedenti.

Si osservi, inoltre, che per gli attributi "background", "background-repeat" e "background-position" la virgola funziona da separatore delle impostazioni per ciascuna immagine che compone lo sfondo, secondo l'ordine posizionale rappresentato dalla dichiarazione dei diversi "url" per l'attributo "background". Nel nostro caso, ad esempio, la posizione 1 è occupata dall'immagine "intro_car.png" che riceve un attributo di "background-repeat" valorizzato a "no-repeat" ed un attributo di "background-position" valorizzato alle coordinate: 487px dal margine sinistro (left margin) della sezione "intro" sull'asse orizzontale, 0px dal margine superiore (top margin) della sezione intro sull'asse verticale.

Modificando il nostro foglio di stile nel modo appena visto Google Chrome, Safari e Mozilla Firefox visualizzeranno correttamente il background della sezione intro, come mostrato nell'immagine precedente.

Comunque, nel prosieguo di questo tutorial resteremo "fedeli" ai nostri file html e css originari e soltanto alla fine ne daremo una versione rivista compatibile con tutti i browser più comuni.

Prima di passare alla "stilizzazione" del testo della sezione intro desidero spendere due parole su un altro attributo introdotto con i CSS3 che nel nostro foglio di stile appare sempre commentato in quanto non utilizzato. Questo attributo è "background-size" e in alcuni casi può rivelarsi molto utile, vediamo perché:

Innanzitutto "background-size" può variare con una sola riga di comando le dimensioni di ciascuna immagine adoperata per comporre lo sfondo di una specifica area. Difatti, come gli attributi appena visti, separa le impostazioni relative a ciascuna immagine con una virgola, rispettando l'ordine posizionale stabilito dall'elenco di url passato come valore all'attributo "background". Le dimensioni di ciascuna immagine possono essere variate sia sull'asse orizzontale che su quello verticale e ci sono almeno due modi per farlo.

Il primo consiste nello specificare un valore percentuale per ognuna delle due dimensioni di un' immagine. Questi valori percentuali non sono relativi alle dimensioni dell'immagine ma a quelle dell'area o della sezione in cui quest'ultima viene inserita come sfondo.

Ad esempio, nel nostro caso, la sezione "intro" ha una dimensione orizzontale (width) di 940px ed una dimensione verticale (height) di 220px. Le dichiarazioni viste per la proprietà "background-size" nelle nostre due varianti di CSS specificano che l'immagine "intro_car.png" ha una dimensione orizzontale pari al 44% della medesima dimensione della sezione intro (quindi pari al 44% di 940px) ed una dimensione verticale pari al 100% della medesima dimensione della stessa sezione. Per l'immagine di sfondo "intro_background.png" è stata definita solo una percentuale del 100% che si applica sia alla dimensione orizzontale che a quella verticale e che distende la texture su tutto lo sfondo della sezione intro.

Dal punto di vista visivo, l'effetto che si ottiene attivando l'attributo "background-size" con questi valori è esattamente identico a quello visto nell'immagine precedente.

Faccio osservare che le coordinate da cui ha origine il posizionamento dell'immagine ridimensionata sono specificate all'interno dell'attributo "background", nel primo CSS, e all'interno dell'attributo "background-position" nel secondo CSS.

Se per l'immagine dell'auto sportiva si modificasse il valore percentuale della dimensione orizzontale, portandolo dal 44% al 100%, visivamente otterremmo un'auto più grande, ma sproporzionata e in gran parte troncata, in quanto uscirebbe dalla sezione "intro" per via della posizione iniziale di 487px sull'asse orizzontale.

Vediamo qualche esempio.

Dato il seguente codice CSS per la sezione "intro":

#intro {
	margin-top: 76px;
	height: 220px;
	background: url("/images/intro_car.png") top 487px no-repeat, url("/images/intro_background.png") repeat-x right;

	background-size: 100% 100%, 100%;

	/* Background-size not implemented yet */
	-webkit-background-size: 100% 100%, 100%;    /* Google Chrome e Safari */
	-o-background-size: 100% 100%, 100%;         /* Opera                  */
	-khtml-background-size: 100% 100%, 100%;     /* Konqueror              */
	-moz-background-size: 100% 100%, 100%;       /* Mozilla Firefox        */

	border-radius: 22px;

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

l'immagine che si ottiene applicandolo al markup html è la seguente:

Come ci si aspettava, l'immagine dell'auto sullo sfondo risulta essere più grande ma spoporzionata e tronca.

Più interessante è il caso in cui si commenta l'impostazione che fissa l'altezza della sezione "intro" a 220px. Infatti, in questo modo, l'altezza di questa sezione risulta relazionata al contenuto dell'header e del paragrafo inclusi in essa.

Ad esempio, se alla sezione "intro" del nostro html applichiamo il codice css seguente:

#intro {
	margin-top: 76px;
	/* height: 220px; */
	background: url("/images/intro_car.png") top 487px no-repeat, url("/images/intro_background.png") repeat-x right;

	background-size: 44% 100%, 100%;

	/* Background-size not implemented yet */
	-webkit-background-size: 44% 100%, 100%;    /* Google Chrome e Safari */
	-o-background-size: 44% 100%, 100%;         /* Opera                  */
	-khtml-background-size: 44% 100%, 100%;     /* Konqueror              */
	-moz-background-size: 44% 100%, 100%;       /* Mozilla Firefox        */

	border-radius: 22px;

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

il rendering risultante con Google Chrome risulta essere uguale all'immagine sottostante:

Background ad altezza variabile per la sezione intro. Esempio 1

che, come si vede, ha un'altezza inferiore rispetto a quella del primo rendering ottenuto con altezza fissa di 220px.

Se, per ipotesi, aumentiamo il testo contenuto nel paragrafo della sezione (o aggiungiamo un altro paragrafo di testo) il rendering del background si adatta, in base ai valori percentuali specificati nel css per ciascuna immagine, e genera lo sfondo visualizzato nella figura seguente:

Background intro altezza variabile. Esempio 2

Dall'immagine precedente appare evidente che l'altezza della sezione si è adattata al contenuto mantenendo, nel complesso, un risultato gradevole.

Per il nostro esempio, tuttavia, useremo un css con altezza fissa di 220px.

Il secondo modo in cui è possibile variare le dimensioni delle immagini che compongono uno sfondo mediante l'attributo "background-size" consiste nello specificare le dimensioni in pixel di ciascuna immagine.

Questa modalità è diversa dalla precedente in quanto fissa le dimensioni precise di ciascuna immagine.

Tuttavia, con la stessa istruzione "background-size", è possibile utilizzare entrambe le modalità, sia per specificare le dimensioni di immagini distinte, sia per specificare le dimensioni orizzontali e verticali di una medesima immagine.

Ad esempio, se alla sezione intro del nostro codice html applichiamo lo stile seguente:

#intro {
	margin-top: 76px;
	/* height: 220px; */
	background: url("/images/intro_car.png") top 487px no-repeat, url("/images/intro_background.png") repeat-x right;

	background-size: 44% 100px, 100%;

	/* Background-size not implemented yet */
	-webkit-background-size: 44% 100px, 100%;
	-o-background-size: 44% 100px, 100%;
	-khtml-background-size: 44% 100px, 100%;
	-moz-background-size: 44% 100px, 100%;

	border-radius: 22px;

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

l'immagine di sfondo renderizzata da Google Chrome risulta essere uguale a quella seguente:

Background intro. Esempio di dimensioni specificate in pixel e percentuali

Dopo questa parentesi relativa all'uso dell'attributo "background-size", passiamo al css che impagina correttamente il testo dell'introduzione.

#intro h2 {
	width: 300px;
	padding: 10px 10px 0 20px;
	font-weight: normal;
	color: #fff;
}

#intro p {
	padding: 0px 0px 10px 20px;
	color: #d9f499;
	width: 430px;
	text-align:justify;
}

Il codice è molto semplice e non necessita di ulteriori commenti.

A questo punto del tutorial il nostro codice CSS risulta essere il seguente:

/* Inizio sezione reset ed inizializzazione */

/* CSS Reset */
html, body {
	margin: 0;
	padding: 0;
}

/* Da' al browser la direttiva di renderizzare ciascun elemento HTML 5 come blocco */
header, footer, aside, nav, article {
	display: block;
}

/* 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;
}

h2 {
	font-size: 28px;
	line-height: 44px;
	padding: 22px 0;
}

h3 {
	font-size: 18px;
	line-height: 22px;
	padding: 11px 0;
}

p {
	padding-bottom: 22px;
}

/* Fine sezione reset ed inizializzazione */


/* Inizio sezione navigazione */

nav {
	position: absolute;
	left: 0;
	width: 100%;
	background: url("/images/nav_background.png");
}

nav ul {
	margin: 0 auto;
	width: 940px;
	list-style: none;
}

nav ul li {
	float: left;
}

	nav ul li a {
		display: block;
		margin-right: 20px;
		width: 140px;
		font-size: 14px;
		line-height: 44px;
		text-align: center;
		text-decoration: none;
		color: #777;
	}

		nav ul li a:hover {
			color: #fff;
		}

		nav ul li.selected a {
			color: #fff;
		}

		nav ul li.subscribe a {
			margin-left: 22px;
			padding-left: 33px;
			text-align: left;
			background: url("/images/rss_piccolo.png") left center no-repeat;
		}

/* Fine sezione navigazione */

/* Inizio sezione intro */

#intro {
	margin-top: 76px;
	height: 220px;
	background: url("/images/intro_car.png") top 487px no-repeat, url("/images/intro_background.png") repeat-x right;

	/* background-size: 44% 100%, 100%; */

	/* Background-size not implemented yet */
	/* -webkit-background-size: 44% 100%, 100%; */   /* Google Chrome e Safari */
	/* -o-background-size: 44% 100%, 100%;      */   /* Opera                  */
	/* -khtml-background-size: 44% 100%, 100%;  */   /* Konqueror              */
	/* -moz-background-size: 44% 100%, 100%;    */   /* Mozilla Firefox        */

	border-radius: 22px;

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

#intro h2 {
	width: 300px;
	padding: 10px 10px 0 20px;
	font-weight: normal;
	color: #fff;
}

#intro p {
	padding: 0px 0px 10px 20px;
	color: #d9f499;
	width: 430px;
	text-align:justify;
}

/* Fine sezione intro */

Per coloro che desiderano vedere in concreto il risultato dell'applicazione degli stili di cui abbiamo parlato fino ad ora è sufficiente selezionare questo link.

Il rendering è stato testato con Google Chrome e dovrebbe funzionare anche con Safari ed Internet Explorer 9, mentre funziona parzialmente con Mozilla Firefox 3.6.14 (in quanto fallisce la renderizzazione del background dell'introduzione per i problemi esposti precedentemente in questo articolo) e non funziona affatto in Internet Explorer 8.

Qualora la pagina mostrata dal collegamento precedente non apparisse correttamente provate a visualizzare questo ulteriore link e fate riferimento alla nota del 25/06/2011, in fondo a questo articolo, per ottenere spiegazioni in merito.

(Fine quarta parte)

Viene allegato a questo articolo l'archivio zip contenente il codice html, il codice css e le immagini adoperati fino a questo momento in questo tutorial (solo per utenti registrati).

 

Nota del 25/06/2011.

A partire dalla versione 12.0.742.100 di Google Chrome (ma probabilmente anche con qualche revisione precedente) il posizionamento delle immagini mediante l'attributo "background" del foglio di stile è cambiato. Più specificamente, sono state inveritite le coordinate per il posizionamento verticale ed orizzontale dell'immagine rendendo il comportamento di questo attributo uguale a quello dell'attributo "background-position". Pertanto, mentre prima in Google Chrome il CSS della sezione intro risultava funzionare con questa specifica:

#intro {
	margin-top: 76px;
	height: 220px;
	background: url("/images/intro_car.png") top 487px no-repeat, url("/images/intro_background.png") repeat-x right;

	/* background-size: 44% 100%, 100%; */

	/* Background-size not implemented yet */
	/* -webkit-background-size: 44% 100%, 100%; */   /* Google Chrome e Safari */
	/* -o-background-size: 44% 100%, 100%;      */   /* Opera                  */
	/* -khtml-background-size: 44% 100%, 100%;  */   /* Konqueror              */
	/* -moz-background-size: 44% 100%, 100%;    */   /* Mozilla Firefox        */

	border-radius: 22px;

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

con la versione 12.0.742.100, lo stesso CSS deve essere modificato in:

#intro {
	margin-top: 76px;
	height: 220px;
	background: url("/images/intro_car.png") 487px top no-repeat, url("/images/intro_background.png") repeat-x right;

	/* background-size: 44% 100%, 100%; */

	/* Background-size not implemented yet */
	/* -webkit-background-size: 44% 100%, 100%; */   /* Google Chrome e Safari */
	/* -o-background-size: 44% 100%, 100%;      */   /* Opera                  */
	/* -khtml-background-size: 44% 100%, 100%;  */   /* Konqueror              */
	/* -moz-background-size: 44% 100%, 100%;    */   /* Mozilla Firefox        */

	border-radius: 22px;

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

In ogni caso, il codice alternativo presentato in questo articolo per visualizzare correttamente la sezione introduttiva anche con Mozilla Firefox, resta funzionante sia per quest'ultimo che per le differenti versioni di Google Chrome.


Articoli successivi:

HTML5 & CSS3 - Parte 5

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.

Leggi articolo

 

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:38