BonBon Buttons sono dei carinissimi bottoni realizzati con CSS3/HTML5, quindi solamente supportati dalle versioni correndi ti Firefox, Safari e Chrome

Richiede: CSS3 / HTML5 Support
Demo: http://lab.simurai.com/css/buttons/
License: License Free

jQuery.spritely è un plugin jquery creato da  Artlogic per la creazione di personaggi dinamici o animazioni del background utilizzando semplicemente javascript e HTML, E’ un semplice e leggero plugin con una serie di metodi è possibile creare animazioni di oggetti come i corvi presenti nella pagina di presentazione o uno scroll dinamico del background.

Sito web e demo: http://www.spritely.net/

Questo tutorial spiega come creare un effetto retina utlizzando solamente html, css e jQuery; creare cioè una sorte di lente di ingrandimento. L’effetto è sorprendente!

Sito web:http://tutorialzine.com
Demo:  http://demo.tutorialzine.com

Feature List è un semplice plugin di jQuery che rende semplice e facile la creazione di un widget “Vetrina” da inserire nelle homepage dei vostri blog o in un normale sito web.
Il file .js è leggerissimo di appena 2k ed il codice può essere utilizzato per contenitori multipli e il funzionamento è simile a quello di uno slideshow.
Il plugin è facilmente personalizzabile con html e css e richiede due array di oggetti uno per i tab e l’altro per l’output.

Quando un utente clicca su un tab lo script  trova il corrispondente output attraverso l’indice e inizia a far partire il fading.

Sito web: http://jqueryglobe.com/article/feature-list
Demo: http://jqueryglobe.com/labs/feature_list/

Masonry è plugin jquery per layout. Pensato come il rovescio della medaglia di CSS float. Considerando che riorganizza gli elementi float prima orizzontalmente poi verticalmente, secondo una griglia. Il risultato minimizza gli spazi verticali tra elementi di diversa altezza.

L’utilizzo di Masonry è estremamente  semplice basta collegare al funzione masonry() all’elemento wrapper del layout. A seconda poi dei risultati che si vogliono ottenere è possibile utilizzare diverse opzioni che il plugin mette  a disposizione.

Sito web: http://desandro.com/resources/jquery-masonry
Demo: http://desandro.com/demo/masonry/basic.html
Download:  http://github.com/desandro/masonry

Per fare questo si può ricorrere all’elemento optgroup. Per dare un etichetta al gruppo viene utilizzato l’attributo label.

Di seguito un esempio:

<label for="cars">Choose a car brand:</label>
<select name="cars" id="cars">
<option value="none">None</option>
<optgroup label="Swedish">
<option value="saab">Saab</option>
<option value="volvo">Volvo</option>
</optgroup>
<optgroup label="French">
<option value="citroen">Citroën</option>
<option value="peugeot">Peugeot</option>
<option value="renault">Renault</option>
</optgroup>
</select>

Ecco come il browser visualizzerà il codice html
Choose a car brand:

Fornire un mezzo semplice e affidabile di feedback o di contatto da parte dei visitatori del sito è una parte fondamentale di un sito web, quindi possiamo dedicare qualche minuti in più per la sua realizzazione e cercare di renderla accattivante e funzionale.

In questo tutorial viene spiegato passo passo come realizzare un modulo di contatto AJAX, che sfrutta le tecniche moderne di sviluppo web.
Viene utilizzato PHP, CSS e jQuery con l’aiuto del plugin formValidator per la convalidare i dati inseriti e il plugin JQTransform, per aggiungere uno stile accattivante ai campi di input.

Verrà inoltre utilizzata la classe PHPMailer per l’invio delle email.

Sito web: http://tutorialzine.com/2009/09/fancy-contact-form/

Demo: http://demo.tutorialzine.com/2009/09/fancy-contact-form/demo.php

Itilizzando inFrame il lettore non dovrà cambiare pagina per visualizzare la demo, per fare questo basta inserire un link a cui associare una classe di inframe.

Sito web e Demo http://www.vileworks.com/inframe-keep-the-demos-inside-the-page-with-jquery

Questi links di solito si presentano in questa forma:

<a href="http://example.com/" accesskey="0"></a>

<a href="http://example.com/"><img src="image.gif" alt=""></a>

Nel primo caso il link è invisibile a chiunque ma può essere attivato attraverso l’utilizzo della shortkey ‘0′ oppure è possibile raggiungerlo con il Tab.

Nel secondo caso il link viene assegnato ad un’immagine visualizzabile nel browser, ma poichè l’immagine ha nullo l’attributo ‘alt’ se l’immagine non può essere visualizzata il link in sostanza non viene specificato.

Ecco la forma migliore per utilizzare i link

<a href="http://example.com/" accesskey="0">Link text</a>

<a href="http://example.com/"><img src="image.gif" alt="Link text"></a>