101 template gratuiti: CSS, XHTML, ottima qualità e belli da vedere

1st Web Designer ha raccolto una lista di 101 template grafici per siti web già pronti all’uso, codificati in XHTML e CSS validi e di ottima qualità, anche se personalmente continuo a preferire quelli di ThemeForest. Sono tutti completamente gratuiti anche se per conviene sempre dare una letta alla licenza applicata per eventuali link da mantenere o per limitazioni d’uso. Questo articolo è solo la prima parte dell’elenco. Gli altri layout grafici saranno presentati nel prossimo post.

template css xhtml gratis

Se sei pratico con il codice HTML, allora potrai usarli per imparare molte nuove tecniche semplicemente studiandone il codice. Puoi copiarli e ricordati di personalizzarli giocando con il foglio di stile e sostituendo le immagini in modo che si adattino meglio ai contenuti del tuo sito.

Sono veramente tanti nonostante siano stati vagliati uno ad uno e selezionati tenendo solamente quelli di ottima qualità e di bel impatto visivo. Veramente una buona risorsa per chi vuole pubblicare un sito in pochissimo tempo.

L’arte dello scrivere il codice a mano (per webdesigner)

Hand coding, scrivere a mano il codice...

E’ chiaro che l’epoca degli editor visuali per HTML è tramontata e si è affermata con chiarezza che l’unico sistema per codificare un sito web è scriverlo a mano, magari con il blocco note. Il blog di SohTanaka è stato creato proprio per chi sviluppa siti web a mano.

Il titolo è chiaro "The art of Hand Coding", l’arte dello scrivere il codice a mano o meglio, con la tastiera. Ogni post è dedicato ad una tecnica particolare. Per esempio vengono svelati i segreti e i trucchi per creare un footer fisso, cioè che rimane fermo nonostante ci si sposti con la scrollbar. Oppure ci insegna a creare un "tavola dei contenuti" sul web, come compare sui libri.

…e sapete come fare una didascalia di un’immagine che si attiva al passaggio del mouse???

didascalia...

Una progress bar di puro CSS

progress bar in css

Fino a qualche anno fa una progress bar era possibile farla solamente in Flash. Ora con l’avvento dei framework Javascript e con l’uso sistematico dei fogli di stile il Flash è passato in secondo piano perchè quasi completamente sostituito.

In questo breve tutorial, Alen Grakalic mostra come creare una progress bar fatta esclusivamente con fogli di stile e immagini. L’idea è di creare un contenitore di dimensione fissa e con overflow=hidden che ha come background la progress bar completa. Un secondo elemento contenente un’immagine bianca, posizionato in maniera assoluta sopra al primo, viene fatto scorrere per creare l’effetto animato finale.

L’idea è semplice ma efficace. Potete vedere l’effetto finale tramite gli esempi nella demo, oppure scaricare direttamente il codice già scritto per voi!

Menu di navigazione con i fogli di stile

exploding boyOggi sono capitato su Exploding Boy, il blog di Christopher Ware, un web e graphic designer dell’Alabama. Su questo bel sito l’autore mette a disposizione un buon numero di risorse da poter riutilizzare.

Molto interessante la serie dei suoi menu di navigazione. Sono tutti creati a regola d’arte, utilizzando i fogli di stile e basati sulla tecnica delle Sliding Doors. In particolare segnalo questi set di menu che potete scaricare liberamente, utilizzare sui vostri siti e personalizzare a piacere:

menu navigazione css

Cristopher Ware ha pure creato una propria collezione con una trentina di micro-icone, in quattro set di colori. Anche in questo caso potete scaricarla liberamente.

Icone gratis