Le novità introdotte dalle specifiche CSS3 in continuo sviluppo e accompagnate dai Browsers più noti come Safari e Firefox, sono sempre più interessanti; certo non le cito tutto perchè basta cercare CSS3 in Google o andare su css3.info per trovare tutte le regole.
In particolare mi dedico agli effetti dei quali ho sempre sentito la mancanza per implementarli nei mie layout web, come la possibilità di creare un’ombra ad un div.

Vediamo il codice per l’Ombra di un Box:

box-shadow: 0px 0px 5px #ccc; (Standard)
-moz-box-shadow:  0px 0px 5px #ccc; (Firefox)
-webkit-box-shadow: 0px 0px 5px #ccc; (Safari)

Ora creo un box con angoli tondi e ombreggiatura:

#MyID {
position:absolute;
width: 120px;
height: 120px;
border: 1px solid #333;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 0px 0px 5px #ccc;
-moz-box-shadow: 0px 0px 5px #ccc;
-webkit-box-shadow: 0px 0px 5px #ccc;
}

Presto analizzerò altre capacità CSS3.

il problema del supporto dei font su web è sempre stato tema di disussione, ora attraverso quello che sono le variabili CSS introdotte in sperimentazione con CSS3, è possibile integrare un font nella pagina web stessa, senza averlo necessariamente installato nel sistema.
Come funziona, in pratica con il comando variabile @font-face si determina la posizione del font custom nel sistema e sul server, ed il nome attribuito al font stesso, i browser che supportano questa carateristica penseranno a mettere in cace i caratteri potendoli utilizzare nelle nostre pagine, richiamando il nome settato nella variabile alla voce font{}; o font-family{};.
Vediamo un esempio:

@font-face {
font-family: ‘Sketch Block’;
src: url(‘/skin/fonts/Sketch_Block.eot’);
src: local(‘Sketch Block’),
local(‘Sketch Block’),
url(‘/skin/fonts/Sketch_Block.ttf’) format(‘truetype’);
}

body {
font-family: “Sketch Block”, “Arial”, “Helvetica”, sans-serif;
}

I font ovviamente hanno una resa differente di Aliasing su ogni Browser, nel caso si volgia utlizzare il bold din un font custom per i browser non IE è necessario dichirare la variabile con il font bold e il font-weight.
I miei test si sono svolti su Firefox e Safari con esito positivo, mentre si IE e Chrome l’opzione non è andato a buon fine, probabilmente l’opzione su IE è supportata solo se il font è presente anche in versione .eot (OpenType); ho nontato inoltre che neanche su iPhone è supportato.

Poco tempo fa leggevo che il web2.0 lo si può paragonare a un angolo tondo, in effetti la caratteristica più comune tra i vari prodotti 2.0 è il layout grafico con evidenti angoli tondi per ogni box di contenuto.
In principio, creavo elementi immagine che rappresentavano l’angolo tondo attribuendoli come fondo ai div, ottenendo l’effetto “rounded-corner”. Ora con Safari e Firefox che supportano CSS3 nativi e non, dico non perchè ognuno presenta un alternativa sfruttando il proprio motore di navigazione (webkit e Gecko); possiamo usufruire degli angoli tondi per il bordo di una div semplicemente attraverso regole CSS.
Continua a leggere…