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 »

Premessa:
L’articolo che state per leggere è una libera traduzione del post “10 ways to get design approval” pubblicato da Paul Boag su 24ways. Boag suggerisce 10 punti dei quali tener conto nei rapporti col cliente; un breve elenco che può risultare molto utile per chi muove i primi passi nel mondo del web design.

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 »

Quando si crea una pagina con delle proprie foto può essere interessante, per dare maggiore dinamicità al tutto, inserire degli effetti di transizione tra le immagini. In passato l’unico modo per inserire effetti del genere era ricorrere all’utilizzo del Flash. Oggi abbiamo a disposizione tantissime soluzioni Javascript che ci consentono di realizzare degli effetti gradevoli senza dover inserire pesanti animazioni nei nostri siti.

Leggi tutto »

Una delle caratteristiche più amate del sistema operativo Apple è senz’altro la dockbar, ovvero quella barra situata nella parte bassa dello schermo che permette di lanciare le applicazioni e/o passare da un’applicazione all’altra.

Oggi, grazie ad un semplice javascript, è possibile inserire una dockbar in stile Mac sul proprio sito.
Leggi tutto »

In quest’articolo esploreremo brevemente una delle tante funzionalità poco conosciute di Wordpress. Si tratta dei conditional tags, che praticamente altro non sono che delle funzioni predefinite di wordpress che ci permettono di verificare rapidamente se sussiste una determinata condizione: siamo sulla home page? siamo sulla pagina di una certa categoria? siamo sulla pagina di ricerca? Basta richiamare la funzione appropriata, ed essa ci restituirà true in caso affermativo, false in caso negativo.
Vedremo più avanti quale sia l’utilità pratica di queste istruzioni.
Intanto esaminiamo nel dettaglio i vari conditional tags. Leggi tutto »

Spesso nel progettare un’applicazione web si ha la necessità di effettuare l’upload di una o più immagini. Tuttavia difficilmente le immagini possono essere inserite nelle loro dimensioni naturali, e bisogna procedere alla creazione delle cosiddette miniature, in inglese “thumbnails”.
Per upload occasionali possiamo ricorrere al nostro fido programma di grafica ed effettuare manualmente il ridimensionamento dell’immagine. Tuttavia, se l’upload delle immagini dev’essere sistematico (ad esempio nel caso di una photogallery, o di un sistema di gestione degli articoli dove giornalmente si ha la necessità di caricare foto), sarà bene inserire nel proprio script PHP una procedura per automatizzare la creazione delle miniature.

Leggi tutto »