demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Berlin, Texas, USA

Simple CSS Masks: Rounded Corners On Images

css / masks

Estimated reading time: 1 minute, 48 seconds

I am about to start a new for web content, one that will eventually tie into the ongoing . But we’re going to start simply, with a short lesson inspired by a question from a student in the CSS class I taught last night.

I have addressed border-radius previously. Most web designers use the property for rounding the corners on navigation buttons, div elements and the like, but with a little bit of creativity we can also apply it to images, even video, to create the effect of a simple mask.

First, let’s take an image and apply a standard border to it via a class.

.ghost-town { width: 350px; height: 263px; border: 2px solid red; }

Good so far. Now let’s add a border-radius of a few dozen pixels to curve the corners (I’ll add coverage for order browsers with vendor prefixes later):

.ghost-town { width: 350px; height: 263px; border: 2px solid red; border-radius:30px; }

Berlin, Texas, USAOn older browsers, the larger the border-radius gets, the more the original corners of the image “stick out”; in newer browsers, the corners are turned, but the border may be applied unevenly. One way to fix this would be to thicken the border to compensate, but that usually is an ugly solution. Instead, we’ll do remarkably simple trick, while adding a few other CSS3 effects. While we could keep the border-color. Technically, specifying any color is optional, so let’s drop that when we proceed, and apply overflow: hidden at the same time.

.ghost-town { width: 350px; height: 263px; border-radius:30px;  overflow: hidden; box-shadow: 5px 5px 5px rgba(0,0,0,0.3); transform: rotate(4deg); 

The (now invisible) border clips the corners of the image, and the box-shadow we added nicely follows its new curves, as you can see at the top of this article. Applying this declaration as a class (without the width and height, of course, unless all of your images happen to be the same size) is an easy way to make your images start to look like old-time photographs.

Photograph of the town of Berlin, Texas, by Barclay Nix, licensed under Creative Commons.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.