I pattern sono sempre più utilizzati come sfondo delle pagine web, grazie alla tecnica della ripetizione del background. BgPatterns è un tool in stile Web 2.0 che offre un'ampia collezione di pattern che possiamo scaricare ed utilizzare come sfondo delle nostre pagine. Tramite la pratica interfaccia, possiamo scegliere i colori di primo piano (delle forme) e del background, decidere la texture opzionale, il pattern (con tanto di scala, valore di opacity e posizione) e addirittura il grado di rotazione di quest'ultimo. Come feature addizionale, possiamo applicare i pattern da noi creati direttamente e in tempo reale alla pagina di BgPatterns per vedere il risultato in un'anteprima immediata. Una volta completata la nostra opera, possiamo salvarla nella nostra collezione MyPatterns e scaricarla.

Continua a leggere BgPatterns: pattern per i nostri sfondi

Categoria: Web Design

Le PNG semitrasparenti sono da sempre uno strumento potente per ottenere effetti grafici accattivanti e altrimenti impossibili. Ecco due tutorial molto ben fatti sul loro uso creativo. In Doing strange things to CSS Backgrounds su Sitepoint viene mostrato come agendo sulla background-position sia possibile ottenere differenti velocità  di scorrimento orizzontali degli sfondi (qui l'esempio). Nel recente How to recreate SilverbackÂ’s Parallax su Vitamin viene spiegato come ottenere un effetto tridimensionale come quello di Silverback grazie a tre sfondi PNG e poche regole CSS. Per notare l'effetto, anche in questo caso vi basta stringere o allargare la finestra del browser.

Continua a leggere Sperimentazioni con il background

Categoria: CSS

àˆ già  la terza volta che mi capita nel giro di qualche settimana. Scopro un tool... lo provo, curioso, mi piace un sacco! Poi vado a vedere chi c'è dietro al progetto: in genere mi piace inviare un'email di ringraziamento quando trovo uno strumento valido a disposizione. E cosa scopro? L'autore è italiano! Doppiamente fantastico. E perché non lo hai capito subito? Non sai forse leggere l'italiano? Eh no, proprio così fesso non lo sono ancora. àˆ che per potersi guadagnare un po' di popolarità  sempre più spesso utenti e blogger italiani scrivono in inglese. (more...)

Continua a leggere 4 strumenti per web designer (e non) made in Italy

Categoria: Web Design

Diverse segnalazioni sparse sul web design, raccolte nella serie bookmark. Cominciamo con tre liste: Forget Photoshop: 15 Online Graphics Generators presenta 15 generatori per bottoni, mini-bottoni, gradienti, logo. Best CSS tools of May è una raccolta di tutorial/risorse CSS: alcune risalgono a ben prima di maggio, ma merita una visita. Una risorsa italiana: Napolux ha raccolto ben 82 segnalazioni per Photoshop in 82 links: Photoshop tutorials, shapes & co.Passiamo a Wordpress con le selezioni di alcuni template: in 100 Favourite Wordpress Themes e 20 Wordpress Themes that don't disappoint vengono presentati 120 template in totale per questa piattaforma di blogging. Se non dovessero bastare e avete spazio, banda (e tempo!) ecco 2400 template Wordpress pronti da scaricare: sono circa 250 mega. (more...)

Continua a leggere Dieci bookmark sul webdesign

Categoria: Web Design

Negli ultimi tempi sono stati pubblicati diversi tutorial davvero notevoli sui CSS che vorrei presentare ai lettori. Cominciamo con due bei tutorial sugli sfondi, entambi pubblicati su Digital Web Magazine.Web Design 101: Backgrounds è una pratica mini-reference sull'uso degli sfondi, in cui vengono trattate tutte le proprietà . Se la prima parte potrebbe risultare nota e persino noiosa ai più, merita una lettura approfondita la parte conclusiva. Creative Use of PNG Transparency in Web Design è un approfondito articolo di Jeff Croff sull'uso delle immagini PNG: comincia dai vantaggi di questo formato, per poi attraversare molti esempi pratici e arrivare al fix per abilitare l'opacità  variabile anche sulle IE5.5 e IE6. (more...)

Continua a leggere Sfondi e form con i CSS

Categoria: CSS

Recentemente mi è capitato diverse volte di navigare senza immagini, in particolare con il Nintendo DS Browser, per velocizzare il caricamento delle pagine. Le immagini sono un aspetto fondamentale di un sito, ma alcuni web designer dimenticano alcuni principi o accorgimenti fondamentali. Ho così pensato di preparare dodici consigli pratici riguardanti le immagini da tenere presente nella codifica di HTML e CSS. Eccoli: Immagini spaziatrici (spacer gifs), decorative, prive di contenuto semantico o visuale effettivo, dovrebbero essere sempre specificate come sfondo CSS e mai con tag <img> L'attributo alt, necessario ai fini della validazione del codice, non è un supplemento solo per il validatore: è infatti il testo alternativo che verrà  visualizzato se l'immagine non è reperibile oppure l'utente ha le immagini disabilitate Dai punti 1) e 2) deriva che immagini con alt="" oppure alt="immagine" andrebbero riconsiderati: o le immagini vanno nel background, oppure ci va un alt un po' più esplicativo (more...)

Continua a leggere Immagini nel web: piccola guida pratica

Categoria: Web Design