App con transizione tra schede in solo CSS
http://cssbricks.com/design/weather-app-dribbble-2/
Continua a leggere »Categoria: CSS
Come evitare problemi di caricamento delle pagine per il @font-face
Il comportamento di default dei browser, se non riescono a caricare i webfont, è di nascondere il testo. C’è una tecnica per precaricare un font ed evitare questo problema, e la trovate in questo articolo:
Continua a leggere »Disattivare un link con il CSS
http://caniuse.com/#feat=pointer-eventsUtilizzando la dichiarazione css pointer-events: none si può disattivare un link, disattivando effettivamente tutti i mouse event dell’elemento. Qui http://caniuse.com/#feat=pointer-events trovate quali browser lo supportano. Esempio: Link a Google funzionante Link a Google disattivato
Continua a leggere »Font iconici – genericons
Trovate qui http://genericons.com/ Genericons, un font di icone vettoriali ottimo per inserire icone monocolore nei design.
Continua a leggere »CSS Flexbox – suddivisione di un elemento in parti proporzionali
Flexbox è un modulo di CSS3 che permette di gestire box flessibili, uno strumento per il layout rivoluzionario. Con Flexbox, infatti, sarà facilissimo gestire la posizione di un elemento all’interno del suo contenitore. Il supporto per questo modulo è ancora frammentario; mentre le ultime versioni …
Continua a leggere »Inerzia (iOS) sullo scroll di un div con overflow
Possiamo creare un div con una barra di scorrimento impostandogli delle dimensioni e usando la proprietà CSS overflow: .divscroll{ width:100%; height:50%; overflow-x:hidden; overflow-y:scroll; } Sui browser da PC è tutto ok, ma sui browser iOS in questo modo manca la proprietà nativa dello scrolling inerziale. …
Continua a leggere »Lista su due colonne
Per creare una lista HTML su due colonne esiste una regola CSS3, indicata qui http://www.w3schools.com/cssref/css3_pr_columns.asp ul { columns: 2; -webkit-columns: 2; -mox-columns: 2; } Purtroppo su IE non funziona, ma può essere usato un JavaScript che lo simula: http://jsfiddle.net/HP85j/19/ HTML: <div> <ul class=”columns” data-columns=”2″> <li>A</li> …
Continua a leggere »Width: 100% su iPad è più stretta del dovuto
E’ un problema su Safari. La viewport di default di Safari è 980px, se il layout è più largo gli elementi impostati a 100% si ridimensionano a 980px, non alla larghezza del layout originale, ad esempio tagliando il background. Per risolver,e conviene mettere su body …
Continua a leggere »