Web Design

Delle Media Query abbiamo già parlato più volte, si tratta di funzionalità CSS che permettono di disporre di regole di stile differenti a seconda del dispositivo utilizzato per la visualizzazione; tale caratteristica rende questi costrutti particolarmente utili per i progetti legati al Responsive Design. Le media Media Query consentono quindi di porre delle condizioni, implementabili per esempio tramite JavaScript, sulla base dell’ecosistema di riferimento.

Continua a leggere →

Per inserire icone raffigurative di accompagnamento ai link di un menù o a determinate intestazioni, potremmo non aver più bisogno di Photoshop o di pack preconfezionati pieni di GIF e PNG: una soluzione alternativa è fornita da questo set di istruzioni per sostituire le immagini con un font. Continua a leggere →

Nella realizzazione di siti Internet o di Web applications le cui interfacce siano basate sulla tecnica del Responsive Design, l’obiettivo è in pratica quello di ottenere un livello di visualizzazione ottimale in funzione dell’ambiente all’interno del quale vengono inserite le varie componenti di pagina; tale approccio potrebbe riguardare anche lo sfondo e il suo adattamento automatico al display del dispositivo utilizzato, un risultato ottenibile tramite l’utilizzo di alcune regole di stile CSS3.

Continua a leggere →

Ink è un framework CSS pensato per svolgere un compito molto particolare, esso infatti potrà essere utilizzato per la creazione di messaggi di posta elettronica formattati secondo i principi del Responsive Design, l’obiettivo è quindi quello di adattare il contenuto delle email alle aree di visualizzazione dei diversi dispositivi, ivi compresi quelli mobili come per esempio i tablet e gli smartphone; una novità nel campo delle librerie front-end oriented che, nella maggior parte dei casi, sono pensate per le Web applications e i siti Web.

Continua a leggere →

Oggi vi segnalo un nuovo strumento, disponibile on-line, grazie al qule è possibile creare CSS Sprite senza scrivere codice, direttamente tramite interfaccia grafica. Per CSS Sprite intendiamo una combinazione di diverse immagini che vengono “accorpate” in un unico file al fine di ottimizzare i tempi di caricamento del nostro sito web, minimizzando il numero delle richieste HTTP al server. Continua a leggere →

L’elemento figure di HTML5, così come figcaption che è un componente del markup spesso associato ad esso, sono forse tra i più complessi da gestire, questo perché essi vengono utilizzati non di rado in modo improprio; una lettura più attenta delle specifiche e la proposta di alcuni casi concreti potrebbero aiutarci ad evitare errori ricorrenti, uno di questi è per esempio l’adozione di figure per marcare qualsiasi immagine sia contenuta in una pagina Web.

Continua a leggere →

In questo breve tutorial sarà esposta una procedura per la creazione di tabelle a colori alternati grazie alle potenzialità di CSS3; il principio sulla base del quale funzionerà la nostra tabella sarà abbastanza semplice, infatti, per semplificare la lettura dei dati esposti non vi saranno mai due record di fila evidenziati attraverso il medesimo colore; naturalmente l’esempio proposto potrà risultare particolarmente utile nel caso in cui si vadano a prelevare dinamicamente le informazioni esposte da sorgenti come per esempio i database.

Continua a leggere →

In un’attività manifatturiera, l’operazione di mockup indica la riproduzione di un modello, in scala. Per analogia, il mockup di un sito web ne rappresenta lo scheletro essenziale, una sorta di modello del sito in miniatura. Continua a leggere →

L’inserimento di elementi Long Shadows nel design dei propri siti Internet o delle Web applications può rappresentare un’ottima soluzione per la creazione di interfacce accattivanti che mantengano nel contempo un sufficiente livello di semplicità; la procedura necessaria per ottenere tali effetti non è però priva di complessità, le regole di stile richieste obbligano infatti a lavorare a lungo sul CSS agendo in particolare su box shadow e i gradienti. Long Shadow Generator è uno strumento che rende più rapida questa fase.

Continua a leggere →

Segnalo un interessante articolo, pubblicato su Codrops, dedicato alle transizioni di pagina tramite CSS; si tratta di uno showcase veramente completo che raccoglie praticamente tutte le animazioni che potranno essere applicate per ottenere effetti di navigazione particolari, si parte con dei semplici movimenti basati sullo slide fino all’utilizzo di elementi prospettici come la profondità a cui associare dinamismo tramite trasformazioni tridimensionali. Continua a leggere →