Home arrow Style Sheets arrow CSS Semicircles and Web Page Headers
STYLE SHEETS

CSS Semicircles and Web Page Headers


In this two-part tutorial, I develop a few approachable examples that show how to use the "border-radius" CSS3 property in a somewhat “unconventional” fashion to render all sorts of circular shapes on a web page. With this technique, you need not deal with multiple (and sometimes heavy) background images.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
December 28, 2011
TABLE OF CONTENTS:
  1. · CSS Semicircles and Web Page Headers
  2. · Adding shadows, Borders and Positioning to CSS Circles

print this article
SEARCH DEVARTICLES

CSS Semicircles and Web Page Headers
(Page 1 of 2 )

Are you looking for a simple approach that lets you decorate your HTML elements with a few engaging circular shapes, but don’t want to deal with the burdens and complexities of Photoshop? Then take a look at the “border-radius” CSS3 property. It not only will permit you to render native rounded corners in a snap, but it’ll be your best partner for displaying circles on a web page without using background images.

Of course, the best way to prove the “hidden” functionality provided by “border-radius” is with some concrete, functional code samples. In the first part of this two-part tutorial I developed a few of these samples. They showed how to utilize the property to render first, a basic circle, and then how to place some text inside the figure to increase its semantic meaning within the containing (X)HTML document.

It’s valid to point out, though, that it’s possible to render all sorts of circular shapes easily, simply by tweaking the property’s arguments along with the dimensions assigned to its wrapping element. To demonstrate this, in this last installment I’ll explain how to create appealing semicircles, shadowed circles and even a customizable web page header -- all using only the abilities that “border-radius” provides right out of the box.

Does my proposal sound engaging to you? Then, don’t hesitate any longer; start reading!

CSS “border-radius” Property: Rendering Semicircles

Let’s be frank: dropping some semicircles into a web page won't change or revolutionize your career as a web designer. Nevertheless, the “border-radius” property makes this process so simple that it’s really worth spending a few moments to understand the logic driving it and how to implement it in a concrete way.

That said, take a close look at the following example. It shows how to quickly draw a basic semicircle by using a div as the figure’s container:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating a semicircle with CSS3</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
h1 {
    font-size: 3.6em;
    font-weight: bold;
}
/* semicircle */
.semicircle {
     height: 200px;
     width: 100px;
     margin: 0 auto;
     background-color: #AE00AE;
     text-indent: -9999px;
     -moz-border-radius: 100px 0 0 100px;
     -webkit-border-radius: 100px 0 0 100px;
}
#wrapper {
    width: 600px;
    margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>Creating a semicircle with CSS3</h1>
    <div class="semicircle">This is a sample circle</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    <div class="semicircle">This is a sample circle</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
</div>
</body>
</html>

As you can see in the above example, the semicircle (in this case drawn by a class that has the same name) has been created by assigning the same radius and width to the target element(s). This simple trick allows us to generate the figure shown in the following image: 

That looks pretty appealing, doesn’t it? If you weren’t totally convinced that it was easy to render circular (or semicircular) shapes with the “border-radius” property, the earlier bit of code should make your doubts vanish. But hang on a second! Is this all that can be done with the property? Actually, with some patience and creativity, you can create more sophisticated circles, or combinations of them, that look really attractive.

To illustrate this point, in this following segment I’ll be setting up a couple of additional examples. They will show how to add shadows and borders to a basic circle, and how to use this approach in the construction of an image-less web page header.

To see how this will be accomplished, just click on the link below and keep reading.
    


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials