In fase di definizione di un design per il Web, la scelta dello sfondo non è una questione secondaria. Optare per la giusta texture consente di aggiungere un livello di profondità maggiore al proprio lavoro, sia esso un progetto di Webdesign, un'opera di fotoritocco, un'animazione o un contenuto virale da lanciare sui social network. Ma dove trovare risorse gratuite, e liberamente fruibili con licenze prive di limitazioni, senza dover perdere ore in un'elaborazione da zero? (more...)

Continua a leggere Texture e sfondi webdesign, risorse gratuite

Categoria: Grafica

Tags: ,
di napolux

Backstretch è un semplicissimo plugin jQuery che vi permetterà  di aggiungere alle vostre pagine web un background a resize dinamico: l'immagine di sfondo scelta verrà  ridimensionata in base alle dimensioni della finestra del browser, il tutto in una singola riga di codice: $.backstretch("http://tuosito.it/immagine.jpg"); Con l'avvento di monitor ad alta risoluzione la possibilità  di "riempire" tutto lo schermo con una singola immagine (di solito una fotografia) indipendentemente dalla dimensione della finestra è assolutamente irrinunciabile per tutti quei siti web che puntano sempre e comunque sull'alto impatto grafico, BackStretch risolve elegantemente e semplicemente questo problema.

Continua a leggere Sfondi stretch con jQuery

Categoria: Grafica

Tags: , ,

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

Background Image Maker: io lo trovo utilissimo per creare in 2 secondi immagini di sfondo con gradiente come quella che vedete qui sotto. Ma ci sono anche altre opzioni, come le righine orizzontali e diagonali che vanno tanto di moda. Provatelo.

Continua a leggere Un wizard per creare immagini di sfondo

Categoria: Software e Servizi

La scorsa settimana ho presentato su web-graphics un metodo semplice ed efficace per rimpiazzare graficamente più titoli in una pagina con un'immagine unica: Single Image Multi Replacement. Presento qui l'articolo in italiano.Più che una tecnica, quella che presento è un possibile approccio di sviluppo, che personalmente trovo sia in grado di snellire molto il processo di image replacement.Ecco qui l'esempio che ho preparato, in cui i titoli sono rimpiazzati graficamente, ed ecco l'unica immagine utilizzata.Il risultato è facilmente ottenibile in tre passi. (more...)

Continua a leggere Image Replacement Multiplo

Categoria: CSS