Lanciare una dichiarazione d’amore oggigiorno non è mai semplice, si rischia sempre d’essere retorici, banali, o di lasciare ovunque tracce di melassa. L’amore ai tempi dei lucchetti è diventato più complicato. Se invece appartenete alla (sempre più) folta schiera di geek, nerd e internettofili che dir si voglia, ecco la frase che fa per voi.

You are the CSS to my HTML, sei il CSS per il mio HTML, è un’ammissione di dipendenza, sei l’altra metà, sei tu a farmi apparire più bello, senza di te non sono che un inutile ammasso di dati… spilletta o magnete, potete fare il vostro acquisto direttamente dallo store online dello studio POP+SHORTY che l’ha disegnato.

Via | Picocool.com

Continua a leggere: Una spilla per dire Ti Amo alla maniera dei nerd.

Il footer, ovvero la sezione posta a piede di una pagina web , ha subito una “ribalta” con l’avvento del cosiddetto Web 2.0 che ne ha modificato il ruolo di semplice contenitore di informazioni di contorno (e in alcuni casi di liste interminabili di link a sezioni interne al sito). Si è iniziato quindi a porre a pié di pagina informazioni decisamente più importanti, aggregando link utili al visitatore e abbellendo il tutto senza sminuirlo rispetto al resto del layout.

Il blog di Vandelay Design ci mostra un’interessantissima lista di esempi di footer degni d’imitazione. Spesso si usano veri e propri disegni sul quale posizionare gli elementi che vanno ad unirsi al resto degli elementi della pagina nel modo più armonioso possibile. Da segnalare CSS Tricks, Dreamling, Adbuzeedo (figuriamoci) e PSDtuts che offrono varie soluzioni per un unico fine.

Continua a leggere: I footer più accattivanti del momento

La larga diffusione di monitor con risoluzioni alte, spesso widescreen, permette al web designer di sbizzarrirsi “in orizzontale”. Qualche post fa segnalavo alcuni esempi di background larghi, per capire come realizzarli ci viene incontro un semplicissimo howto di Web Designer Wall.

Il seguitissimo blog prende il proprio layout come esempio mostrandoci come qualche riga di CSS e un’illustrazione fatta come si deve riescono a “riempire” il monitor del visitatore in modo adeguato… anche se questi si ostina a navigare con il browser a tutto schermo sul 30”. Seguono altri esempi pratici da non perdere per sperimentare questa tecnica, sempre più praticata dai web designer.

Continua a leggere: Background "larghi" spiegati da Web Designer Wall

Rainfall Daffinson, web design studio dell’est Europa, è una firma celebre soprattutto per aver ideato nel corso della loro attività i portfolio forse più minimalisti del web. Lo stile non è facile da creare anche perché ci si trova in difficoltà se si cerca di aggiungere elementi “di contorno” al layout delle pagine.

Il loro portfolio non potrebbe essere più essenziale: si gioca molto sulla tipografia, con caratteri grandi e ampi spazi vuoti. L’unico colore che spezza il nero su bianco è il porpora del logo presente nei links, anche in stato hover. Anche le pagine interne come i vari case studies e la rassegna stampa, pur non essendo spoglie per ovvi motivi, sono semplicissime.

Per approfondire sul web design minimalista, può essere utile come fonte d’ispirazione e studio l’elenco fornito da CSS Juice. Ovviamente, non poteva mancare il portfolio di Rainfall Daffinson!

Continua a leggere: Web design minimalista: Rainfall Daffinson

Se cercate un modo rapido per aggiungere nuove funzionalità al vostro sito web, non rimarrete indifferenti di fronte a mooSlideBox3. Si tratta di un’estensione in Ajax basata sul celebre framework di Mootools, e consente alle vostre immagini di essere visualizzate in uno slider che di default appare dal fondo delle vostre pagine.

L’implementazione è quella solita: collegate la pagina al javascript e poi aggiungete dei tag ai contenuti che volete “far muovere”. A me piace molto, e ora che Lightbox è presente dappertutto può essere utile per proporre qualcosa di più inedito.

Via | CssNews

Continua a leggere: mooSlideBox3: nuova vita alle immagini

