Perchè fare via javascript (e/o Ajax) quello che si può fare via css? (Che forse è qualcosa di simile a “perchè prendere la macchina per andare in un posto in cui puoi arrivare comodamente a piedi?”)

Sicuramente non si può fare tutto, con i css. E dove non arrivano, per ottenere quello che vogliamo, servono altri linguaggi/soluzioni. Eppure i css arrivano molto lontano – molto più di quanto la maggioranza di noi sospettino.

Una galleria di immagini via css che mi ha molto impressionato, e di cui ho scritto, mesi fa, è Hoverbox. Adoro la sua eleganza e la sua semplicità.

Più di recente ho studiato i menu stile dropdown, via css. E fatto qualche esperimento (tipo Suckerloz e Newdrop).

Adesso, con lo stesso codice html base (una lista dai cui item si aprono sottoliste interne, child lists), e con la stessa tecnica css (le sottoliste sono nascoste di default, e si attivano al passaggio del mouse sull’elemento “padre”), faccio vedere come si può gestire una – semplice – galleria di immagini.

Ecco i due esempi che ho preparato, di Karina (che è la persona ritratta nelle foto, e il nome della tecnica). Una versione orizzontale e una versione verticale.

La tecnica è davvero abbastanza basilare, e funziona con IE6, IE7, Firefox (testato sulla 2.0, ma non dovrebbe aver problemi neppure la 1.x). Dovrebbe funzioniare anche con Opera & cia – browser sicuramente meno problematici che la famiglia IE (che cmq con ie7 ha fatto dei discreti passi avanti).

Il layout della pagina di esempio è tutto sommato molto semplice, ma è facile immaginare l’implementazione della tecnica in contesti + complessi (magari + avanti farò qualche demo).

(Un’altra aggiunta interessante potrebbe essere quella di un “loader”, che segnali che le immagini stanno caricando, in background.)

