Quando si ha un menù di navigazione laterale con molte voci, può essere opportuno suddividerlo in diversi sottomenù. Per siti dal design più elegante è consigliabile optare per una delle tante soluzioni basate su Mootools, che permettono di realizzare dei gradevoli effetti di animazione con estrema semplicità. Se invece non si può o non si vuole ricorrere al Javascript, è comunque possibile realizzare dei sottomenù usando solo il CSS.

Vediamo insieme come fare.
Leggi tutto »

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.

Leggi tutto »

La parziale trasparenza dello sfondo della pagina è un effetto molto efficace per catturare l’attenzione del visitatore, specie se abbinato ad un’accurata scelta dello sfondo. In passato l’uso della trasparenza non ha avuto grande fortuna a causa dello scarso (e per giunta differente) supporto dei vari browser. A partire da Firefox 2.0 e Internet Explorer 7.0 la situazione è decisamente migliorata e quindi possiamo decidere di usare, ovviamente senza abusarne e tenendo conto della leggibilità del risultato finale, questa tecnica.

Entriamo ora nel dettaglio.
Leggi tutto »

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.

Leggi tutto »

Chi offre nel proprio sito una newsletter sa bene che spesso il semplice formato testuale non basta, e si rende quindi necessario creare dei template in HTML.
Ma non è tutto oro quel che luccica: se sviluppando per il web ci siamo ormai abituati a impaginare e a realizzare effetti grafici sfruttando le proprietà del CSS, per le e-mail la situazione è un po’ diversa. Il supporto dei client di posta e anche di molte webmail agli standard W3C è spesso lacunoso.

Vediamo dunque alcuni utili consigli per far sì che la nostra newsletter possa essere letta da tutti.

Leggi tutto »

Vi proponiamo una lista di 8 piccoli trucchi da usare se state muovendo i primi passi con i CSS, alcuni saranno sicuramente già noti, altri potranno risultarvi nuovi. In ogni caso, si tratta di suggerimenti che possono sempre rivelarsi utili in caso di dubbi.

1. Centrare verticalmente con la proprietà line-height

Croce e delizia di tutti i web designer, l’allineamento verticale con i CSS può essere risolto in maniera indolore nel caso in cui abbiamo a che fare con un DIV ad altezza fissa:

#nomediv p {height: 200px; line-height: 200px; }

Ricordate che il valore di line-height dev’essere pari al valore dell’altezza del DIV.

Leggi tutto »

Segnaliamo questo utilissimo tutorial apparso su Woork che ci mostra come realizzare un effetto di scorrimento orizzontale  al movimento del mouse. In passato effetti del genere erano realizzabili solamente in Flash, oggi la potenza del CSS e del framework Mootools ci consentono di ottenere risultati analoghi con poche righe di codice Javascript e CSS.

Per capire esattamente di cosa stiamo parlando, date un’occhiata all’esempio prodotto nel tutorial.

Gli utilizzi di una simile tecnica sono molteplici, dalla semplice presentazione orizzontale delle diverse sezioni del proprio sito alla fotogallery con scorrimento delle miniature al passaggio del mouse: l’unico limite, come sempre, è la vostra creatività.

Tra le tendenze di design in voga negli ultimi mesi, ne è emersa una abbastanza inconsueta: quella di creare dei bordi colorati (meglio se in colore non troppo acceso rispetto allo sfondo) intorno alla pagina, come una sorta di cornice.
Il sito che ha fatto scuola in proposito è stato Hicksdesign, che ha utilizzato questo stile nel suo recente restyling e che viene infatti citato in quasi tutti i tutorial relativi a questa tecnica.

A prima vista potrebbe sembrare di facile realizzazione: la prima idea che viene in mente è quella di assegnare all’elemento body la proprietà “border”.
All’atto pratico questa soluzione si rivela inefficiente perchè, in siti con un lungo scroll verticale il bordo inferiore non viene visualizzato lungo la parte bassa dello schermo del browser, ma alla fine della pagina. Nel blog di Hicksdesign invece la cornice rimane fissa nonostante si tratti di un blog, quindi di un sito ad evidente impostazione verticale.

Vediamo quindi come implementare questa tecnica in maniera corretta.

Leggi tutto »

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 »

Nel bene o nel male, i CSS sono ormai entrati a fare parte dell’esperienza quotidiana di un buon web designer. Oggi vogliamo suggerirvi alcuni trucchi per semplificare il lavoro e per produrre un foglio di stile facilmente leggibile e modificabile (caratteristica estremamente importante non solo nell’eventualità di doverlo modificare in futuro, ma soprattutto nel caso in cui si rilasci un template o comunque un lavoro sul quale dovranno mettere le mani altre persone).

Leggi tutto »