Oltre 100 risorse CSS per web designer e sviluppatori

di Bradley Nice, Content Manager presso ClickHelp.com - strumento di documentazione software

Un web designer / sviluppatore serio deve richiedere un'abilità per scrivere un buon CSS. CSS è un linguaggio semplice, molto facile da imparare ma molto potente. Una volta appreso potresti stupirti della sua abilità.

Nel caso in cui non si abbia familiarità con i CSS, ecco una breve introduzione:

"CSS è un linguaggio speciale utilizzato per definire lo stile del contenuto HTML. CSS definisce come verranno visualizzati gli elementi HTML: colore, dimensioni, posizione, bordo, sfondo, ecc. "
© ClickHelp Team

Oggi ho raccolto una serie seria di risorse CSS per aiutarti a imparare. È suddiviso in diverse categorie: tutorial di apprendimento, siti e libri, riferimenti e cheatheet, tutorial e tecniche, modelli e cornici, gallerie e vetrine, strumenti e blog e siti di notizie specifici per CSS.

Tutorial, siti e libri di apprendimento

Siti: Codecademy, FreeCodeCamp.com, SoloLearn, Treehouse, Tutsplus, CSS dalla A alla Z, Dash, The Hello World, Khan Academy, HTML5 da Scratch, Sitepoint, Usersnap

Libri: HTML e CSS, programmazione After Hours - Tutorial CSS

  • Tutorial video HTML e CSS di base di Chris Coyier (62 MB) - A deve guardare video per principianti assoluti. Ti insegna tutto dal prendere un editor di testo, scrivere la tua pagina HTML di pugno e usare CSS per lo styling.
  • Creazione di un foglio di stile globale - Non hai bisogno di file CSS diversi per pagine diverse, crea sempre un solo file CSS globale per tutte le tue pagine web. I fogli di stile globali possono essere applicati su tutto il sito o su un sottoinsieme di pagine e ciò significa che è necessario aggiornare uno o due file solo quando è necessario apportare una modifica di stile.
  • Nozioni di base CSS: bloccato nel mondo delle tabelle nidificate e del markup deprecato? L'uso dei CSS per dare uno stile ai tuoi file (X) HTML gioverà a te e ai tuoi visitatori in molti modi. Impara le basi dei CSS capitolo per capitolo online o scarica tutti e 18 i capitoli dei CSS base in un file PDF stampabile scaricabile.
  • Tutorial CSS (Cascading Style Sheets): impara l'uso del CSS, definendo la dimensione del carattere, i margini e il riempimento. Identifica gli elementi HTML tramite gli attributi id e class.
  • Tutorial CSS - Altri tutorial CSS qui, dalla lezione 1 alla 16 contengono una breve introduzione e tutorial approfondito sui CSS, imparano dall'uso dei colori agli elementi mobili.
  • HTML e CSS per principianti - Come impostare la tua pagina Web HTML, creare intestazioni e paragrafi, aggiungere elenchi, modificare la dimensione del carattere, il colore e il tipo utilizzando CSS.
  • Impara HTML e CSS in una guida facile da usare. - Guida semplice e completa dedicata ad aiutare i principianti a imparare HTML e CSS. Descrivendo i fondamenti, questa guida illustra tutti gli elementi comuni di progettazione e sviluppo front-end.

