Link utili del forum CSS (guardare qui prima di postare!)

[fcaldera]

---

ATTENZIONE!
La versione aggiornata della pagina "link utili" si trova al seguente link:
http://forum.html.it/forum/showthrea...readid=2933026

---

link veloci ai problemi più comuni

Adattare altezza / height / contenitore / blocco / colonne / float / clearing
Se state usando dei blocchi in float e il contenitore non si espande per contenerli, potete usare una tecnica chiamata 'easyclearing'
http://perishablepress.com/press/200...clearfix-hack/
---
Centrare un box / blocco / layout / elemento / contenitore
http://www.constile.org/template/centrare_il_box/
http://www.html.it/pag/18971/centrar...lmente-un-div/
---




Link utili(*)

In questa discussione saranno inseriti i link utili del forum CSS, utility, pillole, esempi utili per tutti.
NON vanno postate qui discussioni sugli argomenti proposti: per le discussioni potete aprire altri thread a parte.

Questo thread sarà lasciato aperto a chiunque desideri collaborare, segnalando link a risorse utili; vi chiediamo tuttavia un pò di ordine nel postare i vostri messaggi segnalando chiaramente l'argomento a cui la risorsa si riferisce.

I link segnalati saranno periodicamente controllati e spostati tra i primi post, (al fine di dar loro massima visibilità) e tutte le segnalazioni verranno via via eliminate. I moderatori non sono in grado di controllare in modo costante che i link siano sempre attivi: si chiede quindi la collaborazione di tutti per segnalare link non più funzionanti.

Grazie per l'attenzione
I moderatori. (Mich_ e fcaldera)



---

Indice delle sezioni
1. Perchè usare i CSS / il moderno approccio al webdesign
2. Introduzione ai CSS / Guide online / Manuali cartacei
3. Box model e Posizionamento / Layout
4. Menu, Form e altri elementi
5. Software / Risorse online / Metodologie per lavorare con i CSS
6. CSS Hacks / CSS bugs / Suggerimenti utili
7. Link utili a risorse relative ai CSS
8. Pillole degli utenti



(*) I link sono riportati "così come sono" senza commenti o garanzie. Il forum non risponde in alcun modo dei contenuti riportati nelle pagine linkate.

[fcaldera]

1. Perchè usare i CSS / il moderno approccio al webdesign

* Separare la presentazione dal contenuto:
Progettare con i CSS
Pushing Your Limits (and other secrets of designing with CSS) (inglese)

* Separare l'azione dalla presentazione:
Behavioral Separation (inglese)

* Eliminare gli attributi presentazionali


Un video per principianti/beginners sullo sviluppo xhtml+css
http://css-tricks.com/video-screenca...e-very-basics/ (inglese)

[fcaldera]

2. Introduzione ai CSS / Guide online / Manuali cartacei


* Cosa sono i CSS:
Cosa sono i CSS

* Le specifiche del W3C
http://www.w3.org/Style/CSS/ (inglese)
CSS level 1 (inglese)
CSS level 2 (inglese)
CSS 2 (traduzione Diodati.org)
Traduzioni della documentazione W3C

* Le guide di HTML.it
Fogli di stile (CSS)

* Introduzione ai CSS (constile.org)
Introduzione ai CSS

* CSS Tutorial
I fogli di stile css
w3Schools (inglese)
Primi passi con HTML + CSS
Web Design References - CSS Tutorials

* Articoli sui CSS
Articoli CSS di HTML.it
Articoli CSS ExtrowebSite

---

* Manuali cartacei in lingua italiana

- Cascading Style Sheets. Guida pratica. Autori: Lie Hakon W., Bos Bert
Pearson Education Italia, 2006

