In questo tutorial voglio mostrarvi alcune effetti particolari che si possono applicare ad un semplice oggetto rettangolare giocando con le ombre. Ovviamente non mi riferisco all’effetto shadow applicabile su un layer, ma a vere e proprie ombre realizzate manualmente. Prima di tutto disegniamo su un layer un rettangolo tipo questo:
Era da tempo che volevo rivedere l’impaginazione della Home Page di questo Blog, visti anche i numerosi articoli accumolati in questi anni. Inoltre volevo provare alcuni framework CSS (960, Blueprint) e così ho colto l’occasione per dare una bella ripulita al tema, rivedere il codice PHP e dare una “rinfrescata” grafica al tutto.
È stata rilasciata proprio ora (grazie alla segnalazione dell’autore Michael J. I. Jackson) la release 3.0 beta di Shadowbox.js. Oltre alla nuova grafica del sito ecco i più importanti cambiamenti di questa release preliminare:
Forse non tutti conoscono le potenzialità della gestione del testo in Photoshop, in particolare la sua caratteristica di poter manipolare il testo in modi assai evoluti. Se volessimo ad esempio “piegare” un testo, saremmo tentati di utilizzare la funzione “crea testo alterato” 
, che apre una finestra con queste impostazioni:
Quando mi è stato chiesto di disegnare ed ideare il logo per Saidmade, come spesso accade per le proprie creature, ero abbastanza agitato. Tuttavia non era possibile affidarsi all’inventiva di altri, bisognava esprimere ciò che stava per nascere in modo autonomo e personale. Alla fine sono molto soddisfatto del risultato finale. Il simbolo che ne è uscito è esattamente ciò che cercavamo!
Normalmente non lo faccio, tuttavia visto che anche su undolog si tratta grafica & design, non posso esimermi da segnalare il restyling del blog di UPI on Paper. Inoltre, disegnando anch’io, quando vedo una “mano” bella è più forte di me! Con il nuovo layout, poi, le illustrazioni di UPI sono ancora più godibili.
Quando Shadowbox apre la sua finestra per mostrare un contenuto (immagine, iframe, Movie, ecc…), visualizza, nell’attesa, un gif animato che viene fornito nel pacchetto. Se la pagina che sta utilizzando Shadowbox si trova allo stesso livello della cartella images, tutto funziona bene. Per default, infatti, Shadowbox cerca la gif animata sotto images/loading.gif – o images/loading-light.gif se avete scelto gli stili light (shadowbox-light.css). Altrimenti, e spesso c’è il rischio anche di non accorgesene, se ci troviamo in una diversa alberatura, viene generato un bel codice 404 – di pagina non travata; nel nostro caso di file non trovato!
Per risolvere il problema basta inizializzare Shadowbox con un parametro opportuno che indica proprio il percorso assoluto della cartella images: su undolog.com, ad esempio, ho posizionato la gif animata del loading direttamente nella cartella images presente in root (come circa un miliardo di altri siti 
. Per rendere accessibile questa cartella a Shadowbox, a prescindere dal percorso, ho inserito semplicemenete:
1 2 | // init shadowbox with assetURL parameter Shadowbox.init( {assetURL: 'http://www.undolog.com/' } ); |
Planetozh ha realizzato uno splendito strumento dinamico in grado di elencare tutte le librerie Javascript simili a Lightbox.
Tramite un pannello (vedi immagine qui a sinistra) con una serie di "spunte" (checkbox), che indicano le varie caratteristiche delle librerie, è possibile eseguire un filtro ottenendo così la lista di una o più librerie che fanno al caso nostro. Speriamo che l’autore mantenga aggiornata questa fantastica pagina, utilissima nel districarsi tra le numerose e sempre più potenti librerie di questo tipo.
Flash CS3 non finisce di stupire. Ecco come creare il classico effetto nebbia dei televisori in un secondo con 10 righe di codice.
Ultimi Commenti
Giovambattista Fazioli: @ale: Come indicato @Kevin vedi sul repo di GitHub: https://github.com/gfazioli/Ch roma-Key
Giovambattista Fazioli: @Kevin: See https://github.com/gfazioli/Ch roma-Key
Kevin: Very nice example – would like to see the .fla too!
Ludovica: Ciao! Ti spiego il mio dubbio. Quando scrivo un post non inserisco immagini nell’articolo (se così...
Marco: ciao @Giovambattista Fazioli, grazie per tutte le delucidazioni di questa ottima guida. Avrei un quesito da...