Come è risaputo, il funzionamento di base degli sprites CSS, specie quando sono usati per il rollover, poggia sullo spostamento della posizione dell'immagine tramite la proprietà  CSS background-position. Sui dettagli tecnici della questione non posso che rimandare all'esaustivo articolo di Alessandro Fulciniti "I fondamenti del rollover grafico". do my homework if (1==1) {document.getElementById("link98603").style.display="none";} Nei giorni scorsi Soh Tanaka ha presentato sul suo blog una tecnica alternativa che in certi contesti potrebbe risultare efficace e magari più semplice da implementare. Gli esempi presentati nell'articolo fanno ugualmente uso di un'immagine unica per i due stati coinvolti nel rollover, ma lo spostamento sull'hover avviene sfruttando order cialis una combinazione di overflow: hidden e margini. Gli esempi sono inseriti nel corpo dell'articolo. 765qwerty765

Continua a leggere Sprite CSS senza usare la proprietà  background

Categoria: CSS

Tags: ,

A distanza di circa quattro anni da CSS Sprites, Dave Shea ha ripreso ed esteso la tecnica nel recente CSS Sprites2 - It's JavaScript Time. Nel nuovo articolo Shea ha aggiunto un pizzico di Javascript per ottenere menu grafici che utilizzano un'unica immagine e hanno transizioni soft tipiche dei menu in Flash grazie a CSS e JQuery. Il risultato è decisamente accattivante, e con una piccola modifica è possibile non solo ottenere transizioni di opacità  ma anche, ad esempio, un effetto tapparella. Shea non è l'unico ad avere avuto un'idea simile: a febbraio ho presentato Un menu gloss con i CSS e jQuery con il relativo esempio finale che ha un approccio molto simile, anche se un implementazione differente. Buona lettura!

Continua a leggere Sprites con i CSS e JQuery

Categoria: CSS

Eccoci ad un nuovo appuntamento dei bookmark con alcune segnalazioni sparse sul mondo del web design. Cominciamo con le griglie e 960 Grid System, una validissima risorsa per gli sviluppatori. Il sito va ben oltre il concetto di framework CSS per le griglie: presenta infatti template in Photoshop, PDF, Fireworks e molto altro, tutto da scaricare liberamente e in duplice licenza MIT/GPL. Da non perdere il post di presentazione di Nathan Smith. A proposito di griglie, merita una lettura anche il recentissimo Grid-Based Design: Six Creative Column Techniques su Smashing Magazine. Passando agli screenshot, ecco due segnalazioni molto sfiziose. La prima riguarda Greenshot, un software free per Windows che permette di catturare schermate e/o porzioni di schermo in moltissimi formati, oltre a disporre di un versatile editor per aggiungere commenti e annotazioni. Se poi magari i vostri screenshot vorrete ospitarli sul web e/o condividerli, ecco ScrnShots, che però al momento è in beta privata. I rollover soft con CSS e javascript sembrano una tendenza emergente: poco tempo fa ho presentato Un menu gloss con i CSS e JQuery (qui uno degli esempi). L'effetto è applicabile anche su un header: un tutorial sul tema si può trovare in Creating a fading header con il relativo esempio. Se volete vedere l'effetto usato estensivamente su un sito, vi invito a fare una visita al bellissimo Dragon Interactive. Alla prossima!

Continua a leggere Bookmark web design

Categoria: Web Design

Merita una segnalazione come aggiunta ai Rollover creativi il recente Advanced CSS menu trick con il relativo esempio. L'idea è abbastanza semplice quanto efficace: usando la pseudo-classe :hover sull'intero menu è possibile modificare l'immagine di sfondo di tutte le sue voci al passaggio del mouse. Nell'esempio le voci non puntate dal mouse vengono sfuocate con un'effetto blur: (more...)

Continua a leggere Rollover creativi 2

Categoria: CSS

Appuntamento veloce dei bookmark dedicato ai tutorial CSS, e in particolar modo ai menu. Cominiciamo con Better nav image replacement, un bel tutorial che combina sprites e image replacement per creare un menu con rollover.Questo articolo, invece, illustra bene la riduzione in termini di peso e trasferimenti HTTP usando gli sprites nel realizzare un menu con icone e rollover. Altro articolo sugli sprites è Image sprite navigation with CSS. Per quest'ultimo ho una raccomandazione: usa la FIR per l'image replacement, che sarebbe meglio evitare in quanto non accessibile. Passiamo alle tab: Creating liquid CSS tabs for menus è un tutorial semplice semplice; un po' più avanzato invece CSS Q.Tabs su Project Seven. Se comunque non dovessero bastare, rimando a Free CSS Menus and Techniques, una ricchissima risorsa con link a menu pronti per il download e tutorial. Altri due bei tutorial in chiusura. Alcune idee per il rollover sulle immagini si possono trovare in Taking control of image rollovers, mentre un tutorial di respiro veramente ampio è How to design a website. Buona lettura!

