Latest revision as of 13:03, 28 March 2016

CSS3

by paul.plaquette, Senior Software Engineer, Trilda Open Source

NeXT Steps

  here everything has yet to be done !

coming soon :

Everything You Always Wanted to Know About Cascading Style Sheet version 3... (But Were Afraid to Ask) B)

See also

• Main_Page

• HyperText
• HTML
• HTML5
• HTML5 Gaming
• HTML5 Demos
• HTML5 Tutorials
• xHTML
• XML
• JSON
• CSS
• CSS3
• JavaScript
• JavaScript Frameworks
• Cordova, a framework previously know as PhoneGap
• Web Blogs
• Web Browsers
• Web Hybrid Apps
• Web Native Extension and plugins
• Web Formats
• Web Technologies Reference
• Web APIs
• Web Tools
• Web Presentation Tools
• Semantic Web and Data Web

• FullStack
• FrontEnd
• BackEnd

Language

Elements

Properties

* http://meiert.com/en/indices/css-properties/

Variables

Values

Selectors

Typography

Regions

Exclusions

Breaks

Media Queries

Principles

HTML

JavaScript

Tags

Tags Catalog

File Formats

CSS3 Design Patterns

CSS3 Tutorials

• CSS3 Tutorials

• http://www.w3.org/Talks/2010/0313-Fonts-SXSW/
• http://meiert.com/en/indices/css-properties/

• https://developer.mozilla.org/en-US/docs/CSS
• http://webdesign.tutsplus.com/tutorials/

• http://www.w3.org/Style/CSS/learning
• http://www.w3.org/wiki/CSS/Training
• http://www.html.net/
• http://www.w3.org/Talks/2012/0416-CSS-WWW2012/
• http://www.westciv.com/courses/index.html
• http://www.webreference.com/authoring/style/sheets/headlines/index.html
• http://www.cssplay.co.uk/
• http://reference.sitepoint.com/css

CSS3 Demos

• CSS3 Demos

• grids , http://gridbyexample.com/
• http://www.csszengarden.com/
• Simple as Milk: http://simpleasmilk.co.uk/
• Yebocreative: http://www.yebocreative.com
• CSS Filters effects : http://html5-demos.appspot.com/static/css/filters/index.html
• more demos: http://html5-demos.appspot.com/
• toggle CSS http://lab.simurai.com/css/stars/
• more demos: http://lab.simurai.com/

CSS3 Tools

Generation

• CSS3 editor: http://css3generator.com/
• CSS3 editor : http://css3maker.com/
• CSS3 Color Gradient Editor: http://www.colorzilla.com/gradient-editor/
• CSS3 Bezier curves editor: http://cubic-bezier.com/#.17,.67,.83,.67
• CSS3 generator (exist as an iOS app): http://procssor.com/process
• CSS3 compressor & minifyer: http://minifycss.com/css-compressor/
• CSS3 beautifier: http://www.codebeautifier.com/
• CSS3 beautify: http://cssbeautify.com/

• CSS3 editing:

* http://css3maker.com/
* http://css3pie.com/
* http://css3please.com/

• CSS3 grid:

* http://www.1kbgrid.com/
* http://grid.mindplay.dk/
* http://960.gs/
* http://www.designbygrid.com/tools
* http://grids.heroku.com/

• CSS3 Bezier & Splines: http://cubic-bezier.com/#.17,.67,.83,.67
• CSS3 Properties: http://meiert.com/en/indices/css-properties/
• Adobe Colors: https://kuler.adobe.com/#themes/rating?time=30

validation

• http://validator.w3.org/

test

• http://css3test.com/

CSS3 Frameworks/Tools

• http://sass-lang.com/
• https://github.com/anthonyshort/Scaffold/wiki
• http://learnboost.github.com/stylus/
• http://lesscss.org/
• http://www.knacss.com/
• http://leaverou.github.com/prefixfree/#
• http://selectivizr.com/
• http://960.gs/

CSS3 GuideLines, Best Practices, Advices

• google search engine: http://www.google.com/search?q=CSS3+Best+practices&aq=f&oq=CSS3+Best+practices&sourceid=chrome&ie=UTF-8
• Mozilla: https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS

Web UI Design Patterns

• UI Design Patterns
• Web UI Design Patterns

References

• http://meyerweb.com/eric/css/timelines/
• https://developer.mozilla.org/en-US/docs/CSS/CSS3

w3c

working group: 

• blog :

* http://www.w3.org/blog/CSS/
* http://www.w3.org/Style/CSS/current-work.en.html

• dev documents folder: http://dev.w3.org/csswg/

• CSS3 Variables:

* http://dev.w3.org/csswg/css-variables/

• CSS3 Fragmentations:

* http://www.w3.org/TR/css3-break/

• CSS3 Regions:

* http://dev.w3.org/csswg/css3-regions/
* http://www.w3.org/TR/css3-regions/

• CSS3 Exclusions:

* http://dev.w3.org/csswg/css3-exclusions/
* http://www.w3.org/TR/css3-exclusions/

• CSS3 Overflow:

* http://dev.w3.org/csswg/css3-overflow/

• CSS3 Flexible box:

* http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/

• Selectors:

* http://www.w3.org/TR/selectors4/

• Values:

* http://www.w3.org/TR/css3-values/

• test suites:

* http://dev.w3.org/cvsweb/CSS/

Web Sites

• Eric Meyer's Blog

* http://meyerweb.com/eric/

• Smashing Magazine

* http://coding.smashingmagazine.com/
* http://coding.smashingmagazine.com/tag/css/

• A List Apart:

* http://alistapart.com/
* http://alistapart.com/topics/code

• 24 ways.org

* http://24ways.org/

• HTML5 Boilerplate

* http://html5boilerplate.com

• Web Design Friday, 24 Ways (French)

* http://wdfriday.com

• Mozilla on CSS3

* https://developer.mozilla.org/en-US/docs/CSS/CSS3

• Open Web (French)

* http://openweb.eu.org/

• Alsacréation (French)

* http://www.alsacreations.com/

• Pompage.net (French)

* http://www.pompage.net/

• Css4Design (French)

* http://css.4design.tl/

• more blogs in french

* http://www.bertrandkeller.info/
* http://www.nicolas-hoffman.net/
* http://darkg.me/
* http://wwwhteumeuleu.fr/
* http:blog.goetter.fr

Books

Conferences

• Ampersand

* http://2012.ampersandconf.com/
* http://2013.ampersandconf.com/