- CSS, Guida completa. Autore: Troiani Gianluca
Apogeo, 2005 (Errata corrige ed esempi del libro disponibili su
http://www.constile.org/css_guida_completa/ )

- Lo zen e l'arte del Web con il CSS. Autori: Shea Dave, Holzschlag Molly E.
Mondadori Informatica, 2005

- Cascading style sheets. La guida completa. Autore: Meyer Eric A.
Tecniche Nuove, 2004, 2ª ed.

- HTML e CSS. Subito e facile. Autore: Holzschlag Molly E.
Mondadori Informatica, 2005

- Cascading Style Sheet (CSS). Autore: L.Molina
Hoepli (2002)

- Guida ai CSS. 101 trucchi, segreti e soluzioni. Autore: Andrew Rachel
Hoepli (2005)

[fcaldera]

3. Box model e Posizionamento / Layout


* Il Box Model
Il box model
box model CSS 2

* Posizionamento
Learn CSS Positioning in Ten Steps (inglese)
CSS Positioning (inglese)
Position is Everything (inglese)

* Layout Tableless
Dalle tabelle al layout tableless
Gettare le tabelle fuori dalla finestra
CSS e tabelle a confronto
Tecniche di impaginazione coi CSS: per divertimento e profitto (inglese)
Layout tabellare senza tabelle
Creazione di un layout senza tabelle
Creare un Layout tableless con i CSS e la tecnica del "Floating"

* Float
Float: teoria e pratica
Floatutorial (inglese)
Containing Floats (inglese)
Easyclearing (inglese)
Simple Clearing of Floats (inglese)
Centrare float: elementi float centrati (inglese)
Centering float left menu (inglese)

---

* Layout (generale)
LayoutGala
CSS Layout
Guida Layout dei siti con i CSS
Layout con margini negativi
List of Layouts CSSPlay (inglese)
53 CSS-Techniques You Couldn't Live Without (inglese)

* Layout (2 colonne)
Layout liquido a 2 colonne con i CSS (HTML.it)

* Layout (3 colonne)
Layout 3 colonne (Constile)
Layout di base a tre colonne (Constile)

[fcaldera]

4. Menu, Form e altri elementi


4.1 Menu

Menu CSS (HTML.it)
Sliding Doors of CSS (inglese)
CSS tabs with Submenus (inglese)
CSS Tabs (inglese)
Mountaintop Corners (inglese)
Navigation menus (inglese)

---

4.2 Form

* Form accessibili
Prettier Accessible Forms (inglese)
Accessible Forms (inglese)

* Form tableless
http://jeffhowden.com/code/css/forms/ (inglese)

* Two columns Form
http://www.websiteoptimization.com/speed/tweak/forms/ (inglese)

* Form e CSS
styling Form controls with css revisited (inglese)
A form with style (inglese)
Logica e stile dei form html
Impaginare i form
Moduli con stile: usare i CSS con i form
I Form: segreti e trucchi di personalizzazione
6 test sui form

---

4.3 HR (Horizontal Rules)

Horizontal Rulez OK! (inglese)
Styling HR (inglese)
Styling <hr> with CSS (inglese)
Horizontal Line (inglese)

[fcaldera]

5 Software / Risorse online / Metodologie per lavorare con i CSS

5.1 Browser e Software

* Browsers
Mozilla
Opera
Amaya
Archivio browser
IE all versions
Archivio Safari
Multiple IE (Per installare IE dalla versione 3.0 alla 6.0 in versione standalone con il supporto dei commenti condizionali/sessioni in un unico installer)

* Plugin/Estensioni per Firefox
Dust me Selectors
Webdeveloper Toolbar

* Software
CSS tab designer

---

5.2 Validatori, simulatori e tool di verifica

* Emulatori di browser online
Browsershots

* Validatori
Unicorn - W3C's Validatore Unificato
CSS Validation Service

* Tool di verifica e riparazione dell'accessibilità
Tidy (inglese)
Evaluation, Repair, and Transformation Tools for Web Content Accessibility (inglese)

---

5.3 Ottimizzazione

* Testing e ottimizzazione
Risoluzione dei problemi dei CSS
HTML.it - Tutti gli Explorer insieme su Windows
HTML.it - Ottimizzare i CSS
CSS Shorthand Guide (inglese)
70 Expert Ideas For Better CSS Coding (inglese) [13/07/2015]
9 Expert CSS Ideas You Should Think Twice About Before Using (inglese) [10/05/2007]

* Compressori/ ottimizzatori CSS
CSS optimiser (inglese)
Clean CSS (inglese)

[fcaldera]

6. CSS Hacks / CSS bugs / Suggerimenti utili


6.1 CSS Hacks / CSS bugs

* Hacks
CSS contents and browser compatibility (inglese)
Min-Width for Internet Explorer (inglese)
CSS Hack ed IE7
Su hasLayout
Webdevout (inglese)

* Bugs
positioniseverything (inglese)
Explorer z-index bug (inglese)
Bug Reports for Explorer Windows (inglese)
Risolvere i bug di visualizzazione di Internet Explorer

* Filtri CSS
http://www.idest.com/csshacks/files.htm (inglese)
Commenti Condizionali in CSS (inglese)
Commenti Condizionali - Quircksmode (inglese)
Commenti Condizionali - CSSPlay (inglese)
Opera Filters (in inglese)

* Image Replacement
Le tecniche di Image Replacement
Rimpiazzare immagini con la LIR

* Usare la trasparenza con il formato PNG
Usare il formato PNG su Internet Explorer
Cross-Browser Variable Opacity with PNG: A Real Solution
Partial Opacity

---

6.2 Suggerimenti utili

* Angoli arrotondati:
Nifty Corners Cube - freedom to round
Modular corners

* Suggerimenti su layout e tecniche sui CSS
http://realworldstyle.com/

* Le Demo di CSSPlay
http://www.cssplay.co.uk/menu/

* Hoverbox Image Gallery
http://sonspring.com/journal/hoverbox-image-gallery

* Galleria Fotografica con CSS
http://www.webreference.com/programm...s/gallery.html

* Grafici a Barre
http://meyerweb.com/eric/css/edge/bargraph/demo.html
http://www.terrill.ca/design/vertical_bar_graphs/

* Menu verticali con i CSS
http://www.alistapart.com/articles/dropdowns
http://meyerweb.com/eric/css/edge/menus/demo.html
http://www.htmldog.com/articles/suckerfish/dropdowns/
http://www.constile.org/template/menu_verticali/

* Menu a Tab / linguette
http://www.alistapart.com/articles/slidingdoors/

* Liste con list-a-matic
http://css.maxdesign.com.au/listamatic/

* Rater / Votazioni in CSS
http://blog.html.it/demo/starrater/star.html
http://www.robarov.be/rate/
http://www.pmob.co.uk/temp/star-rating.htm [28/05/2007]

* Bordi sfumati
http://www.alistapart.com/articles/cssdropshadows/

* Testo con margine obliquo/Curvelicious
http://meyerweb.com/eric/css/edge/raggedfloat/demo.html
http://meyerweb.com/eric/css/edge/slantastic/demo.html

* CSS Switcher
http://www.alistapart.com/articles/bodyswitchers/

* Pullquotes (citazioni)
http://www.pearsonified.com/2006/09/...r_your_blo.php
http://css.html.it/articoli/leggi/57...g-con-i-css/6/

* Banner in percentuale con immagine di sfondo
http://gabrieleromanato.altervista.o...rcentuale.html

* CSS per la stampa
http://www.alistapart.com/articles/goingtoprint/

* Stampare un libro con i CSS
http://www.alistapart.com/articles/boom
http://gabrieleromanato.altervista.o...rea-con-i-css/

* Supporto dei CSS nelle email
http://www.html.it/articoli/email-co...-html-e-css-1/
http://www.w3.org/TR/html4/index/attributes.html (lista attributi presentazionali e non - HTML4)

* Preload immagini per rollover di link (hover)
http://wellstyled.com/css-nopreload-rollovers.html

[fcaldera]

7. Link utili a risorse relative ai CSS


* in italiano
Diodati
Constile
Gdesign
Gabriele Romanato
Dieci risorse, centinaia di link

* in inglese
Web Standards Project
CSS incutio
Brainjar
Quirksmode
Tantek Site
A list apart
Complexspiral
CSS Play
CSSzengarden
Mezzoblue
Webtypography
Meyerweb
Andy Budd (Well Designed CSS Sites)
Verlee Site

[fcaldera]

8. Pillole degli utenti

* Contatori e contenuto generato in Firefox e Opera (thomas_anderson)
* Min e max su IE6 e precedenti (andrea.paiola)
* Min e max su IE6 e precedenti - 2 (andrea.paiola)
* FabClearing, float clearing crossbrowser (fcaldera)
* Banner in percentuale con immagine di sfondo (thomas_anderson)
* Grafica dei moduli (Federix)
* 3 colonne con float (thomas_anderson)
* Sfarfallamento (flicker) su IE6 (andrea.paiola)
* 2 concetti di architettura dell'informazione (andrea.paiola)
* Accessibilità è anche leggibilità (thomas_anderson)
* Colorare la Scroll Bar (boolbo)
* CSS 1 - principali compatibilità, note ed esempi (Robycz)
* CSS, Accessibilità e grafica (vari contributi)
* Markup semantico: esempi dei suoi vantaggi (pierofix et.al.)
* the css switch project (thomas_anderson)
* IE5 Windows test (thomas_anderson)
* CSS art: astrattismo (thomas_anderson)
* blog layout: compatibilità IE5 (thomas_anderson)
* foglio di stile di default: FF 1.5 e specifiche CSS (thomas_anderson)
* Sulla traduzione delle specifiche CSS2 (thomas_anderson)
* CSS test (thomas_anderson)
* CSS hacks: prontuario
* risoluzione bug su IE (thomas_anderson)
* resettare il layout di default dei bottoni in Opera (thomas_anderson)
* listato di directory con i css (thomas_anderson)
* due immagini di sfondo sulla stessa pagina (thomas_anderson)

[thomas_anderson]

http://forum.html.it/forum/showthrea...readid=1069502