Tecniche interessanti tra CSS e CSS3

Pubblicato da Davide, Aggiornato venerdì 4 luglio 2008 5 Commenti »

Questo articolo e' stato scritto piu' di 6 mesi fa.. In teoria non cambia nulla, sed panta rei: se trovi link o informazioni datate segnalalo pure. :)

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:

  1. 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.
  2. 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;
    }
  3. 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.
  4. 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.
  5. 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.
  6. [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?

5 Commenti »

Puoi lasciare un tuo commento, oppure fare un trackback dal tuo sito.

  1. 1

    gravatar

    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. 2

    gravatar

    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. 3

    gravatar

    Oh mamma, troppi link interessanti! Non ci sto dietro ;)

  4. 4

    gravatar

    ne conosco altre 100mila.. ma sono inutili tanto IE6 non le supporta e ci sono ancora troppi utenti che usano questo browser… :-(

  5. 5

    gravatar

    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. ;)

Lascia il tuo commento

 

http://livregratis.fr/ - http://club-ebook.fr/

Utilizzando il sito, accetti l'utilizzo dei cookie da parte nostra. maggiori informazioni

Questo sito utilizza i cookie per fonire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o clicchi su "Accetta" permetti al loro utilizzo.

Chiudi