Riferimenti e schede tecniche

  • Indice delle proprietà CSS: un elenco alfabetico di ogni proprietà CSS.
  • Guida stenografia CSS - Un cheatsheet che copre i formati base di stenografia CSS.
  • CSS Cheat Sheets - Due cheat sheet di About.com - uno di base e uno per i layout CSS.
  • Listamatic - Questo sito offre esempi di come usare i CSS per creare stili di elenco radicalmente diversi.
  • Guida per principianti di un designer CSS esperto - Questa è una grande lista di risorse per i principianti CSS.
  • 5 consigli per organizzare il tuo CSS - Questo articolo offre cinque metodi davvero utili per organizzare meglio i tuoi fogli di stile (e, quindi, più facili da modificare in seguito).
  • I miei 5 consigli CSS - Una raccolta di cinque semplici consigli per creare CSS migliori.
  • Modalità Quirks e modalità Strict - Una guida alla modalità stranezze e alla modalità rigorosa nei browser moderni.
  • CSS Cheat Sheet (V2) - Un riferimento CSS a pagina singola che elenca tutti i selettori CSS 2.1.
  • Core CSS: Part 1 - Una guida di riferimento di 6 pagine per gli elementi CSS di base di Refcardz.
  • Foglio di abbreviazione CSS (PDF) - Un foglio di riferimento per il formato di abbreviazione CSS.
  • Utilizzo dei CSS (Cascading Style Sheets): una guida di base ai CSS, inclusi i vantaggi dell'utilizzo dei CSS.
  • 5 modi per scrivere all'istante un CSS migliore - Alcuni consigli per scrivere un buon CSS efficiente ed efficace.
  • Ottimizzazione della struttura del sito Web per la stampa tramite CSS: guida alla creazione di fogli di stile per la stampa.
  • PrintStylesheets - Un'altra guida alla creazione di fogli di stile di stampa.
  • Tipografia CSS: tecniche di contrasto, esercitazioni e migliori pratiche - Una grande raccolta di risorse tipografiche CSS.
  • Potenti tecniche CSS per una codifica efficace - Una raccolta di tecniche, idee e soluzioni CSS per una migliore codifica CSS.
  • Ripristino degli stili CSS con Ripristino CSS - Una guida completa per ripristinare gli stili.
  • Convenzione sulla denominazione strutturale nei CSS - Un articolo sugli elementi di denominazione in base a ciò che sono anziché a dove sono o come appaiono.
  • Miglioramento della leggibilità del codice con CSS Styleguides: un articolo che descrive cinque tecniche che è possibile utilizzare per rendere il codice più gestibile e gestibile.
  • 70 idee di esperti per una migliore codifica CSS - Una raccolta di suggerimenti di esperti per migliorare il tuo codice.
  • Teoria dei float CSS: cose che dovresti sapere - Una guida per comprendere i float nei CSS.
  • Guida CSS completa - Un'enorme risorsa che copre praticamente ogni parte del CSS.
  • Contrasto e flusso tipografici - Un articolo che illustra le basi della creazione di un buon tipo con sufficiente contrasto tipografico nei CSS.
  • Come dimensionare il testo in CSS - Una guida completa al dimensionamento del testo CSS.
  • CSS Cheat Sheet - Un cheat sheet CSS molto completo basato sul web.
  • 13 Principi di formazione di CSS Tutti dovrebbero sapere - Un elenco di convenzioni CSS di base che dovresti conoscere.
  • Guida alle risorse - Questa è la guida alle risorse CSS di CSS Zen Garden.
  • CSS Beauty - Un sito che offre notizie, risorse e una galleria CSS.
  • Utilizzo delle scorciatoie CSS - Una guida di riferimento ad alcune scorciatoie CSS di base.
  • Manuale per gli sviluppatori Web - Questa è una vasta raccolta di CSS e altre risorse, tra cui vetrine, strumenti e altro.
  • Designing on a Dime: 100 risorse CSS gratuite - Una vasta raccolta di risorse CSS, inclusi articoli, tutorial, layout e altro ancora.
  • 15 proprietà CSS che probabilmente non utilizzerai mai (ma che forse dovresti) - Questo articolo copre quindici proprietà CSS spesso trascurate che molti designer potrebbero non sapere nemmeno che esistano.
  • 10 Principi dei master CSS - Una raccolta di grandi principi e linee guida di alcuni dei master dei CSS.
  • Specificità CSS: cose che dovresti sapere - Una guida alla specificità CSS, uno dei concetti CSS più difficili da comprendere.
  • Risolvere i mal di testa CSS di 5 Commons: una guida per affrontare problemi CSS come il bug a doppio margine di IE6 e gli stili inefficaci.

