Tecniche interessanti tra CSS e CSS3
Pubblicato da Davide, Aggiornato venerdì 4 luglio 2008 5 Commenti »
Tra riviste e blog che leggo, trovo sempre più articoli interessanti: descrivono tecniche e spunti che vorrei utilizzare nel redesign di questo blog e che in generale mi sto appuntando per usi futuri.
Una piccola lista:
- Thumbnail ridimensionabili con overflow: si tratta di una semplice tecnica che sfrutta la proprietà css overflow per allargare una miniatura di una immagine al passaggio del mouse sopra di essa.
Esistono innumerevoli gallerie grafiche realizzate in javascript, ma stavolta non si tratta di javascript, nè di galleria. E’ un metodo decisamente semplice e accattivante per presentare una serie di immagini attraverso miniature. Credo proprio che lo userò per il portfolio. - Icone sui link esterni e sui file: la tecnica proposta da Alexander Kaiser affianca una piccola icona ai link che puntano a file sfruttando i selettori css; l’avevo già utilizzata a suo tempo per Nerino e potrebbe tornare utile.
In pratica tutti i link a un file pdf vengono riconosciuti in questo modo:
a[href$='.pdf'] {
padding-right: 18px;
background: transparent url(icona_pdf.gif) no-repeat center right;
}
Il simbolo $ permette di individuare se alla fine dell’attributo href dell’elemento a esiste la stringa .pdf. Ovviamente lo stesso principio si può estendere a tutti gli altri tipi di file nonchè a siti esterni, ad esempio utilizzando l’operatore ^ per riconoscere un link esterno (a patto che tutti i link interni abbiano indirizzo relativo):
a[href^='http'] {
padding-right: 18px;
background: transparent url(icona_esterna.gif) no-repeat center right;
} - Iniziare ad usare CSS3: è di oggi la segnalazione su edit dell’articolo di Eric Wendeling che spiega l’utilizzo dei selettori + e ~, ora supportati dai principali browser di ultima generazione. Anche in questo caso, li utilizzerò nel nuovo design.
Sempre a proposito di CSS3, c’è un interessante articolo dal titolo un po’ spavaldo: “Tomorrow’s CSS Today: 8 Tecniques they don’t want you to know“. Consiglio di dare un’occhiata per capire come si possono usare i nuovi costrutti. - Immagine di sfondo ridimensionabile: questo articolo affronta un problema all’apparenza banale e spiega come piazzare una immagine di sfondo in modo tale che questa si ridimensioni assieme alla finestra del browser. A parte le tecniche che sfruttano javascript, ce n’è una che si basa solo su CSS. Non mi convince a pieno, perchè utilizza un elemento img e in alcuni casi rende male su IE, ma può essere un buon punto di partenza e di certo una valida lettura.
- Dare stile ai microformats con CSS: il microformat è un markup xhtml semantico, in grado di offrire quindi informazioni aggiuntive circa i dati che racchiude.
Saranno utilizzati nella futura pagina contatti di questo blog (esistono anche comodi generatori di microformat, per chi fosse interessato); già da tempo qualcuno ha pensato di dargli stile via CSS, e qualcunaltro ha pensato di creare un template css con tutte le classi relative ai microformat, molto comodo per dare stile alle proprie carte di identità xhtml. - [update] Menu espandibili con CSS, e javascript per renderli usabili: creare menù di navigazione espandibili in solo css (sfruttando la proprietà :hover) è una soluzione perfetta in termini di accessibilità. Ma può risultare poco usabile: appena il mouse esce dall’area del link il sottomenù sparisce. Questa tecnica propone l’utilizzo di un javascript non intrusivo per ritardarne la scomparsa.
Conoscete altre chicche o finezze del caso?
Varie info
Articolo pubblicato martedì 1 luglio 2008 alle 13:34
Segnala questo articolo.. e sentiti utile!
5 Commenti »
Puoi lasciare un tuo commento, oppure fare un trackback dal tuo sito.
Lascia il tuo commento
1
Luca - Pubblicato il 01 07 2008 alle 15:02
Le tecniche che verranno introdotte col supporto ai CSS3 sono veramente utili ;)
Volevo segnalarti che al punto 2 dici che il carattere $ serve a identificare se all’interno dell’attributo c’è la stringa xxx.
In realta il dollaro $ serve a identificare le stringe che si chiudono con la stringa cercata, nel tuo caso “.pdf”. :)
2
Davide - Pubblicato il 01 07 2008 alle 16:20
Giusta osservazione Luca, il carattere che identifica la stringa generica all’interno dell’attributo è *
mentre $ si riferisce alla fine e ^ si riferisce all’inizio.. ;)
Ho fatto chiarezza nel post..
3
vik - Pubblicato il 01 07 2008 alle 16:21
Oh mamma, troppi link interessanti! Non ci sto dietro ;)
4
Laura web designer - Pubblicato il 03 07 2008 alle 13:12
ne conosco altre 100mila.. ma sono inutili tanto IE6 non le supporta e ci sono ancora troppi utenti che usano questo browser… :-(
5
Davide - Pubblicato il 03 07 2008 alle 14:54
Beh io non sono per questo approccio: ciò che non deturpa la vista in IE6, ma la abbellisce in tutto il resto, è bene implementarlo.. Così potrai dire “guarda che bello questo sito con firefox”!
Infatti ho segnalato cose e cosette che possono coesistere anche con IE6, alpiù chi lo usa non le vede.. ma tutto il resto rimane usabile. ;)