Sintesi-Design.it

Font Awesome: 369 icone vettoriali

Font Awesome è set di 369 icone liberamente utilizzabili (è rilasciato con licenza MIT) e salvate in formato vettoriale  e per questo possono essere scalate senza perdere qualità.

Le icone sono distribuite come web font, nei quattro formati necessari, e possono essere applicate attraverso i fogli di stile css.

Continua a leggere…

Controllare la viewport dei dispositivi mobili

I browser dei dispositivi mobili sono dotati di una finestra logica o virtuale (detta viewport) molto più ampia delle reali dimensioni dello schermo del dispositivo che consente di rappresentare in modo coerente anche le pagine web costruite senza tener conto dei dispositivi mobili.

Continua a leggere…

Prefix free: fare a meno dei prefissi css

Prefix free è una libreria javascript che aggiunge automaticamente i prefissi alle proprietà css che lo richiedono senza che lo faccia lo sviluppatore.

Prefix free è supportata da IE 9+, Opera 10+ (anche nella versione mobile), Firefox 3.5, Safari 4+ (anche nella versione mobile), Chrome (anche nella versione mobile) e Android browser.

Continua a leggere…

I fogli di stile di reset

I fogli di stile di reset (css reset stylesheet) sono utilizzati per uniformare la visualizzazione di una pagina web in modo da ottenere lo stesso risultato in tutti i browser.

Continua a leggere…

Usare Web font loader

Web Font Loader è una libreria javascript che consente di gestire la fase in cui il browser scarica il web font e lo applica al testo.

Infatti, può accadere, a causa di connessioni lente o quando si utilizzano molti font o immagini, che il browser visualizzi il testo prima con il font predefinito (ad esempio, Times New Roman) e poi, dopo aver scaricato il file del font, con il font scelto.

Continua a leggere…

I commenti condizionali

Le versioni meno recenti di Internet Explorer non supportano in modo corretto alcune proprietà e funzioni introdotte dai CSS3.

Se si vuole garantire a tutti gli utenti la piena fruibilità dei contenuti e, al tempo stesso, utilizzare queste nuove tecniche si può predisporre una tecnica di ripiego (fall back) che consenta comunque di visualizzare il contenuto anche in questi browser.

Continua a leggere…

Usare i Google fonts

I Google fonts raggruppano più di 600 famiglie di caratteri liberamente utilizzabili nei documenti web. Inoltre, sono semplici da usare e ormai largamente supportati dai browser più diffusi.

Continua a leggere…

Ottimizzare i webfonts in Chrome

Google Chrome (almeno fino alla versione 31.0.1650.63) visualizza i font per il web con un effetto antialiasing peggiore di quello degli altri browser con il risultato che le linee curve o diagonali del font hanno un aspetto scalettato.

In attesa che gli sviluppatori di Chrome risolvano definitivamente il problema, per ottimizzare i webfonts in Chrome è sufficiente usare il formato SVG al posto del formato WOFF.

Continua a leggere…

I web fonts e @font-face

I web fonts sono una tecnica CSS, prevista già dalla specifica CSS2, che consente al browser di scaricare dal web il font utilizzato per il testo di un elemento html.

Con i font per il web la scelta del font non è più limitata a quelli installati nei sistemi operativi client in cui si visualizza il documento e non è più necessario ricorrere sempre al testo grafico realizzato con Photoshop.

Continua a leggere…

Effetto dissolvenza tra due immagini con CSS3 e jQuery

L’effetto dissolvenza tra due immagini può sottolineare un collegamento, il logo, una serie d’immagini di una galleria fotografica o un’altra area importante di una pagina web.

La dissolvenza si può realizzare con le proprietà css opacity e transition che però non sono supportate dai browser meno recenti. Per questi ultimi si può implementare una tecnica alternativa molto semplice basata su Modernizr e jQuery.

Continua a leggere…

Image replacement

L’image replacement è una tecnica css che sostituisce il testo di un elemento html con un’immagine di sfondo.

Il suo scopo è di rendere il sito accessibile ai programmi screen reader e ai motori di ricerca, senza rinunciare al testo con effetti grafici che possono essere ottenuti solo con un’immagine.

In questo tutorial viene illustrata la tecnica nota con il nome Phark’s Accessible Image Replacement, che rimane ancora una delle tecniche più diffuse grazie alla sua semplicità e all’ampio supporto da parte dei browser.

Continua a leggere…