ZEN è HTML5 Audio Player, un lettore audio realizzato con HTML5 e le animazioni di CSS3, alimentato da jPlayer.

Si presenta con un’interfaccia molto semplificata, stile anteprima di iTunes, con pulsante di riproduzione, che si trasforma in pausa una volta cliccato, visualizzato in un cerchio che mostra il progresso del brano ascoltato.

Al momento è sviluppato in modo da eseguire un singolo brano, ma sarà migliorato per supportare anche più file.

The Square Grid è un semplice framework CSS per designer e programmatori, basato su 35 colonne di uguali larghezza.

E’ dotato di una griglia di base di 18 celle verticali da 28px ciascuna. Ogni blocco div viene definito con un margine di 28 px per distanziarlo dal successivo blocco e la larghezza totale della griglia è 994 pixel – che la maggior parte dei moderni monitor supporta.

Per utilizzare il framework basta collegare il foglio di stile squaregrid.css con le nostre pagine e durante la scrittura del codice assegnare classi agli elementi del documento come da esempio:

<div class="sg-8">
  ...
</div>

dove 8 corrisponde al numero di celle (28px ciascuna) da utilizzare come unico blocco di contenuto.

Oltre al file CSS, il pacchetto di download viene inoltre fornito di template per Photoshop, Illustrator , e InDesign e un file PDF per la stampa.

Per il download del framework e per vedere altri esempi di utilizzo visitate la pagina del progetto The Square Grid.

Quando si passa su un link, l’elemento si anima e si inclina verso sinistra o destra. Gli effetti sono stati creati solo con i CSS.

Vengono utilizzate le funzionalità di transizione specifiche per ogni browser tramite hack CSS (dato che ciascuno ha il proprio prefisso). La durata della transizione è impostata su 250 millisecondi e la scala/rotazione è impostata ad un valore predefinito.
Sempre tramite CSS, allo stato hover dei link viene assegnato un colore di sfondo, gli angoli arrotondati per migliorare l’effetto e la scala/rotazione modificati per inclinare l’elemento.

Foglio di stile CSS

.cpojer-links a	{
  display: inline-block;
  padding: 4px;
  outline: 0;
  color: #3a599d;
  -webkit-transition-duration: 0.25s;
  -moz-transition-duration: 0.25s;
  -o-transition-duration: 0.25s;
  transition-duration: 0.25s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  -webkit-transform: scale(1) rotate(0);
  -moz-transform: scale(1) rotate(0);
  -o-transform: scale(1) rotate(0);
  transform: scale(1) rotate(0);
}
.cpojer-links a:hover {
  background: #3a599d;
  text-decoration: none;
  color: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-transform: scale(1.05) rotate(-1deg);
  -moz-transform: scale(1.05) rotate(-1deg);
  -o-transform: scale(1.05) rotate(-1deg);
  transform: scale(1.05) rotate(-1deg);
}
.cpojer-links a:nth-child(2n):hover {
  -webkit-transform: scale(1.05) rotate(1deg);
  -moz-transform: scale(1.05) rotate(1deg);
  -o-transform: scale(1.05) rotate(1deg);
  transform: scale(1.05) rotate(1deg);
}

Fonte David Walsh Blog e demo.

Funziona su tutte le ultime versioni di Opera, Chrome, Safari e Firefox, anche se su Opera e Firefox le trasformazioni non sono proprio ottime come Webkit, motore di Safari e Google Chroem.

Pagine HTML

<div id="shadows"><!--START ID shadows-->
  <article>
    <h1>CSS3 Wrapping Drop Shadows</h1>
    <p>With <del>out any</del> minimal extra bullshit markup(You need the first child to be a container element like a header, hgroup or a div). Oh and they stretch G. Webkit only for now, although I'm sure Firefox could do this trick as well.</p>
  </article>
</div>

Foglio di stile CSS3

body {
  font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif;
  font-size: 13px;
  background: #3a6682;
}
div#shadows {
  position: relative;
  width: 50%;
  margin: 20em auto;
}
article {
  background: #ccc;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 1.5em; color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  text-align: center;
  display: block;
}
article:before, article:after {
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  position: absolute;
  bottom: 15px;
  z-index: -1;
  width: 50%;
  height: 20%;
  content: "";
  background: rgba(0, 0, 0, 0.7);
}
article:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  right: 10px;
  left: auto;
}
article:before {
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  right: auto;
  left: 10px;
}

Fonte Nimbupani Designs e demo.

