css cheat sheet
https://hackpad.com/PSD-to-HTML-Instructions-Guidelines-WzxGCccNO8M
https://blog.omgmog.net/post/why-your-reasons-for-no-longer-using-a-css-pre-processor-are-wrong/
font suff / size conversion table
http://www.abdullahyahya.com/2011/10/convert-photoshop-font-point-pt-to-pixels-px/
http://www.smashingmagazine.com/2012/04/a-closer-look-at-font-rendering/
Remove bottom margin from img
-
<img src="your-image.jpg" style="vertical-align: bottom;">
background fade transition
transition: background 0.6s ease 0s;
allow to break words
a, a:visited {
word-wrap: break-word;
}
responsive resizing while keeping an aspect ratio
From http://www.mademyday.de/css-height-equals-width-with-pure-css.html
template:
<div class="box" <?php echo ull_rimg_bg_attributes('image.jpg') ?>> <div class="box_content"> <h2>foo</h2> bar baz </div> </div>
css:
.box { position: relative; width: 50%; /* desired width */ background-repeat: no-repeat; background-size: cover; background-position: center; } .box:before{ content: ""; display: block; padding-top: 50%; /* aspect ratio */ } .box_content{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
complete responsive centering
<div class="container"> <div class="box"> <h2>Hello</h2> <p>Some content</p> </div> </div> .container { display: table; width: 100%; height: 100%; /* If you want "min-height" here, it's not allowed for tables. Use "height" instead, the table grows anyway */ /* Do not use horizontal padding here as it busts width: 100% */ } .box { display: table-cell; text-align: center; vertical-align: middle; /* You cannot use margin for table cells, use padding instead */ }
center multiple responsive fixed-width items
<div class="container"> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> </div> .container { text-align: center; } .container ul { list-style-type: none; } .container li { display: inline-block; text-align: left; vertical-align: top; width: 226px; margin: 0 10px 1em 10px; padding: 0 15px; }
same as above, but left align the items, still center the whole block
using custom fitContent() function from miscellaneous.js
<!-- HTML --> <div class="container"> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> </div> <script type="text/javascript"> $(window).load(function() { $(".container ul").fitContent(); $(window).resize(function() { $(".container ul").fitContent(); }); }); </script> /* CSS */ .container { } .container ul { list-style-type: none; } .container li { display: inline-block; text-align: left; vertical-align: top; width: 226px; padding: 0 15px; }
Same as above but without javascript by omitting the unordered list
<div class="items"> <div class="item"> ... </div ... </div> CSS: .items { overflow: hidden; margin: 0 auto; display: table; } .item { float: left; width: 300px; }
z-index issues
Every z-index statement needs "position:" to be explictly set!
http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
vertical center of image in a div
set line-height = div height, set image vertical-align:middle
img in div creates bottom space
put img in div. float img left. overflow hidden on div.
logo/intro total centering
<div id="intro_container"> <div id="intro"> <?php echo link_to(image_tag('/images/intro.gif'), '@homepage') ?> </div> </div>
html, body { height: 100%; } #intro_container { position:relative; height: auto !important; /* normale Browser */ height: 100%; /* IE6: setzt dies wie min-height um*/ min-height: 100%; /* normale Browser */ } #intro { position: absolute; top: 50%; left: 50%; height: 338px; width: 600px; margin-top: -169px; /* negative half of the height */ margin-left: -300px; /* negative half of the height */ }
Inspect mouseover elements (Firebug)
For Javascript events such as Mouse over.
- Open Firebug/Inspect an element.
- Click on the element before the mouseover event, e.g. click on a div. It will turn blue to show it is selected.
- Put your mouse over the element and don't move it from this point forward.
- Use your ?/? arrow keys to manoeuvre in Firebug.
- Use your ?/? arrow keys to expand/contract code with + or -.
- Double tap Tab to get to the CSS pane.
- Use the arrow keys to navigate. Use shift and arrow keys to select text. Ctrl & C to copy.
- Hold Shift and double tap Tab to get back to the HTML pane.
@see http://stackoverflow.com/a/28174018/4968441
Multi Column (column-count)
Avoid list item ugliness:
<ul style="column-count: 2;"> <li style="break-inside: avoid;"></li> ... </ul>