Date con i CSS
Martedì 13 Marzo 2007 - 10:55
di Alessandro Fulciniti
Le date sono un dettaglio a cui sarebbe da dedicare molta attenzione su blog e siti con aggiornamenti frequenti. Ho pensato quindi di riassumere in un post tutorial e ispirazioni per ottenere date graficamente accattivanti.
Segue la lista.
- Dating request di Dave Shea, forse il primo mai
pubblicato. Peccato che con il redesign del sito l’esempio sia andato perso.. - Hot Dates with CSS, un tutorial con tre esempi di Christian Montoya
- Date con i CSS in italiano, su HTML.it
- Il semplice CSS date blocks for blogs di J Wynia
- il recentissimo Creating a Blog Entry Date Calendar
Icon Look with CSS, Mostly di Shirley E. Kaiser - … e se l’ispirazione non dovesse bastare Styling dates su Design MeltDown
Una piccola nota in conclusione: in alcuni casi vengono usati i div per racchiudere giorno, mese e anno. A parer mio una soluzione simile è da evitare, in quanto in assenza di CSS verranno resi uno per riga essendo i div elementi naturalmente block-level. È quindi consigliabile usare gli span, rendendoli display: block con i CSS. Per il resto, il procedimento è comune in tutti i casi, basta capire come impostare gli sfondi… e avere un po’ di pazienza e creatività con il vostro programma di grafica preferito. Una base di partenza potrebbe essere l’immagine di seguito che ho preparato per questo post:
Se vi va potete segnalarmi nei commenti esempi carini, notevoli, curiosi, interessanti che avete avvistato in rete.
Commenti
1
Io mi sono ispirato alla soluzione di Christian Montoya e l’ho trovata tra le migliori.
I casi in cui per formattare una data vengono utilizzati div in abbondanza sono da evitare!
2
ma kaiser ha elaborato un pochetto dippiù l’esempio di montoya?
# - postato da smal - 13 Marzo 2007 - 12:22
3
Se vi va potete segnalarmi nei commenti esempi carini, notevoli, curiosi, interessanti che avete avvistato in rete
non so quale punto tra questi rispecchi ma questo esempio l’ho appena postato ed usa un approccio non intrusivo :)
Qui il risultato del piccolo esempio.
4
Io ho seguito la guida di HTML.IT e ho realizzato questo: ManagerTribe
Ho utilizzato il tag span racchiuso però da un div ho forse sbagliato qualcosa??
Ciao
5
il link non funziona scusate provate questo:
6
grazie!
7
Bella l’idea di usare acronym x contenere gli span, non ci avevo pensato ;)
8
Ciao a tutti lavoro in uno studio di grafica pubblicitaria, presto dovremo occuparci del restyling di alcuni siti. Oltre a un lavoro di grafica che siamo in grado di svolgere si è presentata lesigenza di lavorare a questi progetti anche dal punto di vista tecnico per sviluppare alcune applicazioni, perciò cerchiamo qualcuno che sia in grado di riprogettare i siti per ottenere una migliore usabilità. Se qualcuno è interessato può inviarmi un messaggio alla mia casella di posta.
# - postato da antofu - 13 Marzo 2007 - 22:15
9
a me invece parrebbe avere poco senso usare acronym
# - postato da NoWhereMan - 14 Marzo 2007 - 13:44
10
infatti qui usano abbr http://microformats.org/wiki/d.....gn-pattern
# - postato da NoWhereMan - 14 Marzo 2007 - 17:50
11
manco a farlo apposta ho usato recentemente un approccio simile a quello esposto da html.it qui