Durante il Google I/O 2010, Google ha fatto grandi annunci. Uno di questi riguarda le Google Fonts API

Letteralmente, è possibile integrare tipi di caratteri diversi da quelli web-safe, universalmente diffusi su tutti i device, semplicemente collegando il nostro documento ad un carattere tra quelli ora disponibili, memorizzati sui server di Google (risparmiando banda per le prestazioni di caching).

Utilizzo

Per usufruire delle Google Font API, abbiamo bisogno di un link al nostro carattere desiderato, e farne riferimento nella proprietà font-family del css. Questo è tutto!

<html>
  <head>
    <title>Utilizzo Google Font API</title>
    <link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css" />
    <style>
      body { font-family: 'Lobster', arial, serif; font-size: 70px; }
    </style>
  </head>
  <body>
    Hello World
  </body>
</html>

Per la lista aggiornata dei fonts disponibili è possibile far riferimento alla Google Font Directory.

Per conoscere le operazioni eseguite dietro le quinte dalle Google Font API potete leggere l’articolo sul blog di Html.it

Twittando mi sono ritrovato a leggere un post che analizzava il problema di avere un layout costituito da colonne “liquid” adattabile alle dimensioni della finestra del browser.

In un layout fisso imposteremo una dimensione fissa per ogni colonna, occuperemo tutta la larghezza della pagina; ma ad un certo limite, l’ultima colonna non sarà in grado di adattarsi allo spazio rimanente, andando a capo lascierà un margine di spazio vuoto.

Invece, in un layout liquido le colonne riempiranno perfettamente l’intero spazio della pagina in qualsiasi caso, ma ci troveremo ad avere un numero predefinito di colonne su singola riga.

La soluzione trovata dall’autore è stata quella di unire insieme le caratteristiche dei due loyout tramite l’utilizzo di CSS e jQuery.

Abbiamo un codice html di base per l’esempio:

<ul class="column">
  <!--Voce elenco colonna-->
  <li>
    <div class="block">
      <!--Contenuto colonna-->
    </div>
  </li>
  <!--Inserire altre colonne-->
</ul>

Codice CSS del foglio di stile collegato all’esempio:

ul.column {
  width: 100%; /*layout liquido*/
  margin: 10px 0;
  padding: 0;
  list-style: none;
}
ul.column li {
  float: left;
  display: inline;
  width: 200px; /*larghezza predefinita per ogni colonna*/
  margin: 5px 0;
  padding: 0;
}
.block {
  height: 355px;
  margin-right: 10px; /*margine tra ogni colonna*/
  padding: 20px;
  background: #e3e1d5;
  font-size: 1em;
}
.block img {
  /*Dimensioni flessibili per l'immagine interna alla colonna*/
  display: block;
  width: 89%;  /*1% in meno per prevenire un bug in IE6*/
  margin: 0 auto;
  padding: 5%;
  background-color: #fff;
  -ms-interpolation-mode: bicubic; /*prevents image pixelation for IE 6/7 */
}

diamo dimensione 100% al layout per coprire l’intero spazio della pagina, mentre una dimensione fissa predefinita per le colonne in modo da risolvere il secondo dei due problemi descritti: in caso di colonne liquidi avremo un numero predefinito su singola riga.

Ecco lo script jQuery che risolve il primo dei problemi:

//Funzione che calcola la dimensione da applicare alle colonne
function smartColumns() {
  //Resetto dimensione colonne all'intera pagina 100%
  $('ul.column').css({ 'width' : "100%"});
  var colWrap = $('ul.column').width(); //larghezza riga
  //Numero di colonne di 200px che vanno bene nell'attuale larghezza della pagina
  var colNum = Math.floor(colWrap / 200);
  //Dividendo la larghezza della pagina per il numero di colonne che possono andare bene,
  //otteniamo come numero intero la larghezza perfetta da assegnare a ciascuna colonna
  var colFixed = Math.floor(colWrap / colNum);
  $('ul.column').css({ 'width' : colWrap}); //Risolve bug in qualche browser
  $("ul.column li").css({ 'width' : colFixed}); //Imposto la nuova larghezza alle colonne
}
smartColumns(); //Esegue la funzione quando si carica la pagina la prima volta
$(window).resize(function () {
  //Ogni volta che la finestra è ridimensionata si esegue la funzione
  smartColumns();
});

Come realizza il tutto è descritto nei commenti dello script.

Questo tutorial risolverà la maggior parte dei problemi CSS che si hanno in generale quando si vuole realizzare un effetto come da titolo: una lista a due colonne di cui la prima di larghezza fissa e la seconda che occupa tutta la parte rimanente nel browser.

