CSS Resources


VW Units

Viewport Width Units Calculator Enter Pixel Unit Enter viewport width Click to get vw unit .field {max-width:250px;} $(document).ready(function() { $('.button a').click(function() { var pxValue = $('#pixel').val(); var vpwidth = $('#vpwidth').val(); var vwValue = parseFloat(pxValue / vpwidth) * 100; vwValue = vwValue + "vw"; $('.output label').text(vwValue); $('.output').show(); }); });

Responsive Sidebar

This code sample shows how to create responsive sidebars that can be toggled open or closed in wider desktop layouts. In a mobile layout, they become columns below the article content. demo This code sample shows how to create a responsive sidebar that fills the entire height of the page. Other CSS features include a fixed background image and universal box sizing with inheritance. demo

Element Count

This code sample shows a CSS only solution to define different styles for an element based on the total number of elements. This is handy when you have dynamic list content and want to style it differently for a certain number of list items. demo li { width: 49%; display: inline-block; text-align: center; } /* three items */ li:first-child:nth-last-child(3), li:first-child:nth-last-child(3) ~ li { width: 33%; } SASS Version li { width: 49%; display: inline-block; text-align: center; } @for $i from 3 through 5 { li:first-child:nth-last-child(#{$i}), li:first-child:nth-last-child(#{$i}) ~ li { width: #{100%/$i} } }


This code sample shows how to animate a background image using CSS. HTML <div class="banner-ani"></div> CSS .banner-ani { background-image: url(/sandbox/assets/image/cool-dog-bg.png); background-color: transparent; background-position: 0px -196px; background-repeat:no-repeat; width: 230px; height: 196px; /* after 2 seconds, provide a 1.5 second animation of the background image scrolling down from its pre-existing position of 0 -196px to 0 0 css animation does not work in <= ie9 */ -webkit-transition:all 1.5s ease; -moz-transition:all 1.

Responsive Hotspots

This code sample shows how to create hotspots for a responsive image entirely in CSS and HTML. When the image scales according to changes in viewport width, the hotspots and their respective tool tips will move accordingly. demo

Centering Content

Horizontal centering This is pretty straight forward and not an issue for consistent cross browser results. There are a couple of ways to horizontally center content. Skip ahead and read about vertical centering here. div[class^="centering-content-demo-"]{background-color:#fff;border:1px solid #ddd;} .centering-content-demo-1,.centering-content-demo-2,.centering-content-demo-3,.centering-content-demo-4{text-align:center;} .demo-1-img{width:50%;max-width:300px;margin:20px;} .demo-1-text-block{display:block;width:50%;max-width:300px;margin-bottom:20px;padding:6px;background-color:#e6e6e6;font-weight:bold;} .demo-1-text-inline-block{display:inline-block;width:50%;max-width:300px;margin-bottom:20px;padding:6px;background-color:#e6e6e6;font-weight:bold;} .demo-2-img{width:50%;max-width:300px;margin:20px;} .demo-2-text-block{display:block;width:50%;max-width:300px;margin:0 auto 20px auto;padding:6px;background-color:#e6e6e6;font-weight:bold;} .centering-content-demo-3{padding:10px;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;} .demo-3-left,.demo-3-right{padding:10px;width:50%;} .demo-3-left img{width:100%;} .centering-content-demo-4{padding:10px;align-items:center;} .demo-4-left,.demo-4-right{display:table-cell;vertical-align:middle;padding:10px;width:50%;} .demo-4-left img{width:100%;} text-align: center Apply this declaration to the parent element and images and text will center.

Images Larger than Container

This will center the image inside of a element when the elements height and/or width is smaller than the image. This works well when you have image assets of various aspect ratios that you want to display as thumbs that are the same size. ul#images-edit li { float: left; height: 100px; margin: 0 8px 8px 0; overflow: hidden; position: relative; width: 100px; } ul#images-edit li img { position: absolute; top: -9999px; bottom: -9999px; left: -9999px; right: -9999px; margin: auto; width: 150px; }

Browser Extensions

Chrome -webkit- Firefox -moz- Internet Explorer -ms- Opera -o- Safari -webkit- Resources Comparison of layout engines (Cascading Style Sheets) - Wikipedia, the free encyclopedia - Wikipedia, the free encyclopedia”)