Tag Archives: CSS 3

Well designed but not responsive website

A well designed website doesn’t mean always that a website is responsive too. But first of all: What’s responsive? First mentioned was the term responsive web design, based on an article at Wikipedia about responsive web design, in 2010 by … read on

Posted in Articles | Tagged , |

Using CSS box-shadow – Properties and Examples

The box-shadow property is a shorthand property used to apply a set values for horizontal and vertical displacement, blur amount, spread, color and position to an element. Multiple box-shadows can be declared, each set separated by a comma. In the … read on

Posted in Tutorials | Tagged , , |

How to Spice-Up your Social Icon Lists using CSS 3

This is the last part of the tutorial series on how to use unordered lists and a little CSS to create nice looking Social Icon lists. In this tutorial we’re going to create a social icon block using an unordered … read on

Posted in Tutorials | Tagged , |

Responsive Design – the missing point

Responsive design is in the buzz at the moment, interesting enough to see that many web sites, static or installed, are doing their bit to follow the trends leaving, to a part, quite a few unhappy small viewport visitors out … read on

Posted in Articles | Tagged , |

A Right Royal Glow – CSS3 Glow Button

In the newer browsers, support for CSS gradients is stabilizing, making the choice for creating gradient buttons and elements purely out of CSS a viable alternative to background graphics. The syntax is also coming together so that, unlike in it’s … read on

Posted in Tutorials | Tagged |

Add Focus Glow on Input Fields

Adding effects to input fields helps your users to find their way around. Using the CSS property, box-shadow, you can create a nice subtle glow effect, in CSS 3 supporting browsers, when an input field is given focus. Set standard properties … read on

Posted in Articles | Tagged , |

Easy Rounded CSS Button with Drop Shadow

This snippet is for an easy to make rounded CSS button that can be used to give your links a bit extra pfiff. The button uses the CSS border-radius for the rounded corners, box-shadow for the drop shadow and the … read on

Posted in Articles | Tagged , |

Create an Animated CSS Block

Displaying your social bookmark icons in a simple, animated CSS block is sometimes just what you need. In this tutorial we’re going to create that with just an unordered list, a few lines of code, CSS styles, including CSS 3, … read on

Posted in Articles, Tutorials | Tagged , |

Experimenting with border-image

Understanding the CSS 3 border-image property can be a little confusing especially as some of the values are not fully supported. The best way to learn something new is to roll your sleeves up and start experimenting. Experimenting with the … read on

Posted in Articles | Tagged , |

Create an Expandable Button Using CSS border-image

Using a small image together with the CSS border-image property, it’s possible to create a flexible button that will expand to hold differing content lengths or to allow for text sizes depending on a users custom settings. In this experiment … read on

Posted in Articles | Tagged , , |