Archive results for:

CSS Tip: Handling Retina Images

If you want images on your website (especially image buttons with text) to look sharp on retina displays (iPhone 4/5/6, iPad Mini, iPad 3/4), you can create a separate image with double the pixel density.

Which only means creating a version of your images at twice the size, so a 200 x 200px image would become 400x400px. These super sized images are then displayed in the original image size dimensions, which helps create that smooth and crisp appearance on high pixel density screens.

Then just create a media query for only displays that have a pixel ratio of 2:

You should use Apple’s naming convention of @2x for retina images.

There are also JavaScript libraries such as retina.js to handle the media query aspect of it.

CSS3 Tip: Root Em

A new relative measurement in CSS3 is called a rem (for root em) developed by that bases font size on the size of the root (html) element. If you specify the size of the html element (presumably to 100%), all elements that are specified in rem measurements will be relative to that size, not their inherited size.

This gets rid of the compounding issue that makes ems potentially aggravating. The drawback is that IE8 and earlier and other older browsers do not support rems, so you need to provide a fallback font size in pixels. Browsers that support rems will use the last declaration in the stack.


CSS3: Quick Tips

Transparency settings via CSS have been around for some time, and even Internet Explorer has made way for transparency using non-standard filters. But CSS3 expands on our options by adding RGBA colors to the well-known opacity property:

Using CSS3 Opacity poperty, we’ve set the element to be 60% opaque (or 40% transparent). The Opacity property accepts any decimal value between zero and one, with zero representing full transparency.

You can also set the color option with an alpha setting:

Read more ›

5 Online CSS3 Tools

  1. Transforms ( – Create 2D and 3D transforms with sliders.
  2. Ceaser: CSS Easing and Animation Tool ( – CSS transitions create animation techniques.
  3. CSS3 Button Maker – ( – Use sliders to modify the padding, box-shadow, background color, border and text settings.
  4. CSS3 Click Chart ( – Select from a host of CSS3 properties, (i.e. text-shadow, background-size, etc.) and view example code.
  5. Patternizer – ( – Patternizer is intuitive, powerful and a joy to use.

CSS3: Keyframe Animation

CSS3 Transitions are good but naturally limited; they are only applied when a property value changes.

The CSS3 Animations Module goes beyond what is possible with Transitions, allowing animations to be applied directly to elements with a syntax that is more flexible and permits more granular control. Animations and transitions have quite a lot of syntax in common, but the process for creating animations is very different: First, you define the properties and timings, and then you add the animation controls to the elements that will be animated.

The Animations Module is implemented in all current browsers, so check the Can I Use CSS3 website to check specific versions. Read more ›

CSS3: Transitions

CSS3 transitions smooth out value changes in your stylesheets when triggered by interactions like hovering, clicking, and focusing.

This smoothing animates the changing of a CSS value when triggered by a mouse click, focus or active state, or any changes to the element (including even a change on the element’s class attribute).

Let’s start with a simple example, where we’ll add a transition to the background color swap of a link. When hovered over, the link’s background color will change, and we’ll use a transition to smooth out that change, an effect previously only possible using JavaScript, but now possible with a few simple lines of CSS.

Next, we’ll add a declaration for the normal link state with a little padding and a light green background, followed by the background swap to a darker green on hover.

Read more ›