tags: css3, html5, seo, html, div con angoli arrotondati, ruotare i div, ombra sotto ai div
I CSS3, introduzione
In questo articolo, mettiamo sul blog i nostri esempi completi di codice coi CSS3 e poi, col tempo (..e tempo permettendo…) anche di HTML5. Alla fine dell’articolo saranno aggiunti, in maniera sequenziale, gli esperimenti odierni e futuri coi sorgenti.
Le basi per l’innovazione dei CSS, poi CSS2, e che dovrà portare al varo definitivo dei CSS3 è iniziato nel lontano 2001 e ancora è un work in progress. Ufficialmente i lavori per il CSS3 sono iniziati nel 2005.
A tutt’oggi, non è definitivo, ma i principali sviluppatori di browser hanno già iniziato a supportare lo standard CSS3… tanto per cominciare (a nostro modesto parere) senza rispettarlo… introducendo però di fatto i CSS3, un altra trasformazione epocale dell’esperienza web.
Il SEO, Search Engine Optimization ovvero Ottimizzare il Sito per risultare ai primi posti nei risultati dei Motori di Ricerca
Occupandoci di servizi di SEO (search engine optimization, ovvero migliorare la visibilità dei siti dei nostri clienti agli occhi dei motori di ricerca, in pratica “Come risultare ai primi posti dei risultati“), ci interessano molto gli aspetti dei CSS3 che aiuteranno a migliorarlo ed ecco il perchè di questo articolo laboratorio.
AVVERTENZE:
- Internet Explorer anche nella versione 8 NON SUPPORTA i CSS3 (per la verità, supporta in maniera incompleta anche i precedenti). E’ quindi opportuno che vi muniate di (in ordine alfabetico) Chrome, Firefox, o Safari. Come si vedrà dagli screenshot, noi usiamo Firefox.
- I seguenti sono esempi di CSS3 con codice sorgente del CSS3 e codice sorgente dell’HTML
- Potete usare i sorgenti sotto licenza FQV ovvero come vi pare, infatti FQV è l’acronimo per Fateci Quello che Volete
CSS3 Esempio n. 1 – DIV con angoli arrotondati, Ombra sotto al DIV e Rotazione dei DIV
CSS3 Esempio di DIV Ruotato, DIV Ombra e DIV con Angoli Arrotondati
Con Firefox visualizziamo correttamente l’effetto sui DIV, mentre come si vede dalla diapositiva 
seguente, Explorer 8 non interpreta, e il risultato è
Explorer 8 non interpreta i CSS3
e visto che Internet Explorer 9, non si installa su Windows XP… cosa faranno gli Explorer addicted?… Mah! Forse si convertiranno a Mozilla Firefox..
In fine il particolare SEO dei CSS3 che ci interessa in questo esempio: il testo è testo e non immagine e quindi verrà indicizzato
Negli effetti speciali dei CSS3 il testo è testo vero e indicizzabile, ottimo per il SEO
In conclusione, mettiamo a disposizione il sorgente utilizzato per la pagina di esempio del CSS3 per realizzare DIV con angoli arrotondati, DIV con Ombra sotto e DIV Inclinati.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:rotate(45deg);
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg); /* Opera */
border:2px solid;
-moz-border-radius:5px; /* Firefox */
border-radius:5px;
-moz-box-shadow: 3px 3px 3px #333333; /* Firefox */
-webkit-box-shadow: 1px 1px 1px #888888; /* Safari and Chrome */
box-shadow: 3px 3px 3px #000000;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the transform property.</p>
<div id="div2">Hello. This is a DIV element with round corners.</div>
<div>Hello. This is a DIV element.</div>
</body>
</html>
4 comments
Robert
5 gennaio, 2011 a 13:45 (UTC 2) Link to this comment
Nell’articolo, sostengo che i produttori dei browser non rispettano lo standard CSS3 per un semplice e pesante motivo:
Ogni produttore sta facendosi tag proprietari mandando a farfalle il concetto di standard con la disdicevole conseguenza di aumentare il peso del codice dei CSS!
Basta infatti guardare quante linee sono necessarie per ogni effetto:
praticamente bisogna ripetere la riga di CSS3 per ogni browser che si vuole supportare!
Semplicemente assurdo.. Non pensate?
Robert
evilripper
26 agosto, 2011 a 12:12 (UTC 2) Link to this comment
bè internet explorer schifido non ti fa aggiungere manco linee di codice in più visto che non li supporta!
Andrea
29 gennaio, 2012 a 17:29 (UTC 2) Link to this comment
Ecco un sito con degli ottimi esempi per creare un div a forma di badge con l’HTML5 e i CSS3
http://css-tricks.com/examples/ShapesOfCSS/
admin
29 gennaio, 2012 a 18:09 (UTC 2) Link to this comment
Grazie Mr. Andrea per il suo link,
molto interessante!! e molto utile!!
Mescolare i nostri esempi di HTML5 e CSS3 con quelli del suo link, ci ha permesso di realizzare un ottimo badge html5 css3 sul nostro nuovo sito per il nostro servizio rapido ed economico di recupero dati hard disk rotto