TomStardust.com
Web Design, accessibilità, XHTML e CSS
Sei qui: Homepage » creazioni, risorse utili, web design » Separatori e linee orizzontali da Smashing Magazine
set 11 2008
Separatori e linee orizzontali da Smashing Magazine
Il sito di risorse per Web Designer pubblica una incredibile raccolta di separatori per pagine web, da scaricare gratuitamente.
Che Smashing Magazine sia una risorsa da seguire con attenzione per ogni sviluppatore web è ormai un dato di fatto. In due anni di vita (appena compiuti) hanno rilasciato un’incredibile quantità di materiale di ottima fattura, tale da non temere confronti con altri siti del genere.
Questo post è per segnalarvi una collezione di separatori di pagine web di ottima qualità. In genere non scrivo interventi simili, ma questa a mio parere è una delle migliori release di Smashing Magazine; tra l’altro il materiale è totalmente gratuito e può essere utilizzato per progetti personali senza alcun vincolo. E’ disponibile anche un archivio con i files originali di maggior parte delle proposte.
I separatori potrebbero servirvi anche come fonte di ispirazione per gli <hr> dei vostri lavori. Io ne ho appena approfittato per modificare TomStardust Diary, partendo da questa immagine:
Mi piaceva l’idea di base ed ho realizzato qualcosa di simile, che potesse integrarsi bene con la grafica del mio blog personale:
Come sempre, altre segnalazioni e pareri sono ben accetti nei commenti; se però nel vostro feed reader non avete ancora Smashing Magazine vi consiglio di rimediare!
Usi Twitter?
11 settembre 2008 alle 08:38
AlessandroGrazie per la segnalazione, Smashing Magazine è veramente un ottimo sito dove si trovano moltissime risorse e consigli utili. Molto carina l’idea del taglio che fa intravedere lo sfondo, mi piace :)
11 settembre 2008 alle 16:32
Andrea@BVCarino il tuo separatore, però non mi piace l’uso degli hr tra i post. Secondo te è meglio usare l’immagine come background posizionato al meglio?
11 settembre 2008 alle 17:01
TomAndrea@BV: in genere sì, preferisco non utilizzare gli hr ma applicare gli stili su elementi già esistenti.
A volte però mi piace comunque sfruttare gli hr per ordinare il codice, suddividendo header, corpo, sidebar e footer. Li nascondo in visualizzazione tramite i CSS, ma visitando il sito con i fogli di stile disabilitati risulta tutto più ordinato. Su questo sito li ho utilizzati proprio in questo modo.
11 settembre 2008 alle 20:07
Andrea BaroniAnch’io ho dato il mio umile contributo alla causa.
Sono finito anche tra i finalisti, ma contro i “tentacolini verdi” non c’è scozzo! (meritata vittoria annunciata direi… :) )
Concordo sul fatto che se usati bene gli hr riescano a tenere ordinati altrimenti inestricabili papiri di testo, basta però non abusarne.
by the way: complimenti per i tuoi blog… li seguo sempre con molto interesse! ;)
13 settembre 2008 alle 15:18
OttantottoComplimenti, ottima idea… Veramente carino… sicuramente da provare…
P.s.
Vorrei mettermi in contatto con l’autore di questo blog, se puoi contattami per e-mail!
15 settembre 2008 alle 23:45
StefanoNon ho ben chiaro come si usano però…da CSS dovrei applicare un background al tag con l’immagine?
16 settembre 2008 alle 11:02
Tom@Stefano: puoi usare le immagini come sfondi tramite CSS, applicandole o ad un elemento hr che fa da separatore, o al div che contiene il testo.
10 agosto 2011 alle 15:33
darioCiao…. scusa l’ignoranza.
Se volessi inserire uno di questi separatori tra i vari articoli del blog… avendo l’immagine a disposizione qual è il codice da utilizzare ed in quale file lo inserisco?
Come puoi vedere qui: http://www.logopedista.org/f-a-q/ gli articoli sono tutti consequenziali ed esteticamente non mi piacciono, creano confusione. Vorrei poterli distaccare l’uno dall’altro.
Grazie
Dario