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.

Se state cercando uno script lightbox che è in grado di gestire gli iFrame, contenuti provenienti dal server tramite chiamate Ajax, contenuti HTML in linea, immagini, video e altro ancora, NyroModal è un ottimo plugin jQuery che permette tutto ciò.

Negli ultimi giorni mi sono trovato nella posizione di aver bisogno di un semplice, funzionale, plugin lightbox per jQuery facile da usare, una valida alternativa a Facebox. Dopo qualche ricerca, ho trovato diversi plugin sviluppati per questo scopo, e tutti hanno i loro pro e contro. Molti dei plugin supportano solo immagini, non utili alla mia richiesta di inserire contenuti in linea, video Flash e contenuto proveniente da chiamate Ajax.

Finalmente ho trovato e provato NyroModal e sono rimasto molto impressionato. Semplice da utilizzare, fondamentalmente tutto quello che dovremo fare è includere i file CSS e JavaScript appropriati, quindi applicare una classe di nyroModal agli elementi che si desidera aprire nel lightbox.

NyroModal è altamente personalizzabile, è possibile cambiare il suo aspetto grafico utilizzando i CSS, modificare le animazioni utilizzando le funzioni jQuery e personalizzare la sua funzionalità attraverso varie funzioni e proprietà.

Per impostazione predefinita, qualsiasi finestra modale (con eccezione dei file SWF) si ridimensiona automaticamente in base alla dimensione corrente della finestra del browser. Se l’utente ridimensiona il suo browser, anche la finestra modale si ridimensiona fino alla dimensione massima del contenuto.

NyroModal permette di impostare una galleria di contenuti con estrema facilità, semplicemente assegnando un identico valore all’attributo rel da attribuire a ciascuna voce della galleria: è anche possibile implementare gallerie multiple sulla stessa pagina utilizzando diversi attributi rel a cui applicare diverse impostazioni del plugin.

Un’altra funzionalità supportata, quella di effettuare l’upload di file tramite Ajax e gestire le informazioni del file ricevute, semplicemente associando la classe nyroModal al tag form del modulo.

Caratteristiche

• Chiamate Ajax
• Chiamata Ajax con targeting del contenuto
• Immagine singola
• Galleria immagini con freccie di navigazione
• Galleria con ogni tipo di contenuto
• Form
• Form in iFrame
• Form con targeting del contenuto
• Form con upload di file
• Dom Element
• IFrame
• Gestione degli errori
• Finestra modale ridimensionata in base alle dimensioni della finestra del browser
• Bottone ESC da tastiera per chiudere il lightbox
• Animazioni personalizzabili
• Aspetto personalizzabile
• Titolo alla finestra modale
• Standard W3C HTML valido (transitional)

NyroModal è disponibile per il download sotto licenza MIT. Potete trovare ulteriori informazioni, demo e download sul sito web del progetto NyroModal.

Cloud Zoom è un plugin jQuery, di peso leggero, che permette di creare un effetto zoom sulle immagini nelle vostre pagine web. E’ altamente personalizzabile con diverse caratteristiche come l’effetto tinta, zoom interno o un sottile effetto di focus, e soprattutto è cross-browser, funziona in tutti i browser web più importanti tra cui il caro vecchio IE6.

Cloud Zoom è molto semplice da implementare, il sito del progetto non manca di una ricca documentazione. Si può facilmente personalizzare l’aspetto con una gallery, lente o finestra di zoom usando i CSS.
Offre diverse opzioni di configurazione che consentono di personalizzare il suo comportamento, tra cui: altezza, larghezza e posizione della finestra di zoom, tinta da applicare sulla parte di immagine non zoommata, opacità, dimensione porzione della parte da zoommare, abilitare o disabilitare i titoli.

Caratteristiche

Riassumento, le caratteristiche che rendono questo plugin davvero ottimo sono:

• Facile integrazione con HTML
• Peso leggero (nella versione compressa solo 6Kb)
• Movimento nello zoom precisi e morbidi
• Modalità gallery
• Effetti tinta, zoom interno o soft-focus
• Completamente accessibile senza JavaScript, CSS o browser testuali