Si crea prima la lista, di cui ogni elemento è costituito da due div che rappresenteranno le colonne.
Il primo div sarà la colonna fissa, che, secondo l’esempio qui riportato, conterrà un’immagine e la sua didascalia. Il secondo div rappresenterà la colonna liquida, permettendo al contenuto di essere flessibile – in larghezza – in base alla risoluzione del browser.

Ecco il codice html dell’esempio:

<ul class="column">
  <li>
    <div class="imgblock">
      <img src="http://upload.wikimedia.org/wikipedia/it/b/bc/Wiki.png" alt="" />
    </div>
    <div class="detail">
      <h2>Cosa è Wikipedia</h2>
      <p>Wikipedia è un'enciclopedia multilingue liberamente consultabile sul Web, fondata sulla certezza che ciascuno possiede delle conoscenze che può condividere con gli altri. L'ambizioso progetto, che prende il via il 15 gennaio 2001 in lingua inglese, nell'arco di soli quattro mesi ha visto nascere altre 13 edizioni, tra cui quella in italiano.</p>
    </div>
  </li>
</ul>

Diamo uno stile alla lista tramite codice CSS:

ul.column {
  float: left;
  width: 100%;
  margin: 10px 0;
  padding: 0;
  border-top: 1px solid #ddd;
  font-size: 1.2em;
  list-style: none;
}
ul.column li {
  float: left;
  width: 100%;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  background: #f0f0f0;
}

Il seguente è il codice CSS che rende l’effetto:

ul.column li .imgblock {
  float: left;
  width: 150px;
  padding: 0 10px;
  font-weight: bold;
  text-align: center;
}
ul.column li .imgblock img {
  margin-bottom: 5px;
  padding: 5px;
  border: 1px solid #ccc;
  background: #fff;
}
ul.column li .detail{
  padding-left: 170px;
}

specifichiamo una larghezza fissa per il primo div, quindi per la prima colonna, e niente alla seconda in modo che sia larga quando tutto la finestra del browser (width: 100%).
Dunque il testo si adatterà per tutto lo spazio di destra, dando, nello stesso momento, spazio alla prima colonna a sinistra.

Contraddizioni dell’elemento

Soluzione

La prima cosa da fare è ripristinare i vostri stili. Disporre all’inizio del vostro css una soluzione di reset che rimuove il padding, margin e border e altre incongruenze dagli elementi.
Un buon esempio è il codice reset.css di Eric Meyer.

Image Rendering

Soluzione

Ridimensionare le immagini alla dimensione desiderata prima di utilizzarla nel sito.

Font Rendering

Soluzione

E’ necessario aggiungere questa regola al selettore:

p {
    text-shadow: #000 0 0 0;
}

Selezione font

Soluzione

Finché è un font sicuro va tutto bene nella visualizzazione. Tuttavia bisogna informarsi e verificare questi problemi di rappresentazione: ad esempio, un font che probabilmente non dovreste usare è Lucida Grande/Sans, il quale rende bruttissimo in Internet Explorer.

Dimensione testo

Soluzione

È necessario specificare la dimensione in percentuale nell’elemento body, e quindi la dimensione in em, attraverso il resto del foglio. line-height è necessario definirla in em, piuttosto che in pixel, per una rappresentazione costante.
Una cosa da ricordare è che la dimensione del font di default è 16px. Quindi, per ridimensionarlo a 12px usiamo:

body {
    font-size: 75%;
    line-height: 1.5em;
}
h1 {
     font-size: 3em; /* 36px */
}

Doppi margini su elementi flottanti

#content {
    float: right;
    width: 300px;
    margin-right: 10px;
}
#sidebar {
    float: right;
    width: 100px;
}

In IE qualsiasi margine che si trova sullo stesso lato del float sarà raddoppiato. Questo significa che l’elemento content a sinistra avrà tale margine esteso a 20px.

Soluzione

Per risolvere il problema, tutto quello che dovete fare è applicare la proprietà display:inline sui box del layout:

#content {
    float: right;
    width: 300px;
    margin-right: 10px;
    display: inline;
}
#sidebar {
    float: right;
    width: 100px;
    display: inline;
}

Compensazione elementi flottanti

Soluzione

La soluzione migliore è un semplice overflow:auto o overflow:hidden nel div contenitore:

#container {
    width: 966px;
    margin: 0 auto;
    overflow: auto;
}

