Default Responsive CSS for Template

/*Responsive CSS*/
@viewport {
width: device-width;
zoom: 1;

img, video, canvas {
max-width: 100%;

figure {
height: 0;
padding-bottom: 56.25%; /* 16:9 */
position: relative;
width: 100%;
iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;

@media all and (min-width: 768px) and (max-width: 1024px) {


@media all and (min-width: 480px) and (max-width: 768px) {


@media all and (min-width: 320px) and (max-width: 480px) {


@media all and (min-width: 240px) and (max-width: 320px) {


Text Blink

* Text Blink

#Blinker {
display:block; height:40px;-moz-animation-iteration-count: infinite;-moz-animation-timing-function: linear;-moz-animation-duration:1s;-moz-animation-name: blink;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-webkit-animation-duration:1s;-webkit-animation-name: blink;font-family:georgia, serif; font-size:16px; line-height:40px; float:left;

@-moz-keyframes blink {
0% {opacity:0;}
100% {opacity:1;}
#Blinker:hover {
-moz-animation-play-state: paused;

@-webkit-keyframes blink {
0% {opacity:0;}
100% {opacity:1;}
#Blinker:hover {
-webkit-animation-play-state: paused;


<div id=”Blinker” >Text to blink here</div>

Sprite Image

Beautiful Buttonaad-ban


The best practice is to combine all button states into one image and divide them out using CSS. This is because it:

  • reduces http requests resulting in faster transfers
  • prevents flickering effect caused by change of state by loading all states as one file

The CSS Code

Now that we’ve brought the different states into a single image we need to tell the browser what part of the image we want when necessary through CSS.

The static, initial state of the button is defined in CSS as follows:

a.button {
	background: url(../images/button.png) no-repeat 0 0;
	width: 186px;
	height: 52px;
	display: block;
	text-indent: -9999px;

The background image is positioned to the top and left with the width and height of the button being defined as to only show the top third of the sprite. The rest of the code is a simple image replacement technique on the <a> tag that has a class of ‘button’.

Hover State CSS

The hover state retains all properties and values with the exception of the background position as it’ll need to be pushed up to show the second part of the sprite as shown:

a.button:hover { background-position: 0 -52px; }

Changing the first value would result in the background image moving left and right along the X axis. Obviously we don’t want that so the image is moved upwards along the Y axis as a negative value of the height of the button itself. This moves the hover state of the sprite into view when the mouse hovers over the link.

Click State CSS

As you can probably guess the click state will basically be the same but moving the button up again as follows:

a.button:active { background-position: 0 -104px; }


Various Link Techniques



  • Showing Hyperlink Cues with CSS- The CSS Guy shows us how to get the little icons next to hyperlinks that signify if that link will take you offsite, open a popup, or link to a file (as opposed to another html page). Here’s how to do it in a way that’s supported in IE7, Firefox, and Safari.
  • The ways to style visited Links- CSS offers various possibilities to make links more usable and preserve text readability at the same time. We need to differentiate visited and unvisited links, but we must keep text scannable and readable.
  • Link Thumbnail- Shows users that are about to leave your site exactly where they’re going. When that curious mouse pointer hovers over a link pointing to somewhere outside of your site, the script displays a small image of the destination page.
  • Iconize Textlinks with CSS- If you’re looking for more icons to implement, Alex provides a nice start.


Equal Height Technique


One of the somewhat frustrating properties of CSS is the fact that elements only stretch vertically as far as they need to. So how can we make all columns appear to be the same height? Several techniques was introduced to solve this issue.

  • Faux Columns- The simple secret is to use a vertically tiled background image to create the illusion of colored columns.
  • Equal Height Columns – revisited- A method to make all columns appear to be the same height but without the need for faux column style background images.

Equal height boxes with CSS- The trick is to use the CSS properties display:table, display:table-row and display:table-cell to make containers (in this case div elements) behave like table cells. The basic XHTML structure looks like this:

 <div class="equal">    <div class="row">    <div class="one"></div>    
<div class="two"></div>     <div class="three"></div>    </div>    </div>

Here is the CSS used to make this structure behave like a table:

    .equal {
    .row {
    .row div {


Rundown of Handling Flexible Media


When you take the responsive web design route, part of the deal is fluid grids. That is, container elements set in percentage widths. Just one example: an <article> that holds a blog post might be 320px wide on a small screen device and 690px wide on some large screen. Text can be resized and will flow nicely to fill a container. That’s not too hard. But media – images, video players, and audio players – demand a bit more attention (e.g. a video that sticks off the edge of the screen == bad). This post is to round up the methods of handling that.

Flexible Images


If you’re comfortable with IE 7 and up support. This little beauty will do you fine:

img {
  max-width: 100%;

  /* just in case, to force correct aspet ratio */
  height: auto !important;

If you are caring about IE 7 support (I hope not, but I understand there are scenarios in which you must), use this to make sure the images survive the scale-down:

img { 
  -ms-interpolation-mode: bicubic; 

If you need to care about IE 6 (again…) this article has a JavaScript solution. Kind of a bummer loading extra JavaScript for a browser that is already much slower, but c’est la vie.

A shift in thinking

There was a time in which resizing images was quite the taboo. Browsers sucked at resizing images and bandwidth was being wasted. That attitude is all but gone now mostly because browsers are now pretty good at resizing images and having them look good. In fact, with “retina” displaying becoming a thing, serving too-large-for-container images is kinda good, because scaling them down makes them look all the sharper.

However the bandwidth thing is still a (big) issue. Which is what makes the responsive images thing such a hot issue right now. Point is: when thinking about flexible images, work in some thinking about responsive images too. You can read more up on the current solutions to that here.

Flexible Video

Flexible video is a little more complex than images. If you are using HTML5 <video> directly, the good news is that it holds its aspect ratio just like images do, so the same technique holds:

video {
  max-width: 100%;

  /* just in case, to force correct aspet ratio */
  height: auto !important;

However, I’m starting to think it’s a pretty bad idea to use HTML5 <video> directly. The required formats have been shifting around for years now and it’s not over yet. Add to that the fact that 1) hosting video is bandwidth intensive and expensive 2) streaming is another whole complicated beast 3) maintaining appropriate quality across formats and devices and available bandwidth is hard and 4) skinning consistant controls on the player is hard and … well … screw using HTML5 video directly.

Instead, I highly recommend using a video service like YouTube or Vimeo. When you embed videos from these services, you embed an <iframe>. What comes inside the iframe might be HTML5 video, but you don’t have to deal with it directly.

All that to say: <iframe>s have an aspect ratio problem.

The basic idea is that you create a video wrapper div with zero height and a top padding set in percentages. That percentage will actually be a percentage of the width, making it maintain aspect ratio. Then you absolutely position the video inside, which gives you that elusive ability to maintain aspect ratio. We’d be targeting the iframe for absolute position, as again, video doesn’t need this but iframes do. The basics:

.video-wrapper {
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  position: relative;
.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;

Check out the article on that for more nuances and details about older browser support.

CSS Tricks

Vertical Centering Block Level Elements

Positioning can be used to vertically center block level elements.


1 <div id="content">your content here</div>

The CSS:

1 div#content {position: absolute; top: 50%; height: 500px; margin-top: -250px}

The top left corner of the div will be positioned 50% from the top. Since we want the center of the div to be positioned 50% from the top you need to set a negative top margin equal to half the height of the div.

This same trick works for horizontal centering as well. Change top to left and margin-top to margin-left and set the negative margin to be half of the width of the element.

1 div#content {position: absolute; top: 50%; left:50%; width:800px; height: 500px; margin-left: -400pxmargin-top: -250px}

The above CSS will center the element both vertically and horizontally.

3D Buttons with CSS Only

3D CSS buttons are easy to create. The trick is to give your elements borders with different colors. Lighter where the light source shines and darker where it doesn’t.

1 div#button {background: #888; border: 1px solid; border-color: #999 #777 #777 #999 }

The CSS above will create a button with the light source at the upper left. Usually one or two shades of color change is all that’s needed, but you can experiment for different effects.

CSS Font Shorthand

When using shorthand on the font property you need to specify each property in the following order

1 body { font: font-style font-variant font-weight font-size line-height font-family; }

You don’t need to include every property, but know that for any you don’t include that property will be reset to it’s default.

Setting Multiple Classes on an HTML Element

Easy and easy to forget the proper syntax. If you want to set multiple classes on an html element it should look like:

1 <div class="class-1 class-2 class-3">
2 </div>

with all class names inside the same set of double quotes with a space between each. The CSS specificity is controlled by the order of the classes in your CSS file. If your CSS has:

1 class-2 {color: blue}
2 class-3 {color: green}
3 class-1 {color: red}

then text inside the div will be red as class-1 is the last declared in the CSS. The order the classes appear in the html is irrelevant.

CSS Tooltips

You can create a lightweight CSS cross browser tooltip easily with a few lines of code.


1 This is the <a class="tooltip" href="#">Tooltip Link<span>This will be the text that shows up in the tooltip</span></a> You can place any text you want here.

The CSS:

1 a.tooltip {position: relative}
2 a.tooltip span {display:none; padding:5px; width:200px;}
3 a:hover {background:#fff;} /*background-color is a must for IE6*/
4 a.tooltip:hover span{display:inlineposition:absolute;}

You can add more styles to the above to suit your design. The key is the span is set to display: none until you hover over the link. When you hover over the link the display is changed to show inline and given a position of absolute. position: relative is necessary on the link in order to ensure the tooltip is positioned in relation to the link and not another containing element.

CSS Triangles and Other Shapes

CSS borders come together at an angle at any corner. This isn’t obvious when setting a border that’s the same color on all sides or if your border-width is only a few px. Making the width much larger and setting different border-colors on different sides lets you see this clearly. Taking advantage of these angles we can use the border-property to create some interesting shapes.

Creating a triangle is a matter of setting the border-color on 3 of the 4 sides to transparent. You also want to set the width and height of the element to be 0 in order for all 4 corners to meet at a point. You can set the border opposite the triangle to 0 as well, but the adjacent borders need to maintain a width or the entire element with borders will collapse to a single point.



The CSS:

.triangle {
	border-color: transparent transparent green transparent;
	border-style: solid;
	border-width: 0px 300px 300px 300px;
	height: 0px;
	width: 0px;

With a little experimentation you can create moe interesting shapes, especially if you combine several elements.

Understanding !important

!important is a way to override CSS specificity. In general it’s not the best solution since the more you use it, the more you end up needing to use it again. It can make your CSS unmaintainable in a hurry. It can be useful due to a quirk in IE. When you have something like the following

h1 {
	color: red !important;
	color: blue

browsers should show the h1 with a color red. IE, however will show the style that comes last instead of following the rules of precedence. So the above code would show your h1 as red in all browsers except IE where the color would be blue.

Visibility or Display?

On the surface both the CSS visibility and display properties seem to do the same thing, hide or show an element on the page. Beneath the surface they work differently.

  • {visibility: hidden} – The element holds the space, but isn’t seen
  • {display: none} – The element does not hold space. Other elements collapse to fill the space

Most of the time you likely want to use display: none, unless your goal is to leave an empty open space on your page.

Create a CSS Frame for Images


Many images look nice a frame. You typically frame pictures before hanging them on a wall so why not add a frame to images on your website. Just like what you can see how every article image here at instantShift is framed using modified verion of this very same trick.

The trick is to wrap your images in a div and add a simple class.


<div><img src="" alt="" height="" width=""></div>

The CSS:

.frame {
	border: 2px ridge #000;
	 padding: 10px;
	background-color: #fff;

.frame img {
	border: 2px solid #ooo;
	padding: 1px;
	 margin: 10px;

You can use a variety of border-style values to create different looks to the frame (groove, ridge, inset, outset, double, dotted, dashed, solid). The padding and background-color on the frame div will create the look of a mat around your image. Adding border, padding, and margin to the image itself can create the effect of having a second mat around your image for an extra effect.

Once set up all you’ll need to do to add your frame to any image is wrap it with a div and assign the class. You can even create several different styles of frames and then pick and choose which to use for each image.