Questo piccolo script basato su Mootools vi permette di dotare la vostra applicazione web di un menù contestuale personalizzato. E’ leggero, cross-browser e completamente personalizzabile nella grafica tramite CSS.
A questo indirizzo potete effettuare il download, leggere le istruzioni di installazione e vedere alcuni esempi di utilizzo.

Questo script dal nome simpatico ci permette di creare, al posto delle tristi message box di sistema, delle eleganti notifiche per le nostre applicazioni web. Lo script è basato su mootools, e ci permette di scegliere tra due diversi effetti: Smoke, una sorta di effetto dissolvenza, e Bezel, che unisce dissolvenza e scorrimento.

Per le istruzioni e il download potete visitare questa pagina.

Nel momento in cui dobbiamo sviluppare un’area privata per la gestione di un sito, dobbiamo spesso confrontarci con la richiesta del cliente di poter gestire non solo i contenuti ma anche l’aspetto grafico. In questo caso una delle prime possibilità che dovremo implementare sarà quella di rendere selezionabili i colori dei link o di altri elementi del sito. Per facilitare il compito dell’utente, più che una semplice casella dove digitare il codice del colore in esadecimale, può rivelarsi più adatto un “color picker”, o “selettore di colore” .

Leggi tutto »

Segnaliamo questo utilissimo tutorial apparso su Woork che ci mostra come realizzare un effetto di scorrimento orizzontale  al movimento del mouse. In passato effetti del genere erano realizzabili solamente in Flash, oggi la potenza del CSS e del framework Mootools ci consentono di ottenere risultati analoghi con poche righe di codice Javascript e CSS.

Per capire esattamente di cosa stiamo parlando, date un’occhiata all’esempio prodotto nel tutorial.

Gli utilizzi di una simile tecnica sono molteplici, dalla semplice presentazione orizzontale delle diverse sezioni del proprio sito alla fotogallery con scorrimento delle miniature al passaggio del mouse: l’unico limite, come sempre, è la vostra creatività.

Chi non conosce il famosissimo Lightbox, lo script leggerissimo, elegante e cross-browser che permette di visualizzare un’immagine in un box che si sovrappone alla pagina?

Questo che vi proponiamo oggi, seppure tecnicamente abbastanza diverso, produce un effetto grafico abbastanza simile.
Ha però una peculiarità importantissima: permette di visualizzare non solo immagini in qualunque formato, ma anche video in vari formati, testo (con tanto di tag HTML) e addirittura siti esterni.

Lo script è scaricabile a questo indirizzo, dove trovate anche la relativa documentazione e una demo. E’ compatibile con i principali browser e richiede il framework Mootools per poter funzionare.

Una tendenza molto diffusa negli ultimi tempi è quella di inserire nelle proprie pagine delle aree a scomparsa, che possono essere espanse/ridotte per visualizzare ulteriori informazioni. Questa pratica, oltre ad aggiungere (se ben realizzata) un elemento di originalità al proprio design, presenta dei vantaggi anche dal punto di vista comunicativo: permette infatti di nascondere informazioni superflue, favorendo la concentrazione del visitatore su quello che è il messaggio principale contenuto nella pagina.

L’immagine all’inizio del post rappresenta un esempio di utilizzo di questa tecnica. Toggle, web agency londinese, ha infatti utilizzato questa tecnica nel suo nuovo sito per nascondere i servizi destinati ai clienti.

Vediamo ora come realizzare un effetto simile sfruttando Mootools e una semplice funzione javascript.
Leggi tutto »