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 »

Nel momento in cui dobbiamo sviluppare un’area privata per la gestione di un sito, dobbiamo spesso confrontarci con la richiesta del cliente di poter gestire non solo i contenuti ma anche l’aspetto grafico. In questo caso una delle prime possibilità che dovremo implementare sarà quella di rendere selezionabili i colori dei link o di altri elementi del sito. Per facilitare il compito dell’utente, più che una semplice casella dove digitare il codice del colore in esadecimale, può rivelarsi più adatto un “color picker”, o “selettore di colore” .

Leggi tutto »

Le CSS Gallery sono sempre più numerose, così come numerosi sono i dubbi sulla loro reale utilità.
In questo articolo vogliamo semplicemente mostrarvi come crearne una in pochi minuti, dando per scontato che se avete deciso di realizzarne una lo avrete sicuramente fatto con un’idea di originalità rispetto alle altre gallery già esistenti.

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 »

YAML (acronimo per Yet Another Multicolumn Layout) è un framework XHTML/CSS per creare dei layout flessibili conformi agli standard W3C.
Recentemente è stata messa online la versione 1.0 beta 1 di YAML Builder, applicazione web basata su questo framework che ci consente di creare in pochi minuti dei layout e di ottenere il relativo codice, scegliendo il tipo di struttura della pagina, il posizionamento dei diversi elementi e le rispettive proprietà. Molto importante anche la compatibilità con i diversi browser: i layout creati con YAML Builder tengono conto, ad esempio, delle varie incompatibilità di IE 6 e 5.5.

Il framework YAML è rilasciato sotto licenza Creative Commons Attribution 2.0, ovvero è gratuito sia per uso personale che commerciale, a patto di riportare il link a YAML su ogni sito creato. Chi volesse rimuovere tale link deve acquistare una licenza, secondo le condizioni riportate in questa pagina.

Link: YAML Builder 1.0 Beta 1

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à.

Come ben sappiamo,  uno dei punti cardine su cui ci si deve concentrare nello sviluppo di un sito è quello della compatibilità fra browser. Tuttavia, anche per lo sviluppatore esperto può essere difficile tenere a mente i differenti comportamenti dei browser.

Web Devout ci viene in aiuto, proponendo un documento che riepiloga il supporto dei vari browser agli standard HTML, CSS, DOM, ECMA Script. I dati (supporto completo, parziale o del tutto assente) vengono visualizzati sotto forma di tabelle, per avere subito sott’occhio le differenze tra browser; è anche possibile specificare quali sono i browser dei quali si desidera verificare il supporto agli standard.
Al momento non sono ancora disponibili le informazioni per le recenti versioni di Safari e Konqueror: l’autore del documento afferma che i test per questi browser sono ancora in corso, e non sa dare un’indicazione precisa riguardo al termine dei lavori. C’è comunque la possibilità di contribuire al progetto, di suggerire correzioni o di segnalare altri browser con i quali eseguire i test.
Il documento è reperibile a questo indirizzo.

Fonte: CSSBlog

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 »