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!

Tommaso Baldovino

UX/UI Designer di Firenze, appassionato di tecnologia e accessibilità, esperto di WordPress, blogger, gamer e amante della fotografia.

8 commenti su “Separatori e linee orizzontali da Smashing Magazine”

  1. Grazie 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 :)

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

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

  4. Anch’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! ;)

  5. Complimenti, 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!

  6. @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.

  7. Ciao…. 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