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.
Nella realizzazione di un sito può capitare di dover implementare uno scroll verticale dei contenuti. Sfruttando le proprietà del CSS è facile ottenere un DIV scrollabile, ma le barre di scorrimento visualizzate saranno quelle tipiche di Windows, che ovviamente mal si adattano al nostro design. Non sono utili neanche i vari tweak che permettono di modificare i colori delle barre di scorrimento, in quanto sono fuori standard e funzionano solo con Internet Explorer.
Ci vengono dunque in aiuto i numerosi Javascript che ci consentono di implementare lo scroll e di personalizzare il look dei pulsanti di scorrimento. Uno di questi è Easy Scroll 1.0, realizzato da CSS Globe; di semplice utilizzo, è completamente personalizzabile nel funzionamento e nel look, offre doppia velocità di scorrimento e un pulsante di “reset” per riportare il contenuto alla posizione iniziale.
Potete vedere una demo a questo indirizzo.
Nel momento in cui realizziamo un menù di navigazione composto da sole immagini e con effetti roll-over (immagini che cambiano al passaggio del mouse), il primo problema che salta all’occhio è quello relativo ad un certo ritardo nel visualizzare l’immagine alternativa, che si traduce nella visualizzazione di un riquadro grigio per 1-2 secondi.
Vediamo insieme come ovviare a questo piccolo inconveniente. In questo articolo esamineremo due soluzioni: la prima prevede l’inserimento di un semplice Javascript nella nostra pagina, mentre la seconda sfrutta la proprietà “background-position” del CSS.
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” .
Tra le tendenze di design nell’epoca del web 2.0 c’è senza dubbio quella di fare largo uso degli angoli arrotondati per i diversi elementi della pagina. Solitamente si provvede creando delle immagini ad hoc e posizionandole tramite CSS. Oggi esamineremo un’alternativa in Javascript: si chiama Curvy Corners, e dall’originario script ne è stata realizzata una versione da utilizzare come plugin di JQuery.
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 »
Quando si crea una pagina con delle proprie foto può essere interessante, per dare maggiore dinamicità al tutto, inserire degli effetti di transizione tra le immagini. In passato l’unico modo per inserire effetti del genere era ricorrere all’utilizzo del Flash. Oggi abbiamo a disposizione tantissime soluzioni Javascript che ci consentono di realizzare degli effetti gradevoli senza dover inserire pesanti animazioni nei nostri siti.
Una delle caratteristiche più amate del sistema operativo Apple è senz’altro la dockbar, ovvero quella barra situata nella parte bassa dello schermo che permette di lanciare le applicazioni e/o passare da un’applicazione all’altra.
Oggi, grazie ad un semplice javascript, è possibile inserire una dockbar in stile Mac sul proprio sito.
Leggi tutto »
Themes: Glossyblue & Bus full of hippies
Icons by NDesignStudio & FastIcon
Web Design: Pier Antonio Romano