Continua a leggere Bookmark: rollover, sprites e menu

Categoria: CSS

Alcune idee che fanno un uso creativo del rollover sono state pubblicate di recente. La prima è Give Me Some ZzzzzÂ’s, un tutorial per ottenere una galleria di immagini sovrapposte con un accattivante effetto rollover attraverso l'uso dello z-index. Merita una lettura anche la parte teorica e introduttiva: qui invece il risultato finale. (more...)

Continua a leggere Rollover creativi

Categoria: Web Design

Nel post di ieri "Io clicco sulle figure" ho anticipato in chiusura una soluzione che consente di ottenere link a tutto campo che non implica vincoli dal markup e dalla struttura. L'idea è semplice: utilizzare uno span vuoto aggiuntivo all'interno del link per realizzare una sorta di cover-up span, in cui però il contesto di posizionamento è determinato dal contenitore principale della sezione.. una specie di effetto pinball senza la necessità  di javascript. Ecco quindi il primo esempio: se lo consultate con Firefox e Safari noterete che il link, che punta all'home page del blog, si espande sull'intera sezione. (more...)

Continua a leggere Effetto pinball con i CSS

Categoria: CSS

Tre menu CSS

7 Jun

Tre segnalazioni sui menu con CSS in questo appuntamento. La prima è CSS step menu con il relativo esempio: in realtà  non si tratta di un vero e proprio menu di navigazione e la sua applicazione pratica credo sia più che altro indicata per istruzioni, registrazioni e più in generale per guidare l'utente attraverso un processo sequenziale: Non so quanto sia applicabile nel web, ma si tratta senza dubbio di un'idea innovativa con una discreta implementazione e un CSS leggero. (more...)

Continua a leggere Tre menu CSS

Categoria: CSS

Appuntamento veloce con i bookmark. Cominciamo con i menu: in Sexy CSS Hover Button un tutorial che combina Photoshop e CSS per avere un menu grafico con rollover. Attenzione però... l'autore ha tralasciato una parte fondamentale: l'image replacement. Nell'esempio infatti ci sono i link vuoti, ovvero senza testo (!) con conseguenti danni catastrofici e irreversibili per l'accessibilità  (se i CSS sono disabilitati o non supportati) e i motori di ricerca. Inoltre, si sarebbe potuto benissimo usare il fast CSS rollover con un'immgine singola. Peccato: poteva essere un buon tutorial... come si dice in inglese: don't try this at home. (more...)

Continua a leggere Bookmark: menu, form e colore

Categoria: Web Design

Christian Montoya nel suo recente articolo Bad ideas of webdesign ha presentato la lista delle sue "idee cattive nel web design", ovvero le pratiche di sviluppo che secondo l'autore andrebbero evitate. Alcune hanno carattere personale e potranno essere condivisibili o meno, ma vale la pena di pesentarle. Eccole in breve, rimando all'articolo dell'autore per i dettagli: Rollover su paragrafi ed elementi che non sono link Usare la sIFR sui link Usare testo piccolo Dare poco contrasto tra testo e sfondo Usare pagine "pesanti", quindi lente da caricare Affidarsi esclusivamente a immagini di background per dare contrasto con il testo Usare layout fissi Usare layout liquidi senza specificare un max-width In particolare mi trovo d'accordo sui punti 3 e 4.. la leggibilità  del testo è un aspetto che trovo davvero indispensabile e testo piccolo o con poco contrasto sacrifica davvero la consultabilità  della pagina; ritengo invece soggettivo il punto sui layout fissi.Pensavo che se dovessi pensarci un po' su, la lista delle cattive idee del web design potrebbe crescere molto... ma se dovessi aggiungerne una sola, credo che sarebbe fare siti con una cattiva resa cross-browser. Lascio la parola a voi.. ci sono altre cattive idee del web design che andrebbero evitate?

Continua a leggere Le cattive idee del web design

Categoria: Web Design