Tutorial e tecniche

  • 20 Risorse utili per conoscere CSS3
  • CSS3 Unleashed - Suggerimenti, trucchi e tecniche
  • 20 tutorial CSS3 molto utili
  • CSS3 Funzioni e caratteristiche interessanti: oltre 30 utili tutorial
  • CSS da zero - Questo è un tutorial molto semplice per iniziare con i CSS che ti guida nella creazione della tua prima pagina web di base con CSS. Presuppone che la persona che sta attraversando il tutorial abbia poca o nessuna conoscenza di come codificare un sito Web ed è un'ottima risorsa per i principianti.
  • 53 Tecniche CSS senza le quali non potresti vivere - Questa è una vasta raccolta di tecniche CSS per tutto, dai menu ai moduli ai fogli di stile per la stampa.
  • Ombre discendenti CSS: un'esercitazione su come creare ombreggiature su immagini usando CSS.
  • Selectutorial - Selettori CSS - Una guida di base ai selettori CSS e al loro funzionamento.
  • Tecniche di navigazione CSS - Una raccolta di 37 diversi design di navigazione che utilizzano CSS.
  • Tecniche CSS che uso sempre - Una raccolta di tecniche CSS che Christian Montoya trova estremamente preziosa.
  • Roundup di tecniche CSS - 20 suggerimenti e trucchi CSS - Una raccolta di tecniche CSS tra cui angoli arrotondati e popup CSS.
  • Suggerimenti e trucchi CSS - Una raccolta di utili tecniche CSS di base.
  • Foglio di stile principale: la tecnica CSS più utile - Un foglio di stile principale utilizzato per cancellare e ripristinare le impostazioni predefinite del browser.
  • Visualizzazione di segnali di collegamento ipertestuale con CSS: una breve esercitazione per l'aggiunta di icone di tipo link usando CSS compatibile con IE7, Safari e Firefox.
  • Dieci trucchi CSS che potresti non conoscere - Copre suggerimenti come la scorciatoia del carattere CSS, la sostituzione delle immagini e l'allineamento verticale con i CSS.
  • Dieci altri trucchi CSS che potresti non conoscere: questo articolo tratta elementi come blocco o elementi incorporati, impostazione di una larghezza minima della pagina e testo invisibile.
  • Trasformare un elenco in una barra di navigazione: un ottimo tutorial sulla creazione di una barra di navigazione da un elenco con stile.
  • Trasformare gli elenchi in alberi - Come creare un elenco non ordinato a più livelli sotto forma di un documento o di un albero di pagine.
  • Ricostruzione di pagine Web con CSS - Come ricostruire una pagina Web con un layout CSS.
  • Layout CSS avanzati: Step by Step: un'esercitazione dettagliata per la creazione di un layout avanzato a 3 colonne.
  • Creazione di un layout CSS da zero - Una guida completa per la creazione di un sito basato su CSS da zero.
  • Tutorial CSS - Un tutorial completo di W3Schools.
  • Fogli di stile - Un'altra raccolta di tutorial CSS molto completa.
  • Paragrafi elaborati con CSS - Un tutorial per creare formati di paragrafo specializzati.
  • Angoli ancora più arrotondati con CSS - Una tecnica per creare angoli arrotondati che supporta la trasparenza PNG e alfa.
  • Menu dell'elenco CSS di Uberlink: un'esercitazione per la creazione di una barra di navigazione che si comporta come un menu di scambio di immagini ma utilizza solo due immagini ed evidenzia la pagina corrente.
  • Come aggiungere variabili ai tuoi file CSS - Una guida per applicare variabili ai CSS usando PHP e la riscrittura degli URL di Apache.
  • Più di 15 tecniche e strumenti per la codifica CSS tra browser - Questo articolo tratta più di 15 suggerimenti per la creazione di codice CSS compatibile con più browser.
  • Centratura CSS - Divertimento per tutti! - Una guida al centraggio CSS nei layout, incluso il centraggio dei layout dei liquidi.
  • Posizionamento assoluto all'interno del posizionamento relativo - Una guida per posizionare gli elementi figlio assolutamente all'interno di un elemento padre relativamente posizionato.
  • Posizionamento assoluto falso - Una guida ad un approccio di posizionamento che combina i migliori attributi sia del galleggiante che del posizionamento assoluto.
  • Allinea verticale per elenchi di navigazione con più linee: una guida per allineare gli elenchi che utilizzano l'approccio con riquadro mobile.
  • Elenco dei primi 10 pulsanti CSS - Una raccolta di dieci dei migliori tutorial per la creazione di pulsanti CSS.
  • Mountaintop Corners - Creazione di angoli arrotondati con CSS.
  • CSS Rounded Corners Roundup - Una raccolta di tecniche e tutorial sugli angoli arrotondati.
  • Trucchi CSS per proiettili personalizzati - Una guida alla creazione di stili personalizzati per proiettili con CSS.
  • Swag CSS: Elenchi a più colonne - Una guida alla creazione di un elenco ordinato semanticamente logico che scorre attraverso più colonne verticali.
  • Miglioramento della visualizzazione dei collegamenti per la stampa: mostra come includere gli URL dei collegamenti nelle stampe delle pagine dopo il testo di ancoraggio del collegamento.
  • Trucco menu CSS avanzato - Un menu avanzato davvero interessante con un effetto di sfocatura costruito con CSS.
  • Menu CSS: un'esercitazione sulla creazione di menu da elenchi nidificati con CSS2 e senza JavaScript.
  • Menu Schede CSS con menu a discesa: un'esercitazione per la creazione di un menu a discesa con schede CSS.
  • Menu CSS avanzato - Un tutorial per creare un menu CSS davvero eccezionale da WebDesignerWall.
  • Schede orizzontali animate: un'esercitazione per la creazione di schede di menu orizzontali che si animano al passaggio del mouse.
  • Menu grafico CSS con rollover: un ottimo tutorial per la creazione di un menu CSS con effetto rollover.
  • Dropdown CSS ibridi - Un tutorial su come creare dropdown CSS che si degradano con grazia e sono ben strutturati, tra le altre cose.
  • Guida per principianti a CSS - Una guida completa per i nuovi a CSS.
  • Introduzione ai CSS: un esercizio pratico - Una guida di base per iniziare a utilizzare i CSS.
  • Come: CSS Large Background - Un tutorial per lavorare con sfondi di grandi dimensioni con CSS.
  • L'interfaccia CSS altamente estensibile: un'esercitazione completa per la creazione di siti Web CSS altamente personalizzabili e adattabili.
  • Uso dei CSS per fare qualsiasi cosa: oltre 50 esempi creativi ed esercitazioni - Una raccolta di oltre 50 tutorial per la creazione di layout CSS unici.
  • Sviluppo CSS semplice e veloce con Firebug - Una guida all'uso di Firebug per migliorare i tuoi progetti web.
  • 10 esempi di bella tipografia CSS e come lo hanno fatto ... - Offre ottimi esempi di tipografia CSS insieme a tutorial su come crearli.
  • 16 Esercitazioni e tecniche su grafici e grafici a barre CSS utilizzabili - Una raccolta di esercitazioni per la creazione di grafici e grafici basati su CSS per la visualizzazione dei dati.
  • Citazioni pull migliori: non ripetere il markup: una guida per la creazione di preventivi pull che non includano markup ripetuti non necessari.
  • Effetto testo sfumato CSS: un'esercitazione per la creazione di gradienti di testo per le intestazioni.
  • 43 Tutorial da PSD a XHTML, CSS Creazione di layout Web e navigazione - Un vasto elenco di tutorial per trasformare i progetti di Photoshop in file CSS / XHTML validi.
  • Mappe di immagini CSS: un'esercitazione per la creazione di mappe di immagini con CSS e XHTML.
  • Griglie fluide: guida alla creazione di layout fluidi basati su griglia.
  • Come eseguire il debug dei CSS: un'esercitazione sulle tecniche di debug per i CSS.
  • 10 tecniche CSS impegnative ma fantastiche - Una guida ad alcune tecniche CSS avanzate che vale la pena apprendere.
  • 50+ script di navigazione basati su schede CSS puliti e piacevoli: una grande raccolta di navigazione a schede che utilizza CSS.
  • 30 tecniche ed esempi CSS eccezionali - Una grande raccolta di effetti CSS davvero fantastici, tra cui una galleria di immagini hoverbox, un piè di pagina appiccicoso e un effetto fisarmonica solo CSS, tra gli altri.
  • 101 Tecniche CSS di tutti i tempi Parte 1 - Parte 2 - Un'altra vasta raccolta di grandi tecniche CSS con tutorial per ciascuno.
  • Dead Center - Un breve tutorial su come posizionare qualcosa al centro di una finestra del browser (sia in verticale che in orizzontale).
  • Layout liquidi in modo semplice: un'esercitazione completa sulla creazione di layout CSS liquidi.

