css shadows and borders

… as design elements.

Unless you are into “totally vanilla” design trends, various combos of CSS shadows and borders come handy at times.

Around here – on my web site – there are plenty of shadows and borders, both in page design and page content – mainly images. As is the rule on my sites, each content-element is individually styled using CSS microtuning ™. This makes it easy to make certain images stand out relative to others, depending on the role they play in an article.

The author kindly let the designer use one of his very personal pictures for these unique demos. Much appreciated…

oval images

Whether an image is prepared as a round or oval-looking image in photo handling software (left image below), or a square image is turned into a round or oval image with CSS (right image below), does not matter much for the outcome.

As long as width and height sizes and ratios are roughly the same, square or round images turn out pretty much the same when styled with the same borders, border‑radius, shadows and background values.

There are a few details that dedicated image handling software can do better than CSS – like fade-out and blur, but it is often harder to control outcome exactly through such processes, than it is to style up a few alternatives of each relevant parameter in a stylesheet and apply them in the form of classes as needed.

The difference between left and right image above is mainly that the left image is prepared with blurry oval edges, while the right one is cut to visual shape with CSS. Both shaped images have max-width: 20% to control size.

There is of course slight variations in how various browsers handle the relevant CSS, but since we design our pages using CSS anyway we are of course used to such variations.

basic markup and styles…

HTML:
<img class="lft4 bup4 radien bg4 bd2 mw-25" src="address.jpg" alt="" />

CSS:
.radien {
border-radius: 50%; 
box-shadow: 3px 3px 12px #000;
}
*[class*="radi"].bg4 {
background: #000;
}
*[class*="radi"].bd2 {
border: double 6px #fff;
}

These CSS styles are “agnostic”, in that they will fit all images and turn them into round/oval ones on screen. Other classes set on the image elements, are there to control margins and sizes on this page only.

it is all in our imagination

This article is of course not an exhaustive demonstration of corner shapes. Anyone who wants to can take it further, based on individual imagination and needs.

I do miss the ability to truly shape corners, like I did many, many years ago. Maybe regular CSS and browsers will cover that possibility one day in the not too distant future.

sincerely 

Hageland 11.jun.2014

last rev: 11.jun.2014