Sto trascurando javascript (e disimparando quel poco che so di Ajax per via di una ricaduta, mani stomaco cervello e tutto, nel meraviglioso mondo dei CSS.

E allora “esibisco” qualcosina. Come il Newdrop menu. Versione 0.13. Un menu css based su due livelli, entrambi orizzontali. Con qualche funzioncina carina.

Spunto di partenza, una mail su css-discuss (LA lista di discussione sui css, probabilmente) e un menu preso come esempio / sfida: quello utilizzato in questa pagina su Projectseven.com. Volevo copiarlo, poi ho visto del codice complesso complesso e un tot di javascript, e ho provato a rifarlo. Da zero, from scratch. Che è sempre divertente.

Risultato:

Il codice html ancora una volta prevede (come in Suckerloz) liste e sottoliste, e la “magia” è tutta nel css.

Il file .css dell’esempio è questo – dovrebbe essere sufficientemente pulito, ordinato e commentato (ma lo sistemerò meglio).

Commenti:

l’impatto grafico mi sembra discreto – mi sono limitato a clonarlo .

Come tipo di menu, la cosa + interessante mi sembra la possibilità di segnalare – in modi diversi – la sezione attiva sul primo livello e la sotto-pagina attiva sul secondo. Idem per il doppio effetto rollover.

Ci sarebbero dei commenti “pseudotecnici” da fare, ma li lascio per il post aggiornato (o per un prox post). In ogni caso il codice è lì da guardare – e con qualche commento.

Limiti (attuali, at least): il menu è gestito interamente via css (questo non è un limite ). Testato su IE7 e Firefox, funziona ok. Non va invece con IE6, per il supporto limitato del browser alla pseudoclasse :hover.

Sto sistemando la compatibilità con IE6 – da un lato un foglio di stile dedicato, dall’altro un’operazioncina sul DOM per aggiungere dinamicamente le classi necessarie. Aggiornerò il post. Asap.

Ah. Nel menu esempio i link sono fittizi (#). E la classe .active è inserita staticamente nell’html. Magari nella prossima versione cerco di fargliela gestire dinamicamente, via php

Sono lieto di annunciare Suckerloz, versione 0.11.

Suckerloz è un menu css based (con un tocco di javascript esclusivamente per gli utenti di Internet Explorer – che come noto fino alla versione 6 supporta la pseudoclasse :hover solo sugli elementi <a>). Un menu verticale a scorrimento interno - che da un lato riprende, come codice, il suckerfish dropdown menu e la sua variante a scorrimento orizzontale, e dall’altro cerca invece di emulare, (molto) parzialmente, una tecnica js molto usata oggi, l’espansione delle sotto-sezioni (vedi la demo della famosa e bellissima libreria accordion, del framework mootools).

Ho preparato alcuni esempi, che fanno vedere i diversi menu, in evoluzione e in azione.

• Primo venne suckerfish, che faceva via css quello che altri facevano via dhtml. I sotto menu scendevano dai vari item di un menu di navigazione orizzontale. Ecco quindi suckerfish nudo, stilizzato, e in un layout di pagina.
• Poi arrivò horizontal dropdowns, che riprendeva suckerfish ma usava come base un menu verticale (da cui i sottomenu uscivano in orizzontale). Ecco qui horizontal dropdowns nudo, stilizzato, e in azione in una pagina. Bello, no?
• E finalmente eccoci a Suckerloz, che sfrutta la tecnica altrui, la riduce all’osso e … suckerloz solitario, suckerloz in una pagina, e suckerloz in una seconda pagina (stavolta senza background diverso per la colonna, nè elementi relative in basso, e con footer fixed).

Any feedback?

Webdesign.

Post interessante. Link Boxes di “Ask the css Guy” (ovvero: chiedi all’uomo dei css. Il blog si chiama così. Il post è in inglese.)

(Grazie a un bookmark su del.icio.us di Marco Rosella

Ecco una specie di riassunto del post (idee e implementazioni dell’autore, a cui vanno tutti i meriti del caso).

Questione: ho un box, con dentro un titolo e un breve testo, e voglio che sia tutto cliccabile.
Soluzione pratica via css: rendo l’intero div un link, ovvero un <a>. Problema: dentro un <a> non posso infilare roba tipo <h3> e <p>. Soluzione: qualcosa del tipo <a> <span class=”h3″>titolo</span> e idem per il paragrafo. Poi nel foglio di stile setto i miei span come display: block. OK.

E’ un po’ un “workaround” – un aggirare l’ostacolo. Soluzione pulita ma semanticamente parlando non è il massimo.

Alternativa: usare il DOM.

Il mio box (i miei box) diventano, giustamente, dei div, a cui assegno una classe <div class=”linkbox”><h3>titolo</h3><p>testo</p></div>. Nel mio div del box aggiungo però anche un paragrafo in cui vado a metterre il mio link (volevo box link, ovvero cliccabili, no?). Un paragrafo a cui assegno una classe. Quindi avremo:

<div class=”linkbox”><h3>titolo</h3><p>testo</p><p class=”continua”><a href=”#”>leggi oltre</a></div>.

Cosa vogliamo fare a questo punto via DOM?

• cercare al caricamento della pagina i div con classe “linkbox”
• dentro questi div cercare il paragrafo con classe “continua”, il quale contiene un link
• prendere l’attributo di quel link (l’indirizzo) e legarlo all’evento onclick del div
• approfittarne per nascondere il paragrafo “continua”
• per evidenziare il fatto che il div (ovvero il box) è cliccabile, aggiungere una classe “hovering” ai div della classe “linkbox” – tramite cui aggiungere un effetto di rollover, via css.

The CSS Guy prende a questo punto in prestito alcune funzioni js della libreria ES, aggiunge qualcosina di suo e arriva al suo esempio concreto.

Il sorgente della pagina contiene tutto il codice usato, funzioni js e stili css.

Ho provato a fare qualcosa di simile. Ho preso uno dei 40 layout di Layout Gala, gli ho dato un’aggiustatina. E ho fatto la mia prova pratica. (A me piace

Un link al mio esempio.

In ogni caso, quella proposta è solo una delle tecniche possibili per raggiungere lo stesso risultato. Si vedano i commenti al post originale di Ask the CSS Guy per alcune alternative. Segnalo in particolare questa. Solo css. Clean.

Ancora sulle gallerie di immagini ed effetti (+ o – speciali). Dopo Lightbox, versioni 1 e 2, dopo emuli e cloni di Lightbox (tra cui l’ottimo e leggero Thickbox), dopo Hoverbox, (e Hoverbox menu) ecco qui… HoverLightBox.

HoverLightbox integra tre script: il Suckerfish dropdown menu, l’image preview via css di Hoverbox e la finestra in javascript di Lightbox. Risultato? HoverLightbox, di Jon Christopher.

Ho messo sul mio sitarello at Circolab una paginetta, questa pagina qui, dove faccio un veloce confronto tra Hoverbox e le due versioni esistenti di HoverLightbox (la prima, dell’anno scorso, e la versione Redux, di quest’anno). E propongo qualche esempio.

Là ci sono anche un paio di considerazioni, su peso e compatibilità cross-browser dello script. Documentazione più completa – in inglese – sul Monday by Noon, ovvero sul sito originale di HoverLightbox.

Ho scritto qualche settimana fa un post su Hoverbox, elegante ed efficace uso dei css ideato da Nathan di Sonspring.com per gestire una galleria di immagini (thumbs + full size) senza impiegare javascript.

Ieri mi sono imbattuto in una implementazione, meglio in un utilizzo creativo della tecnica che sta dietro a Hoverbox, da parte di Stuart Robertson, di Designmeme: eccoci qui a parlare di Hoverbox menu (l’esempio fatto da Stuart e’ in fondo alla pagina).

Invece di un ormai “comune” – sebbene pur sempre splendido, quando implementato bene – menu con rollover via css Stuart propone un menu in cui nel momento del passaggio del mouse sull’item del menu (stato a:hover) l’immagine di sfondo si ingrandisce (come in hoverbox il passaggio del mouse sulla miniatura offriva la visualizzazione del pic full size). Bello.

Da notare, tra le altre cose, che Stuart usa la tecnica CSS Sprite – una stessa immagine contiene quella base e quella che viene sovrapposta, evitando percezioni di ritardo sul rollover (ed aggirando anche il problema del flickering di IE6) senza bisogno di preload gestiti via js.

OK. Guarda(te) l’esempio di Stuart, dunque, e valutate.

Ma a sto giro ho voluto metterci su le mani anch’io. Ecco dunque il mio esempio.

L’effetto “specchio-riflesso 2.0″ l’ho ottenuto giochicchiando con Gimp, quindi non c’entra con il codice css.

Dove invece ho modificato, minimamente, le spaziature, per evitare sia le sovrapposizioni (che invece Stuart voleva) sia che l’immagine del rollover andasse a muovere le altre, per cui le ho assegnato un margine negativo – in div#navigation li a:hover span abbiamo un margin-right: -45px.

Altra noticina, ovvero un limite in termini di accessibilità: i link testuali sono nascosti – attraverso la regola div#navigation li a span em{display: none;}.

Un’implementazione altamente professionale della tecnica dovrebbe invece utilizzare l’image replacement andando solo a coprire i link testuali – in modo che possano essere fruiti in contesti di visualizzazioni senza immagini.

Il guru da cui pesco il suggerimento è, per l’ennesima volta, Alessandro Fulciniti.

Ultime due cose: il mio esempio è in fase “alfa”, assolutamente non preciso al pixel, nè con .png realmente ottimizzate. E per rendere il menu davvero “cool” manca anche una immagine per lo pseudo-stato active (la pagina corrente).

Posterò un’update…

Maggio, 1. Ergo, tra poco Karina & me ci muoviamo verso la stazione, direzione Milano – MAY DAY i say MAY DAY (Parade).

In ritardo, come spesso, scovo via feedreader un post di webgol in cui Antonio Sofi segnala una sua intervista su Apogeonline…

Intervistato? Marco Rosella. Ovvero? Un italiano premiato a metà Marzo alla SXSW di Austin per… il miglior CSS. Del mondo.

Per questo sito/progetto: the Horizontal Way. In cui Marco ha fatto un lavoro di ricerca, e sperimentazione, sul layout basato sullo scrolling (scorrimento) orizzontale. Una roba in genere abbastanza deprecata, e che invece in certi casi si rivela interessante, e forse anche abbastanza efficace. Certo originale. Insomma Marco ha fatto un meta sito, che cataloga e analizza un certo numero di siti significativamente a scrolling orizzontale. Un bel sito.

Interessante, l’intervista. Con un sacco di spunti e considerazioni sensate e intelligenti sul webdesign.

E mi ha fatto molto piacere leggere due altri nomi italiani citati da Marco: Alessandro Fulciniti e Andrea Proietti (css e js su html.it e framework mootools, rispettivamente). Due tra i nomi che anch’io, umile wannabe professional webdesigner, tengo come riferimento.

Il sondaggio, invece. Una decina di minuti per rispondere alle domande, in inglese, di quelli di A List Apart. Che provano a fare il punto sullo state of the art nel mondo dei webdesigner. E’ la loro survey del 2007. Una quarantina di domande.

Hoverbox: una specie di Lightbox, ma senza javascript. Ovvero, solo css, per ottenere gli effetti sulle immagini di una galleria.

Idea e realizzazione di Nathan, di sonspring.com (il sito religioso con il miglior design che conosca ).

Ecco il post che introduce e spiega hoverbox (del Marzo 2006, quindi niente di trascendentalmente nuovo). Ovviamente, c’e’ una galleria di immagini esempio, realizzata con Hoverbox. Ed e’ disponibile un pacchetto .zip con codice css e file annessi (l’html e le immagini).

Ovviamente si tratta di qualcosa di + semplice e meno versatile che i vari lightbox, smoothbox, thickbox, … Ma anche di molto + leggero.

E, come tutto, si può personalizzarlo per adattarlo alle proprie esigenze: il sito di sonspring, ad esempio, usa Hoverbox per customizzare la badge con le foto di Flickr, nella colonna destra della home.

Guillermo l’ha chiamato Fancy menu. Guillermo Rauch dice di essere Argentino, avere 16 anni e di sviluppare per il web da 6. L’età forse è un bluff. Il menu, una figata.

Css, e javascript – meglio: un menu che sfrutta alcuni effetti grafici forniti da Mootools e li combina con un uso intelligente e creativo del css. Risultato: vedi il post di Guillermo sul suo blog.

Un menu di navigazione (orizzontale, nell’esempio), un elemento di sfondo che si muove, e corre nel menu per andare a evidenziare l’elemento su cui puntiamo il mouse.

Il post di Guillermo spiega molto bene anche come implementare il menu. Esiste anche un pacchetto zip, con una release provvisoria, non perfetta ma comunque preziosa (il codice in verità credo sia lo stesso, ma forse mancano le immagini .gif e da un problema con le trasparenze in IE).

Il menu è piaciuto molto – non solo a me. In meno di un mese, 185 commenti al post sul blog, 1750 persone che hanno segnalato l’articolo su digg. E una utile traduzione italiana, grazie a sickbrain.org.

(Ieri ho fatto un primo mio fancy menu di test Aggiornerò il post con uno o due esempi miei, – prima o – poi).

Niftycorners. Adesso li uso anch’io. Vedi il mio esempio di utilizzo qui.

Cosa sono i nifty corners.

Si tratta di una tecnica – una delle moltissime a disposizione – per arrotondare gli angoli degli elementi (i div) che compongono le nostre simpatiche paginette html. Senza usare immagini.

L’autore dei nifty corners è Alessandro Fulciniti. Lui scrive per html.it ed è lì che si può leggere l’articolo in cui introduce e spiega i nifty corners.

Questo è l’articolo (e c’è anche una versione inglese).

Nell’articolo – non sto parlando di qualcosa di nuovissimo, è del Marzo 2006 – si prende in considerazione la terza versione dei nifty corners, ribattezzata nifty cube, che è anche quella che ho usato io. (Dall’articolo citato si può procedere a ritroso e andare a vedere versione uno e due).

Nifty cube, quindi. Tecnicamente: un file css e uno script javascript. Facile da implementare. Leggero e molto elegante.

Nell’articolo di Alessandro si fanno anche degli esempi, molto pratici e convincenti, e (quasi) pronti all’uso.