Difference between revisions of "HTML/CSS"
Jump to navigation
Jump to search
| Line 1: | Line 1: | ||
{{techy}} | {{techy}} | ||
| − | + | to merge from bits of design. | |
| + | |||
| + | == Specificity == | ||
p has a specificity of 1 (1 HTML) | p has a specificity of 1 (1 HTML) | ||
div p has a specificity of 2 (2 HTML; 1+1) | div p has a specificity of 2 (2 HTML; 1+1) | ||
| Line 13: | Line 15: | ||
* http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ | * http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ | ||
| − | + | == Positioning == | |
display: block - default 100% width, flows vertically | display: block - default 100% width, flows vertically | ||
display: inline - consumes width of content, flows horizontally | display: inline - consumes width of content, flows horizontally | ||
| Line 30: | Line 32: | ||
* http://paulirish.com/2012/box-sizing-border-box-ftw/ [http://www.jefftk.com/news/2012-02-18.html] | * http://paulirish.com/2012/box-sizing-border-box-ftw/ [http://www.jefftk.com/news/2012-02-18.html] | ||
| − | === background | + | == Responsive == |
| + | * http://webdesignerwall.com/tutorials/css-elastic-videos | ||
| + | |||
| + | == background == | ||
* http://whereswalden.com/files/mozilla/background-size/more-examples.html | * http://whereswalden.com/files/mozilla/background-size/more-examples.html | ||
* http://www.impressivewebs.com/image-tint-blend-css/ | * http://www.impressivewebs.com/image-tint-blend-css/ | ||
| − | + | == Animations & transitions == | |
* http://www.jasondavies.com/animated-bezier/ | * http://www.jasondavies.com/animated-bezier/ | ||
| − | + | == Resets, etc. == | |
* https://github.com/necolas/normalize.css/wiki [http://stackoverflow.com/questions/6887336/what-is-the-different-between-normalize-css-and-reset-css] | * https://github.com/necolas/normalize.css/wiki [http://stackoverflow.com/questions/6887336/what-is-the-different-between-normalize-css-and-reset-css] | ||
** http://nicolasgallagher.com/about-normalize-css/ | ** http://nicolasgallagher.com/about-normalize-css/ | ||
| Line 44: | Line 49: | ||
* http://html5boilerplate.com/docs/css/ | * http://html5boilerplate.com/docs/css/ | ||
| − | + | == Grid == | |
* http://blog.centresource.com/2009/06/15/6-tips-and-tricks-for-designing-with-960/ | * http://blog.centresource.com/2009/06/15/6-tips-and-tricks-for-designing-with-960/ | ||
* http://divitodesign.com/css/tricks-to-solve-960-css-framework-problems/ | * http://divitodesign.com/css/tricks-to-solve-960-css-framework-problems/ | ||
| − | + | == Vertical rhythm == | |
* [http://webtypography.net/toc/ The Elements of Typographic Style Applied to the Web] | * [http://webtypography.net/toc/ The Elements of Typographic Style Applied to the Web] | ||
** [http://webtypography.net/toc#Vertical_Motion Vertical Motion] | ** [http://webtypography.net/toc#Vertical_Motion Vertical Motion] | ||
| Line 58: | Line 63: | ||
* https://github.com/pyrsmk/vertical-rhythmic - sass mixins (no sure if worth it) | * https://github.com/pyrsmk/vertical-rhythmic - sass mixins (no sure if worth it) | ||
| − | + | == Typography == | |
* [http://drewish.com/tools/vertical-rhythm CSS with vertical rhythm] - drewish.com | * [http://drewish.com/tools/vertical-rhythm CSS with vertical rhythm] - drewish.com | ||
* [http://lamb.cc/typograph/ Scale & Rhythm] | * [http://lamb.cc/typograph/ Scale & Rhythm] | ||
| − | + | == Font symbols == | |
* http://news.ycombinator.com/item?id=3672526 | * http://news.ycombinator.com/item?id=3672526 | ||
* http://news.ycombinator.com/item?id=3675301 | * http://news.ycombinator.com/item?id=3675301 | ||
| − | + | == Sprites == | |
* http://www.phpied.com/command-line-css-spriting/ | * http://www.phpied.com/command-line-css-spriting/ | ||
| − | + | == Header, footer == | |
* http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height | * http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height | ||
| − | + | == Menus == | |
* http://stackoverflow.com/questions/2865380/how-do-i-center-align-horizontal-ul-menu | * http://stackoverflow.com/questions/2865380/how-do-i-center-align-horizontal-ul-menu | ||
| − | + | == Gradients == | |
* [http://www.colorzilla.com/gradient-editor/ ColorZilla Ultimate CSS Gradient Generator] | * [http://www.colorzilla.com/gradient-editor/ ColorZilla Ultimate CSS Gradient Generator] | ||
| − | + | == Misc == | |
* http://mathiasbynens.be/notes/css-without-html | * http://mathiasbynens.be/notes/css-without-html | ||
Revision as of 00:00, 2 June 2012
to merge from bits of design.
Specificity
p has a specificity of 1 (1 HTML) div p has a specificity of 2 (2 HTML; 1+1) .sith has a specificity of 10 (1 class) div p.sith has a specificity of 12 (2 HTML and a class; 1+1+10) #sith has a specificity of 100 (1 id) body #darkside .sith p has a specificity of 112 (HTML, id, class, HTML; 1+100+10+1)
![[3]](http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg){kind=link}
- http://twostepmedia.co.uk/cssselectors/
- http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
Positioning
display: block - default 100% width, flows vertically display: inline - consumes width of content, flows horizontally display: inline-block http://www.quirksmode.org/css/display.html
float - floats element next to containing box or other floated element
position: absolute - out of flow
rgba(0, 0, 0, 0.2) - shadow
Tips
Responsive
background
Animations & transitions
Resets, etc.
Grid
- http://blog.centresource.com/2009/06/15/6-tips-and-tricks-for-designing-with-960/
- http://divitodesign.com/css/tricks-to-solve-960-css-framework-problems/
Vertical rhythm
- The Elements of Typographic Style Applied to the Web
- http://24ways.org/2006/compose-to-a-vertical-rhythm - oft' linked to
- https://github.com/pyrsmk/vertical-rhythmic - sass mixins (no sure if worth it)
Typography
- CSS with vertical rhythm - drewish.com
- Scale & Rhythm