Qual è una buona risorsa online per i "design pattern" CSS?[Chiuso]

Question

Qualcuno là fuori può consigliare una buona risorsa online per i "design pattern" CSS?

So che i design pattern in un contesto software di solito si riferiscono a design pattern basati su OO, ma intendo design pattern nel senso più ampio del termine:cioè.soluzioni comuni e pulite a problemi/attività comuni.

Un esempio di tale risorsa sarebbe questo elenco di modelli di tavoli, questo ti dà tutto ciò che devi sapere su come rendere belle le tabelle utilizzando una serie di tecniche CSS.

Altri esempi di problemi comuni che potrebbero avere buone soluzioni fisse sarebbero cose come angoli arrotondati sui div, layout di moduli altamente utilizzabili ecc.

Answer 1

Mi riferisco a Una lista a parte articoli in continuazione per questo genere di cose.Fanno molte ricerche per tentativi ed errori per trovare modi davvero creativi per gestire i problemi CSS comuni nel modo più pulito e portatile possibile.

Answer 2

Alcuni siti Web che affrontano i modelli di web design sono elencati di seguito.Non forniscono specificatamente HTML e/o CSS per ottenere i risultati desiderati, ma forniscono esempi di siti live che puoi vedi la fonte on (o, meglio ancora, utilizzare Firebug).

Modelli di interfaccia utente

Questo è probabilmente il migliore del gruppo.Suddivide le cose in categorie che coprono l'ampiezza delle attività di progettazione di pagine web.Troverai categorie come tag cloud, anteprima dal vivo e registrazione utente tra molte altre.Questa è una risorsa davvero completa e ben organizzata.Spiega ogni modello e fornisce numerosi esempi.

Tocca modello

Simile a UI-Patterns anche se attualmente non così completo.Ci vuole un approccio più sociale per raccogliere modelli di progettazione consentendo agli utenti di creare le proprie categorie ("set di utenti") e popolarle con la propria selezione di siti.

Libreria di modelli di progettazione Yahoo

A differenza degli altri due, questo non fornisce molti esempi di siti reali.È ben organizzato e abbastanza completo.

Elementi di progettazione

Questo è un blog che mostra vari elementi del web design.Non discute i modelli, ma è utile come rapida fonte di ispirazione o come mezzo per iniziare la propria analisi.

Answer 3

IL Tutorial galleggiante è un ottimo punto di partenza per apprendere l'importante attributo CSS "float" e come utilizzarlo per impaginare il contenuto utilizzando alcuni modelli comuni, inclusi layout liquidi a due e tre colonne.

Floatutorial ti porta attraverso le basi di elementi galleggianti come immagini, tappi di caduta, pulsanti successivi e posteriori, gallerie di immagini, elenchi in linea e layout multicolunno.

Answer 4

Il già menzionato Una lista a parte è davvero buonoUn altro sito che utilizzo da quando ho iniziato a sviluppare web è SitePoint.com.Ecco il loro Riferimento CSS.Se vuoi un buon libro sui CSS, il loro è uno dei miei preferiti.

Answer 5

La cosa più vicina a un "design pattern" nei CSS sono i layout comuni.Lo strumento migliore per sfruttare layout comuni, larghezze di colonne, ecc.È Sistema a griglia 960, A 960.gs

Guarda questo screencast per una breve introduzione.Risparmia un sacco di tempo e ti aiuta ad applicare tutti i modelli di layout comuni con un codice minimo:

http://net.tutsplus.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/

Tutto quello che devi fare è applicare le classi corrette ed eseguire un po' di operazioni aritmetiche per assicurarti che tutte le larghezze delle colonne si sommino.

L'unico libro che consiglio di più per i CSS è Padronanza dei CSS di Andy Budd (cssmastery.com).È un po' piccolo, ma mi ha aiutato più di qualsiasi altro libro sui CSS.