Sintesi-Design.it

Framework css: quale usare?

I framework css forniscono un’infrastruttura di base da cui iniziare lo sviluppo di un sito web. La maggior parte dei framework contengono strumenti per facilitare la creazione di layout indipendenti dal dispositivo (Responsive Design), set di icone, formattazione di base del documento e alcuni elementi d’interfaccia pronti per essere utilizzati.

In questo articolo una lista dei framework css più popolari in questo momento tra cui scegliere.

Continua a leggere…

I gradienti css 3

I gradienti css 3 consentono di applicare a un elemento una sfumatura tra due o più colori senza utilizzare un’immagine di sfondo rendendo il caricamento della pagina più veloce e migliorando la qualità del gradiente in tutti i browser e a tutti gli ingrandimenti.

Continua a leggere…

Modificare la selezione con ::selection

Lo pseudo elemento ::selection consente di modificare l’aspetto del testo selezionato dall’utente con il mouse. Solo alcune proprietà css possono essere modificate con questo pseudo elemento:

  • color
  • background
  • background-color
  • text-shadow (solo Chrome, Safari e Firefox)

Le altre proprietà assegnate saranno ignorate dal browser.

Continua a leggere…

Testare siti web per dispositivi mobili

Testare siti web per dispositivi mobili è possibile grazie a una serie di strumenti gratuiti che consentono di verificare la compatibilità del progetto con i più diffusi dispositivi.

Continua a leggere…

Filter: i filtri css per le immagini

Filter è una proprietà css che consente di applicare effetti visuali a un’immagine. Con i filtri css si può modificare la luminosità, il colore, il contrasto o applicare alcuni effetti molto comuni come l’effetto seppia o la sfocatura.

I filtri css non sono ancora uno standard del W3C (il documento in cui sono definiti è ancora allo stato di bozza di lavoro) ma i browser basati su webkit (anche nelle versioni mobile) li supportano già da alcune versioni.

Continua a leggere…

Le estensioni di Chrome per lo sviluppo web

Le estensioni di chrome possono aiutare lo sviluppatore nell’analisi di un sito web esistente o durante lo sviluppo e il debug di un nuovo sito web.

Continua a leggere…

Gli strumenti di sviluppo del browser

Gli strumenti di sviluppo del browser consentono di velocizzare lo sviluppo, il test e il debug delle pagine web. Sono disponibili nei browser più diffusi anche se con funzionalità diverse.

Continua a leggere…

Le media queries

Le media queries consentono di adattare un documento al dispositivo in cui viene visualizzato.

Con le media queries si può modificare le dimensioni degli elementi, la loro visibilità e posizione in base, ad esempio, alle dimensioni della finestra in cui sono visualizzati.

Continua a leggere…

Usare gli icon fonts

Gli icon font sono dei file che contengono icone al posto dei normali caratteri che possono essere utilizzati come un qualsiasi altro web fonts.

I vantaggi degli icon font sono due: maggiore velocità di scaricamento e soprattutto la scalabilità delle icone senza perdita di qualità. I font sono memorizzati in formato vettoriale e la loro qualità non si modifica con il variare della grandezza dell’icona o della densità di pixel del dispositivo.

Con gli icon font non è più necessario creare icone con risoluzione maggiore per i dispositivi con densità di pixel elevata come i dispositivi retina.

Continua a leggere…

Usare una CDN

Le CDN diminuiscono i tempi di scaricamento di alcune risorse, in genere file javascript e fogli di stile css, e perciò migliorano le prestazioni di un sito web e di conseguenza l’esperienza dell’utente.

Tutti gli sviluppatori esperti e i grandi network (Google e Microsoft ad esempio) consigliano di utilizzare le reti CDN nei propri progetti.

Continua a leggere…

Pseudo-elementi ::before e ::after

Gli pseudo-elementi sono stati introdotti fin dai CSS2 ma solo con i moderni browser si è iniziato a usare ::before e ::after non solo per impostare gli apici nelle citazioni ma anche per creare semplici tooltip, visualizzare informazioni sui link o nelle didascalie delle immagini.

Continua a leggere…

I selettori di attributo

I selettori di attributo selezionano un elemento html in base alla presenza di un attributo o in base al valore in esso contenuto.

Attraverso questi selettori è possibile selezionare un elemento senza dover aggiungere un attributo id o class ma utilizzando un qualsiasi attributo già presente nell’elemento come title o href.

Continua a leggere…