Difference between revisions of "HTML/CSS"
Jump to navigation
Jump to search
| Line 46: | Line 46: | ||
* http://blog.themeforest.net/tutorials/vertical-centering-with-css/ [http://douglasheriot.com/tutorials/css_vertical_centre/demo4.html] | * http://blog.themeforest.net/tutorials/vertical-centering-with-css/ [http://douglasheriot.com/tutorials/css_vertical_centre/demo4.html] | ||
* http://css-tricks.com/what-is-vertical-align/ | * http://css-tricks.com/what-is-vertical-align/ | ||
| + | * http://www.barelyfitz.com/screencast/html-training/css/positioning/ | ||
=== Tips === | === Tips === | ||
| Line 69: | Line 70: | ||
== Resets, etc. == | == Resets, etc. == | ||
| + | * http://necolas.github.com/normalize.css/ | ||
| + | * http://html5boilerplate.com/ | ||
| + | |||
* 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/ | ||
Revision as of 00:49, 15 June 2012
to merge from bits of design.
General
- http://htmlhelp.com/reference/css/structure.html
- https://github.com/necolas/idiomatic-css
- http://www.betaversion.org/~stefano/linotype/news/169/
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}
Selectors
- http://twostepmedia.co.uk/cssselectors/
- http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
h1 + h2 <h1></h1><h2></h2> h1 > h2 <h1><h2></h2></h1>
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
- https://github.com/andreasbovens/understanding-viewport
- http://www.brainjar.com/css/positioning/default.asp
- http://blog.themeforest.net/tutorials/vertical-centering-with-css/ [5]
- http://css-tricks.com/what-is-vertical-align/
- http://www.barelyfitz.com/screencast/html-training/css/positioning/
Tips
Responsive
- http://webdesignerwall.com/tutorials/css-elastic-videos
- http://drupal.org/node/1413558
- http://drupal.org/node/1535954
- http://groups.drupal.org/node/233238
- http://drupal.org/project/fitvids - js lib
background
Animations & transitions
- https://developer.mozilla.org/en/CSS/CSS_animations
- http://www.jasondavies.com/animated-bezier/
- http://daneden.me/animate/
Resets, etc.
Grid
- http://grids.heroku.com/
- http://www.gridsystemgenerator.com/gs01.php
- http://gridpak.com/
- http://www.designbygrid.com/tools
- 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://hashgrid.com/ - js grid display
Vertical rhythm
- The Elements of Typographic Style Applied to the Web
- http://24ways.org/2006/compose-to-a-vertical-rhythm - oft' linked to
Web
- http://www.gridlover.net/
- http://drewish.com/tools/vertical-rhythm - calculator, px based
- http://topfunky.com/baseline-rhythm-calculator/ - px based
- http://lamb.cc/typograph/ - Scale & Rhythm - fucking weird paddings
JS
Bookmarklets
- http://gridwax.gs/ - great
- http://sfcgeorge.github.com/Grid-Bookmarklet/
- http://scribu.net/util/baseline-checker-bookmarklet.html
CSS
Sass
- http://compass-style.org/reference/compass/typography/vertical_rhythm/ - px based
- https://github.com/pyrsmk/vertical-rhythmic - em based
- https://github.com/OliverJAsh/vertical-rhythm - em based
Font symbols
Sprites
Menus
Gradients
Misc
- http://davatron5000.github.com/deCSS3/ - bookmarklet to test pre css3 browsers
- http://www.youtube.com/watch?v=a2_6bGNZ7bA Faster HTML and CSS: Layout Engine Internals for Web Developers