Modelli e cornici

  • La griglia CSS da 1 Kb - Questo è probabilmente il sistema di griglia più semplice e compatto in circolazione, ma include uno strumento per personalizzare la griglia prima del download.
  • CSS Zen Garden - CSS Zen Garden è un framework HTML e CSS creato per mostrare la varietà di progetti che possono essere creati utilizzando CSS. Oltre al framework, ci sono tonnellate di modelli e temi disponibili.
  • Layout liquidi CSS multi-colonna perfetti: una raccolta di layout liquidi compatibili con iPhone.
  • Sistema a griglia 960 - Un sistema a griglia CSS basato su un layout di base largo 960 pixel.
  • Modelli CSS gratuiti - Un sito che offre oltre 200 modelli CSS rilasciati con la licenza Creative Commons Attribution 2.5.
  • Modelli CSS belli e gratuiti - Una dozzina di modelli per iniziare con progetti basati su CSS, tra cui un riquadro centrato dinamico, quattro colonne dinamiche e disegni centrati sul totale del riquadro fisso.
  • Little Boxes - Una raccolta di file CSS per una varietà di layout.
  • Prototipazione con Grid 960 CSS Framework - Una guida alla creazione di modelli di siti Web utilizzando Grid 960.
  • Prototipazione di un modello di pagina iniziale in stile rivista con Blueprint CSS Framework - Una guida molto preziosa per la creazione di layout di riviste e di tipo griglia con Blueprint.