L’header, o testata per i meno anglofili, è una delle parti fondamentali di un sito web. Specie negli ultimi anni, dove si sono abbandonati i complessi incastri grafici delle tabelle, o dove vengono privilegiate piattaforme da personalizzare come Wordpress, la creatività sembra concentrarsi in modo particolare in quel “rettangolone” che si assume un compito comunicativo di importanza assoluta.

Noupe seleziona 70 header di grande potenza, dandoci un colpo d’occhio davvero esaustivo circa i possibili utilizzi di questo spazio. La scelta è buona, e tra i siti mostrati ce ne sono parecchi dei quali abbiamo già parlato in passato (mmh..forse ci ispiriamo reciprocamente) , vedi Radiant, Velasco, Cascadia, Casio Exilim, Meomi, ma ne aggiunge tantissimi altri di nuovi.

Continua a leggere: Header per tutti i gusti

Trovare un modo accattivante per rappresentare i nostri grafici non è facile. Tempo fa avevamo parlato di Amcharts, ottimo servizio di grafici flash based, ma se preferite avere il controllo totale della situazione, e personalizzare a piacimento ogni singolo dettaglio potreste pensare a realizzare il tutto tramite css.

Quest’articolo spiega appunto come procedere con la realizzazione, senza usare alcun elemento flash o javascript, a beneficio dell’accessibilità dei dati. Si basa tutto sull’espressione in percentuale di alcuni valori, e sul posizionamento assoluto degli indicatori. Il tipo di rappresentazione è ovviamente limitato al grafico a barre, ma non escludiamo per il futuro css hacks mirabolanti in grado di ovviare a questo limite.

Via Design2day

Continua a leggere: I nostri grafici in puro css

La diffusione dei feed rss crea sempre nuove possibilità di fruizione dei contenuti, in un gioco di rimandi che potrebbe essere infinito. Ho scoperto stamattina SearchCss, ovvero un motore di ricerca per fogli di stile: si inseriscono le parole chiave e parte la ricerca tra le news delle css galleries considerate come fonti utili.

L’idea non è malvagia, ma la realizzazione non è esente da pecche: innanzitutto i Google Ads sono collocati in maniera un pò ingannevole, secondariamente i risultati pescano un pò troppo a piene mani da NotCot.org (provate a usare la keyword “Rome” per esempio). Comunque l’esperimento è da segnalare, dato che in questo periodo vanno di gran moda gli aggregatori di contenuti, ma rimaniamo in attesa di implementazioni sempre più raffinate e attendibili.

Via Css Design Yorkshire

Continua a leggere: SearchCss: il motore di ricerca per fogli di stile

Il titolo di questo post vuol essere un omaggio ad Antonio Albanese, ma veniamo al dunque: ormai il design di siti web si sta pesantemente orientando verso piattaforme, cms, applicazioni “chiavi in mano”, che consentono a chiunque di customizzare il proprio sito in propri minuti.

Anche le “noiose” form sono ora rapidamente personalizzabili grazie a Wufoo, che consente di scegliere l’appeal della nostra form tra una vasta galleria di esempi. Moduli di contatto, inviti, registrazioni, compilazione di ordini, queste sono solo alcune delle scelte disponibili, delle quali ottenere con pochi click sia il codice html che lo stile css più confacente ai nostri gusti.

Continua a leggere: Wufoo: più form personalizzate per tutti

Siamo tutti d’accordo che nel web design del 2007 l’utilizzo delle tabelle per l’impaginazione sia da abbandonare. Ma le care vecchie tables qualche volta ci servono ancora, specie nella rappresentazione di calendari o simili. E’ vero che con un pò di impegno tutto si può rendere con i css, ma in alcuni casi il gioco non vale la candela.

Ho scoperto oggi Tablecloth: un modo di rendere davvero cool le nostre tabelle usando css+javascript, realizzato dai tipi di CssGlobe. Basta collegare la nostra pagina al js e al css e avremo tabelle che sfruttano l’hover del mouse, evidenziando di volta in volta le celle che selezioniamo, effetto questo molto gradito ad esempio durante presentazioni aziendali dove dobbiamo mostrare dei dati al pubblico.

Ho testato la piena compatibilità con Firefox ed Explorer, e vi assicuro che la facilità di implementazione vale sicuramente una prova.

Continua a leggere: Tablecloth: diamo vita alle nostre tabelle