Cloud Zoom è disponibile per il download sotto licenza MIT, per ulteriori informazioni, demo e download fare riferimento al sito del progetto di Cloud Zoom.

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; potete visualizzare la demo e avere ulteriori informazioni visitando la pagina dell’autore.

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.

Con il termine “newsticker” si vuole intendere un box in cui si possono leggere le ultime notizie con effetto scorrimento tipico dei siti di informazione giornalistica

Utilizzo

Tutto ciò che serve per costruire il vostro box news ticker è una lista non ordinata che come attributo ha un id univoco:

<ul id="newsticker01">
  <li><span>16/12/2009</span><a href="http://www.mainickweb.com/crea-tooltip-su-link-e-immagini-in-modo-semplice-con-jquery/">Crea tooltip su link e immagini in modo semplice con jQuery</a></li>
  <li><span>15/12/2009</span><a href="http://www.mainickweb.com/jquery-captify-plugin-aggiungere-didascalie-alle-immagini/">jQuery Captify Plugin: Aggiungere didascalie alle immagini</a></li>
  <li><span>07/12/2009</span><a href="http://www.mainickweb.com/effetto-growl-con-jquery/">Effetto Growl con jQuery</a></li>
  <li><span>07/12/2009</span><a href="http://www.mainickweb.com/sfondo-a-tutto-schermo-con-jquery/">Sfondo a tutto schermo con jQuery</a></li>
  <li><span>09/10/2009</span><a href="http://www.mainickweb.com/crea-una-classifica-mp3-musicale-con-jquery/">Crea una classifica mp3 musicale con jQuery</a></li>
</ul>

Per realizzare l’effetto bisogna collegare alla vostra pagina web, come sempre, la libreria jQuery, il plugin liScroll e il seguente semplice codice javascript:

$(function(){
  $('ul#newsticker01').liScroll();
});

Opzioni

L’unica opzione personalizzabile di questo plugin jQuery è la velocità:

$(function(){
    $('ul#newsticker01').liScroll({travelocity: 0.15});
});

modificando il valore del parametro travelocity.

Sul pagina dedicata a liScroll plugin jQuery sono disponibili demo e script.

Sticky Tooltip è un plugin jQuery che permette di aggiungere un tooltip, azione di passaggio del mouse sopra l’elemento, contenente ulteriore codice HTML.

In generale il tooltip segue il cursore che si muove sull’area occupata dall’elemento, una caratteristica importante di questo plugin è che il suggerimento può essere mantenuto fisso, visibile, sullo schermo facendo click con il pulsante destro del mouse oppure premendo il tasto S sulla tastiera, qualora l’utente voglia interagire con il contenuto del tooltip.

Come detto, il contenuto di ogni suggerimento può essere definito come normale codice HTML, dunque molto facile da definire e personalizzare.

Utilizzo

Inserire nella sezione <head> del vostro documento il seguente codice:

<link rel="stylesheet" type="text/css" href="stickytooltip.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="stickytooltip.js"></script>

carichiamo la libreria jQuery dai server di Google e il plugin in esame, con il foglio di stile correlato.

Creiamo dei link di esempio su sui attivare i tooltip:

  <p><a href="http://www.google.it/" data-tooltip="sticky1">Google Italy</a></p>
  <p><a href="http://www.apple.com/it/" data-tooltip="sticky2">Apple Italy</a></p>
  <p><img src="http://www.mainickweb.com/logo.jpg" data-tooltip="sticky3" /></p>

i link e le immagini su cui vogliamo far visualizzare i tooltip devono avere come attributo data-tooltip e valore il nome o identificato del box dove andremo a definire il contenuto del tooltip.

Tutti i suggerimenti della pagina devono essere definiti all’interno di un div con attributo id univoco specificato nel codice sopra. A loro volta tutti questi suggerimenti devono essere definiti all’interno di un unico div con classe stickytooltip da non cambiare.
Il codice seguente chiarisce meglio quanto scritto:

