A few clever CSS tricks: 1. Styling elements w/ inline bg image differently: [s…

A few clever CSS tricks:

1. Styling elements w/ inline bg image differently:
[style*="url(http"] { /* style */ }

2. Perfect vertical alignment:
.parent { display:flex; } .child { margin: auto; }
You'll need a height for the .parent for vertical alignment http://codepen.io/maddesigns/pen/KwdPjZ

3. Flex to make borders that end around text http://ift.tt/1xUmST0 * {display: flex} for fun. Stylus for profit. (via @Jekrb)

4. No extra margin below images with display: inline-block, vertical-align: middle.

5. .ie10 { flex-basis: 0; }, old flexbox in IE10. It enables a flex-child to expand, which it normally should do with ‘auto’. via @_munter_


bNdMBZ
codepen.io

more @ http://www.facebook.com/smashmag/posts/10152903640862490

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s