Gli ultimi post di Edit
Gestione dello spazio con le media query CSS
Lunedì 12 Luglio 2010 - 08:17
di Cesare Lamanna
Le media query introdotte con i CSS3 possono rappresentare uno strumento straordinariamente efficace per indirizzare regole specifiche a dispositivi, tipi di schermo o contesti specifici. La loro applicazione può andare però ben al di là di situazioni relative all’alternativa layout per il desktop/layout per il mobile come in questo articolo.
Chris Coyer ci mostra un uso intelligente delle media query per creare una barra laterale che si auto-adatta nei contenuti e nell’aspetto grafico a seconda delle dimensioni che assume. Più facile osservare la demo, per capire, che provare a spiegare a parole, è sufficiente ridimensionare la finestra per vedere l’effetto in azione.
Categoria: CSS | Permalink | Commenti (3)
La qualità delle immagini ridimensionate con HTML
Venerdì 9 Luglio 2010 - 10:31
di Cesare Lamanna
Ridimensionare un’immagine facendo ricorso ad HTML e ad attributi come width ed height non è magari una pratica da consigliare, ma ci sono situazioni in cui può essere necessario. A quel punto si pone il problema della qualità della grafica così trattata, un problema che su IE (sul quale il degrado è particolarmente evidente nelle versioni 6/7) si può risolvere utilizzando nei CSS questa regola:
img { -ms-interpolation-mode: bicubic; }
Come si vede, non si fa che adottare, preceduto dal prefisso -ms-, uno dei tanti filtri proprietari di Microsoft.
Se problemi analoghi si dovessero riscontrare su Firefox, Mozilla prevede invece l’uso della proprietà image-rendering. Per aggiustare le cose su entrambi i browser la regola potrebbe essere così definita:
img {
image-rendering: optimizeQuality; /* Firefox 3.6+; default behavior is identical, no need to specify */
-ms-interpolation-mode: bicubic; /* Internet Explorer 7.0; default in IE8+ */
}
Il codice è ripreso da questa pagina del Mozilla Developer Center che spiega nei dettagli i termini della questione e tutte le possibili alternative.
Categoria: CSS, Grafica | Permalink | Commenti (9)
Sul modo in cui vorremmo realizzare le nostre pagine web
Mercoledì 7 Luglio 2010 - 08:15
di Cesare Lamanna
Esperimenti come quello delle icone di iOS realizzate solo con i CSS hanno suscitato negli ultimi giorni un interessante dibattito all’insegna della domanda “CSS is the new Photoshop” (?). L’intervento di John Nack di Adobe è quello che va al cuore del problema perché punta l’attenzione sugli strumenti che usiamo e useremo per dare vita alle nostre idee creative.
Louis Harboe ha creato le sue icone sfruttando semplici tool online per la generazione di codice CSS3, non avrebbe potuto ad oggi realizzarle usando programmi come Photoshop o Illustrator, semplicemente perché questi ultimi non sono in grado di coprire le esigenze di chi vuole creare elementi grafici di impatto abbinati ad un codice ricco e semantico. Una bella sfida per Adobe, non c’è che dire, complicata, perché, come dice Nack, nessuno è ancora riuscito a tirar fuori un software HTML WYSIWYG che possa anche solo avvicinarsi alla perfezione.
E creare l’equivalente di un Illustrator o di un InDesign per HTML, Javascript e CSS? Sarebbe questa la panacea per i web designer di tutto il mondo? Jeffrey Zeldman sostiene che la cosa è impossibile da realizzare. Ma a me viene da chiedere: a prescindere dalla fattibilità, se ne sente davvero la mancanza?
Categoria: Software e Servizi, Web Design | Permalink | Commenti (4)
CSS e Microformat
Mercoledì 30 Giugno 2010 - 08:20
di Gabriele Romanato
I Microformati rappresentano un eccellente tentativo di aggiungere semantica alle informazioni contenute in un documento web. Ciascuna informazione viene marcata in modo opportuno al fine di valorizzarne la semanticità e i contenuti. Tra i vari Microformati spiccano sicuramente le hCard, che sono un modo per strutturare le informazioni personali (indirizzo, città, telefono, email, URL ecc.) contenute nei siti web.
Continua a leggere CSS e Microformat
Categoria: CSS, Web Standards | Permalink | Commenti (7)
Cascata e estensioni CSS dei browser
Lunedì 28 Giugno 2010 - 10:04
di Gabriele Romanato
Non si finisce mai di imparare. Avevo realizzato un test in cui mostravo l’utilizzo congiunto delle proprietà CSS3 border-radius e box-shadow. Il codice era scritto in quest’ordine:
border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; /* ...*/
Continua a leggere Cascata e estensioni CSS dei browser
Categoria: CSS | Permalink | Commenti (4)
Cosa cambia davvero in CSS3?
Lunedì 28 Giugno 2010 - 08:00
di Kiko
È una delle domande che sento più spesso chiedere ai novelli designer. Preoccupati, senza giusta causa, dal dover studiare nuove carte, dovrebbero piuttosto adottare un diverso atteggiamento rispetto a certe novità. Capita pure all’interno dell’università. Cosa cambia con CSS3 rispetto alla precedente versione? Così la risposta che ho preparato, limitatamente a certe attività di disegno, e che recito a memoria è la seguente:
- più semplice gestione dei bordi degli elementi (proprietà
border-radius, con le varianti riferite a Mozilla e WebKit); - buon rendering delle ombre degli elementi (
box-shadow) e del testo (text-shadow); - rendering di un gradiente (nelle due modalità e cioè lineare o radiale);
- semplici trasformazioni di forme e elementi (rotazione, traslazione, riflessione, ridimensionamento);
Ho dimenticato qualcosa, almeno a livello base?
Categoria: CSS | Permalink | Commenti (4)
Tastiera virtuale con HTML, CSS e jQuery
Mercoledì 23 Giugno 2010 - 08:14
di Kiko
Io ho usato questo espediente sulla dashboard di un sito sul mio tablet, esperimento certo rozzo ma estremamente efficace. Si tratta di una tastiera virtuale realizzata tramite HTML e CSS, col supporto di jQuery. Il codice per realizzare il tutto è ben documentato, mentre gli usi che si possono fare di un simile strumento sono svariati in termini di accessibilità e usabilità, o come alternativa per le interfacce di tipo touch come nel mio esperimento.
Categoria: CSS, Scripting | Permalink | Commenti (9)
Perchè gli screen reader non supportano i CSS acustici?
Mercoledì 23 Giugno 2010 - 08:05
di Gabriele Romanato
Reinhold Weber ha scritto un interessante articolo in cui spiega i benefici apportati dai CSS all’accessibilità dei documenti web. Tra i consigli proposti per scrivere fogli di stile accessibili, spicca l’uso dei fogli di stile acustici. Il problema maggiore con questa soluzione è che questo tipo di CSS non è supportato quasi da nessuno degli screen reader più usati (ad eccezione di Orca per Linux).
Continua a leggere Perchè gli screen reader non supportano i CSS acustici?
Categoria: CSS | Permalink | Commenti (3)
Un menu fisheye CSS con immagini
Giovedì 17 Giugno 2010 - 08:09
di Gabriele Romanato
Realizzare un menu fisheye con i CSS non è difficile. Possiamo tuttavia aggiungere un ulteriore effetto grafico usando delle immagini
di sfondo.
Partiamo da una struttura come questa:
<ul id="navigation"> <li><a href="#" id="home">Home</a></li> <li><a href="#" id="images">Images</a></li> <li><a href="#" id="about">About</a></li> <li><a href="#" id="contact">Contact</a></li> </ul>
Utilizziamo degli ID diversi su ciascun link perché ciascuna voce avrà un’immagine di sfondo diversa.
Continua a leggere Un menu fisheye CSS con immagini
Categoria: CSS | Permalink | Commenti (12)
Fumetti con i CSS
Martedì 8 Giugno 2010 - 12:09
di Kiko
Nick Gallagher dà certamente prova di grande abilità e inventiva con questo esperimento. Con un codice HTML semantico e pulito e un uso competente dei CSS è riuscito a creare senza usare immagini e/o script la classica forma del fumetto (speech-bubble o balloon in inglese). Generalmente si usano per richiamare l’attenzione del visitatore su frasi chiave di un prodotto o di un articolo. Se non troppo invasivi possono essere usati per mostrare alcuni blockquote all’interno di un testo.
Qui ne trovate davvero di differenti, per colori e forme, e questo è il foglio CSS esaurientemente commentato.
La base è ottenuta con un uso accorto del contenuto generato (pseudo-elementi :before e :after), gli abbellimenti poggiano invece su alcune proprietà CSS3.
Categoria: CSS | Permalink | Commenti (2)