È necessario tenere a mente che overflow: auto potrebbe causare alcuni problemi con Firefox: se si verificano problemi usare overlflow:hidden.

CSS selettori

Soluzione

Usare soltanto E + F, E > F, E ~ F. Se realmente dovete utilizzare questi selettori, dovreste esaminare IE8.js che dà a IE6 il migliore supporto dei selettori. Tuttavia questo rallenterà il vostro sito.

PNG Trasparenza

Soluzione

Esistono tre soluzioni per questo problema.
E’ possibile utilizzare AlphaImageLoader in un foglio di stile specifico per IE: aggiungi queste proprietà a qualsiasi immagine PNG che si desidera avere la trasparenza.

.trans {
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transparent.png', sizingMethod='image/scale/crop');
}

È necessario creare una PNG trasparente 1×1 e collegarla ad essa nell’attributo src.
Un modo migliore per farlo è IE5.5+ PNG Alpha Fix simile al AlphaImageLoader, tranne per il fatto che si collega ad uno script JavaScript che innesca la trasparenza.
Il terzo metodo è quello di utilizzare IE8.js citato sopra. E’ anche più sicuro rispetto al metodo precedente. Realizzerà la trasparenza a qualsiasi png che finisce -trans; ad es. myimage-trans.png.

HTML

<div id="navcontainer">
    <ul id="navlist">
        <li id="active"><a href="#" id="current">Item one</a></li>
        <li><a href="#">Item two</a></li>
        <li><a href="#">Item three</a></li>
        <li><a href="#">Item four</a></li>
        <li><a href="#">Item five</a></li>
    </ul>
</div>

CSS

#navcontainer {
    width: 12em;
    border-right: 1px solid #000;
    padding: 0 0 1em 0;
    margin-bottom: 1em;
    font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
    background-color: #90bade;
    color: #333;
}
#navcontainer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
}
#navcontainer li {
    border-bottom: 1px solid #90bade;
    margin: 0;
}
#navcontainer li a {
    display: block;
    padding: 5px 5px 5px 0.5em;
    border-left: 10px solid #1958b7;
    border-right: 10px solid #508fc4;
    background-color: #2175bc;
    color: #fff;
    text-decoration: none;
    width: 100%;
}
html>body #navcontainer li a { width: auto; }
#navcontainer li a:hover {
    border-left: 10px solid #1c64d1;
    border-right: 10px solid #5ba3e0;
    background-color: #2586d7;
    color: #fff;
}

;

Lista orizzontale

HTML

<div id="navcontainer">
    <ul id="navlist">
        <li id="active"><a href="#" id="current">Item one</a></li>
        <li><a href="#">Item two</a></li>
        <li><a href="#">Item three</a></li>
        <li><a href="#">Item four</a></li>
        <li><a href="#">Item five</a></li>
    </ul>
</div>

CSS

#navcontainer {
    margin: 0;
    padding: 0;
    height: 22px;
    font: 11px Verdana, sans-serif;
    width: 100%;
    border-bottom: 1px solid #bbb;
    list-style-type: none;
    background: #fff;
}
#navlist li {
    float: left;
    margin: 0;
    padding: 0;
    width: auto;
    display: block;
}
#navlist li a, #navlist li a:link {
    background: #fff;
    color: #555;
    text-decoration: none;
    padding: 3px 5px 3px 5px;
    display: block;
}
#navlist li a:hover {
    color: #039;
    border-bottom: 3px solid #bbb;
    cursor: pointer;
    background: #eee;
}
#navlist li a#current, #navlist li a#current:link {
    color: #000;
    cursor: default;
    font-weight: bold;
    border-bottom: 3px solid #999;
}
#navlist li a#current:hover {
    border-bottom: 3px solid #f90;
    background: #eee;
}

Una delle regole supportate dalla nuova versione del noto browser permette di specificare un font che l’utente può scaricare per visualizzare la pagina come era nelle intenzioni dello sviluppatore.

@font-face è attualmente supportata su Mac OS X e Windows, ma non in Linux.

Sintassi

@font-face {
  font-family: <a-remote-font-name>;
  src: <uri>;
}

Valori

– specificare un nome di font che verrà utilizzato come font face
– URL della locazione del font file

Esempio

<html>
<head>
  <title>Esempio Web Font</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Guilty grunge";
      src: url("http://www.mainickweb.com/esempi/css/GUILTY__.TTF");
    }

    body {
      font-family: "Guilty grunge", serif;
      font-size: 40px;
    }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>

Ecco la pagina di esempio con il codice sopra, visualizzabile solo con Firefox 3.1.