{"id":681,"date":"2017-09-17T05:52:11","date_gmt":"2017-09-17T05:52:11","guid":{"rendered":"http:\/\/frowningbear.com\/blog\/?page_id=681"},"modified":"2018-05-29T06:14:34","modified_gmt":"2018-05-29T06:14:34","slug":"css","status":"publish","type":"page","link":"https:\/\/frowningbear.com\/codebase\/css\/","title":{"rendered":"CSS"},"content":{"rendered":"

Just a compiled list of links for working with Cascading Style Sheets (CSS)<\/p>\n

Transitions and Animations<\/h3>\n
\n
CSS: Animation vs. Transition – Stack Overflow<\/a><\/dt>\n
<\/dd>\n
CSS Transitions VS Keyframe Animations | Bryan Braun – Student of Life<\/a><\/dt>\n
<\/dd>\n
Transitions vs Animations – CSS Animation<\/a><\/dt>\n
When animating on the web, do you use a transition or an animation?<\/dd>\n
CSS3: Animations vs. Transitions | kirupa.com<\/a><\/dt>\n
Know when to use animations or transitions by learning about the similarities and differences between them.<\/dd>\n
Cagematch: CSS Animations VS Transitions<\/a><\/dt>\n
<\/dd>\n
Animate.css<\/a><\/dt>\n
<\/dd>\n
Intro to CSS 3D transforms<\/a><\/dt>\n
<\/dd>\n
Myth Busting: CSS Animations vs. JavaScript | CSS-Tricks<\/a><\/dt>\n
The following is a guest post by Jack Doyle, author of the GreenSock Animation Platform (GSAP).<\/dd>\n<\/dl>\n

Floats<\/h3>\n
\n
Containing Floats (Complex Spiral Consulting)<\/a> – August 25th, 2003<\/em><\/dt>\n
<\/dd>\n
Clearing a float container without source markup<\/a> – May 4th, 2004<\/em><\/dt>\n
<\/dd>\n
Simple Clearing of Floats<\/a> – February 26, 2005<\/em><\/dt>\n
<\/dd>\n
mezzoblue \u00a7 Clearance<\/a> – March 3rd, 2005<\/em><\/dt>\n
<\/dd>\n
Clearing floats the overflow way – QuirksBlog<\/a> – March 8th, 2005<\/em><\/dt>\n
<\/dd>\n
CSS Float Theory: Things You Should Know \u2013 Smashing Magazine<\/a> – May 1st, 2007<\/em><\/dt>\n
<\/dd>\n
The Mystery Of The CSS Float Property \u2013 Smashing Magazine<\/a> – October 19th, 2009<\/em><\/dt>\n
<\/dd>\n
CSS Floats 101 \u00b7 An A List Apart Article<\/a> – March 8th, 2011<\/em><\/dt>\n
<\/dd>\n<\/dl>\n

Positioning<\/h3>\n
<\/dl>\n
CSS Positioning 101 \u00b7 An A List Apart Article<\/a><\/dt>\n
<\/dd>\n
The Definitive Guide to Using Negative Margins \u2013 Smashing Magazine<\/a><\/dt>\n
<\/dd>\n
Creating Liquid Layouts with Negative Margins \u00b7 An A List Apart Article<\/a><\/dt>\n
<\/dd>\n
How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)? – Stack Overflow<\/a><\/dt>\n
<\/dd>\n<\/dl>\n

Centering things with CSS horizontally and vertically<\/h3>\n
\n
Centering in CSS: A Complete Guide | CSS-Tricks<\/a><\/dt>\n
<\/dd>\n
Z63 | Vertical align anything with just 3 lines of CSS | zerosixthree<\/a><\/dt>\n
<\/dd>\n
6 Methods For Vertical Centering With CSS – Vanseo Design<\/a><\/dt>\n
<\/dd>\n
Absolute Horizontal And Vertical Centering In CSS \u2013 Smashing Magazine<\/a><\/dt>\n
Perfect horizontal *and* vertical centering in CSS, at any width or height!<\/dd>\n
CSS Vertical Center<\/a><\/dt>\n
Learn how to use CSS to vertically center HTML elements!<\/dd>\n
CSS: centering things<\/a><\/dt>\n
<\/dd>\n
How to center a picture on a web page using HTML<\/a><\/dt>\n
<\/dd>\n
html – Center image using text-align center? – Stack Overflow<\/a><\/dt>\n
<\/dd>\n
Tips for Aligning Icons to Text | CSS-Tricks<\/a><\/dt>\n
<\/dd>\n<\/dl>\n

Layout<\/h3>\n
\n
CSS layout – Learning web development | MDN<\/a><\/dt>\n
<\/dd>\n
Practical CSS Layout Tips, Tricks, & Techniques \u00b7 An A List Apart Article<\/a><\/dt>\n
<\/dd>\n
Faux Columns \u00b7 An A List Apart Article<\/a><\/dt>\n
<\/dd>\n
A Complete Guide to Grid | CSS-Tricks<\/a><\/dt>\n
<\/dd>\n
Grid by Example – Usage examples of CSS Grid Layout<\/a>\/dt><\/dt>\n
<\/dd>\n
A Complete Guide to Flexbox | CSS-Tricks<\/a><\/dt>\n
<\/dd>\n
CSS3 Flexible Box Layout Explained \u2013 Smashing Magazine<\/a><\/dt>\n
<\/dd>\n<\/dl>\n

Units<\/h3>\n
\n
Building Resizeable Components with Relative CSS Units | CSS-Tricks<\/a><\/dt>\n
<\/dd>\n
Font Size Idea: px at the Root, rem for Components, em for Text Elements | CSS-Tricks<\/a><\/dt>\n
<\/dd>\n
Back to the :roots<\/a><\/dt>\n
<\/dd>\n
mezzoblue \u00a7 css Zen Garden Design List<\/a><\/dt>\n
<\/dd>\n
CSS reference – CSS | MDN<\/a><\/dt>\n
<\/dd>\n
CSS Reference<\/a><\/dt>\n
<\/dd>\n
Selectutorial: CSS selectors<\/a><\/dt>\n
<\/dd>\n
Selectors – Web developer guides | MDN<\/a><\/dt>\n
<\/dd>\n
CSS Selectors Reference<\/a><\/dt>\n
<\/dd>\n
CSS display: inline-block: why it rocks, and why it sucks – Robert’s talk<\/a><\/dt>\n
<\/dd>\n
div and span: display = ‘block’, ‘inline’, or ‘inline-block’ ?<\/a><\/dt>\n
<\/dd>\n
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them | CSS-Tricks<\/a><\/dt>\n
This article has been revised and re-written several times since its very first publication in 2007, to keep the information current.<\/dd>\n
TACHYONS – css Toolkit<\/a><\/dt>\n
<\/dd>\n
Media Query splitting<\/a><\/dt>\n
<\/dd>\n
We\u2019re in an icon-sharpness limbo<\/a><\/dt>\n
<\/dd>\n
2 Even Width Bootstrap Columns<\/a><\/dt>\n<\/dl>\n","protected":false},"excerpt":{"rendered":"

Just a compiled list of links for working with Cascading Style Sheets (CSS) Transitions and Animations CSS: Animation vs. Transition – Stack Overflow CSS Transitions VS Keyframe Animations | Bryan Braun – Student of Life Transitions vs Animations – CSS Animation When animating on the web, do you use a transition or an animation? CSS3: … Continue reading “CSS”<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-681","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/pages\/681","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/comments?post=681"}],"version-history":[{"count":1,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/pages\/681\/revisions"}],"predecessor-version":[{"id":1222,"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/pages\/681\/revisions\/1222"}],"wp:attachment":[{"href":"https:\/\/frowningbear.com\/codebase\/wp-json\/wp\/v2\/media?parent=681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}