<!--TOOLTIPS-->
<div id="mystickytooltip" class="stickytooltip">
  <div id="sticky1" class="atip" style="width:276px">
    <img src="http://www.google.it/intl/it_it/images/logo.gif" /><br />
    Questo è il logo di <a href="http://www.google.it/">Google Italy</a>.
  </div>

  <div id="sticky2" class="atip" style="width:300px">
    <img src="http://images.apple.com/it/home/images/imac_hero_headline_20091020.png" /><br />
    Logo il <a href="http://www.apple.com/it/imac/">nuovo iMac</a>.
  </div>

  <div id="sticky3" class="atip" style="width:100px">
    <img src="http://www.gravatar.com/avatar.php?gravatar_id=138303e2c59f32e8ff865e652a0f18c6&rating=X&size=100" />
  </div>
  <div class="stickystatus"></div>
</div>

come possiamo vedere dal codice è possibile impostare il tooltip a qualsiasi elemento della pagina.

Opzioni

Possiamo personalizzare a nostro piacimento il plugin Sticky Tooltip impostando alcune variabili nel codice dello script stickytooltip.js:

• tooltipoffsets: [20, -30] : posizione x,y del tooltip dal cursore del mouse.
• fadeinspeed: 200 : durata effetto dissolvenza (millisecondi).
• rightclickstick: true – rendere fisso il tooltip sulla pagina.
• stickybordercolors: ["black", "darkred"] – colore bordo del tooltip a seconda dello stato (sciolto, fisso).
• stickynotice1: ["Premere \"s\"", "o click destro", "per fissare"] – messaggio stato sciolto.
• tickynotice2: “Click fuori da questo box per nasconderlo” – messaggio stato fisso.

Sviluppato da Dynamic Drive, Sticky Tooltip plugin jQuery è disponibile con ulteriori informazioni, demo e script sulla pagina del progetto.

Uno dei primi software che ho installato dopo l’acquisto del MacBook Pro è stato Growl, un’applicazione che intercetta i messaggi generati dai vari software presenti nel sistema e li mostra sullo schermo in modo semplice e sicuramente di effetto.

Il plugin jQuery di cui parlo oggi si ispira all’applicazione descritta sopra: con Gritter è possibile realizzare lo stesso effetto, una soluzione molto carina per generare notifiche di messaggi all’interno dei propri siti web.

Demo

Una demo di funzionamento del plugin Gritter.

Utilizzo

Generare una semplice notifica con solo testo:

$.gritter.add({
  // (obbligatorio) titolo della notifica
  title: 'Titolo della notifica',
  // (obbligatorio) testo della notifica
  text: 'Messaggio di notifica'
});

oppure una notifica più complessa:

$.gritter.add({
  // (obbligatorio) titolo della notifica
  title: 'Titolo della notifica',
  // (obbligatorio) testo della notifica
  text: 'Messaggio di notifica',
  // immagine a sinistra
  image: 'url immagine',
  // tempo chiusura notifica in millisecondi
  time: 5000,
  // classe da applicare per lo stile personalizzato
  class_name: 'my-class',
  // funzione chiamata prima che si apre
  before_open: function(){}
  // funzione chiamata dopo che si è aperta
  after_open: function(e){}
  // funzione chiamata prima che si chiude
  before_close: function(e){}
  // funzione chiamata dopo che si è chiusa
  after_close: function(){}
});

Opzioni

All’interno dell’intestazione <head>..</head> dopo aver richiamato il plugin possiamo inizializzarlo con opzioni globali per tutte le notifiche della pagina web:

$.extend($.gritter.options, {
  // velocità visualizzazione notifica (stringa o millisecondi)
  fade_in_speed: 'medium',
  // velocità chiusura notifica (stringa o millisecondi)
  fade_out_speed: 3000,
  // tempo visualizzato sullo schermo
  time: 5000
});

Progetto

Sul sito dell’autore potete scaricare il plugin e vedere le altre opzioni.