Difference between revisions of "Css"
From Wiki2
(Created page with "===css=== http://css.maxdesign.com.au/index.htm ===xslt=== ===http://www.tonymarston.net/php-mysql/client-side-xslt.html=== ===http://www.developer.com/xml/article.php/363052...") |
|||
| (24 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
=== | ===my notes=== | ||
===http://www. | ====lists==== | ||
===http://www. | * http://balloob.github.io/react-sidebar/example/responsive_example.html | ||
===http://www. | * http://www.w3schools.com/css/css_navbar.asp | ||
=== | * http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button | ||
=== | * lists http://designshack.net/articles/css/5-simple-and-practical-css-list-styles-you-can-copy-and-paste/ | ||
====flexbox==== | |||
*https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/ | |||
*https://css-tricks.com/snippets/css/a-guide-to-flexbox/ | |||
*http://stackoverflow.com/questions/20566660/3-column-layout-html-css | |||
*position relative doesn't work unless the container div is itself floated | |||
===buttons=== | |||
http://www.smashingmagazine.com/2009/11/designing-css-buttons-techniques-and-resources/ | |||
===[http://cssfontstack.com/ fonts]=== | |||
===[http://www.w3schools.com/cssref/css_colornames.asp colors]=== | |||
===floats and clears=== | |||
http://css-tricks.com/all-about-floats/ | |||
clearing floats | |||
*The Empty Div Method is, quite literally, an empty div. <div style="clear: both;"></div> | |||
*The Overflow Method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements | |||
*The Easy Clearing Method uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class like "clearfix" to it. Then apply this CSS: | |||
<source lang="css"> | |||
.clearfix:after { | |||
content: "."; | |||
visibility: hidden; | |||
display: block; | |||
height: 0; | |||
clear: both; | |||
} | |||
</source> | |||
===Resposive web design=== | |||
:http://learn.shayhowe.com/advanced-html-css/responsive-web-design/ | |||
:http://gumbyframework.com/ built on saas | |||
:http://gumbyframework.com/docs/claymate/#!/ | |||
:http://www.getskeleton.com/ | |||
===color schemes=== | |||
http://www.color-wheel-pro.com/color-schemes.html | |||
https://kuler.adobe.com/#create/fromacolor | |||
===tutorials=== | |||
:http://www.designer-daily.com/tutorial-how-to-code-your-psd-into-a-html-css-layout-15632 | |||
:http://css.maxdesign.com.au/index.htm | |||
:missing manual tutorials in c://tim/books/teck/missing... | |||
Latest revision as of 21:03, 6 February 2016
my notes
lists
- http://balloob.github.io/react-sidebar/example/responsive_example.html
- http://www.w3schools.com/css/css_navbar.asp
- http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button
- lists http://designshack.net/articles/css/5-simple-and-practical-css-list-styles-you-can-copy-and-paste/
flexbox
- https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- http://stackoverflow.com/questions/20566660/3-column-layout-html-css
- position relative doesn't work unless the container div is itself floated
buttons
http://www.smashingmagazine.com/2009/11/designing-css-buttons-techniques-and-resources/
fonts
colors
floats and clears
http://css-tricks.com/all-about-floats/ clearing floats
- The Empty Div Method is, quite literally, an empty div.
- The Overflow Method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements
- The Easy Clearing Method uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class like "clearfix" to it. Then apply this CSS:
<source lang="css"> .clearfix:after {
content: "."; visibility: hidden; display: block; height: 0; clear: both;
} </source>
Resposive web design
color schemes
http://www.color-wheel-pro.com/color-schemes.html https://kuler.adobe.com/#create/fromacolor
tutorials
- http://www.designer-daily.com/tutorial-how-to-code-your-psd-into-a-html-css-layout-15632
- http://css.maxdesign.com.au/index.htm
- missing manual tutorials in c://tim/books/teck/missing...