Gallerie e vetrine

  • Stelle CSS - Una galleria che offre alcune decine di progetti basati su CSS per la tua lettura.
  • Basato su CSS - Un'enorme galleria CSS con migliaia di design.
  • CSS Drive - Una galleria CSS categorizzata.
  • CSS Mania - Una galleria CSS che esiste da cinque anni.
  • CSSelite.com - Una galleria categorizzata di disegni CSS.
  • CSS Creme - Una vasta galleria di siti ordinabili per colore, categoria o designer che include anche tutorial e notizie.
  • csswebsite - Una galleria che ti consente di filtrare per categoria, data o colore.
  • 40 bellissimi disegni scuri per siti Web CSS - Un post in galleria che offre alcuni fantastici disegni scuri realizzati con CSS.
  • Best of CSS Design 2008 - Un altro post in galleria che mostra i migliori design CSS del 2008.
  • CSS Beauty Gallery - Una galleria CSS con voci elencate in ordine cronologico. I disegni comprendono dal 2004 ad oggi.

Utensili

  • Firebug - Un plugin per Firefox che consente di visualizzare e modificare CSS e altri codici direttamente in Firefox.
  • Aardvark - Un'estensione di Firefox che ti consente di vedere ogni elemento HTML e classe o ID.
  • CSSViewer 1.0.3 - Un'estensione di Firefox che consente di visualizzare le proprietà CSS su qualsiasi pagina Web.
  • GridFox: un'estensione di Firefox per l'assistenza nella progettazione del layout della griglia sovrapponendo una griglia su qualsiasi sito Web.
  • CodeBurner - Un plug-in per Firefox o Firebug che rende disponibile il materiale di riferimento HTML e CSS nel browser.
  • IzzyMenu - Un creatore di menu CSS gratuito che supporta la creazione di sottomenu a discesa DHTML.
  • Spanky Corners - Un generatore di scatole ad angolo arrotondato.
  • CleanCSS - Un formattatore e ottimizzatore CSS.
  • Selettore browser CSS: uno strumento utile per potenziare i selettori CSS in base al browser del visitatore.
  • Compressore CSS - Un compressore di file CSS.
  • Generatore di layout CSS - Un semplice generatore di CSS online che crea un framework di layout di base.
  • CSSTidy - Un parser e un ottimizzatore CSS open source e scaricabile.
  • CSS Drive CSS Compressor - Uno strumento di compressione CSS che ha una modalità base e una avanzata, a seconda delle tue esigenze.
  • Tabifier: aggiunge rientri ai file di codice.
  • CSSFly - Un editor CSS e XHTML basato su browser che funziona in tempo reale.
  • List-O-Matic: uno strumento per la creazione di menu di navigazione basati su elenchi con CSS.
  • Markup Maker: crea un documento framework XHTML / HTML valido con gli ID pagina inseriti.
  • CSSMate - Un editor CSS online.
  • Set di tipi CSS - Un generatore di tipografia CSS.
  • Costruisci 0,5: uno strumento visivo per la creazione di layout basati sul framework Blueprint.
  • PXtoEM.com - Uno strumento di conversione delle dimensioni da pixel a EM.
  • Revisori degli editor CSS - Una raccolta di recensioni di alcuni dei più popolari editor CSS.
  • YAML Builder - Uno strumento visivo per la creazione di layout YAML.
  • Gridinator: un generatore di layout di griglia CSS.
  • Elenco di strumenti CSS - Un vasto elenco di strumenti CSS per tutto, dai caratteri agli ottimizzatori.
  • 50 strumenti CSS estremamente utili e potenti: un elenco di alcuni ottimi strumenti CSS, insieme a un po 'di ciascuno.

Blog e siti di notizie specifici per CSS

  • Trucchi CSS - Un blog dedicato ai CSS di Chris Coyier.
  • Ultimate CSS - Anche se non è stato aggiornato da alcuni mesi, questo blog offre ancora alcuni post archiviati.
  • Mucchio di aiuto CSS - Una raccolta crescente di tutorial e risorse CSS.

Buona giornata!

Bradley Nice,
Content Manager su ClickHelp.com - il miglior strumento di documentazione online per i fornitori SaaS