Home arrow Style Sheets arrow Page 2 - 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 - Adding shadows, Borders and Positioning to CSS Circles
(Page 2 of 2 )

If you’ve been enjoying the plethora of options offered by CSS3, you know how easy it is to spice up web page elements with sleek native shadows. While you can easily use this approach with text and boxes, you may be wondering if it also applies to circles generated with the “border-radius” property, right?

Fear not, as the answer is … yes! And to give you proof of my claim, be sure to check the following example. It draws a couple of shadowed circles on screen, thanks to the combined functionality of the “border-radius” and “box-shadow” properties.

<!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 circles with CSS3 (adding shadows and borders)</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;
}
/* circle */
.circle {
     height: 200px;
     width: 200px;
     margin: 0 auto;
     background-color: #5EAEFF;
     font-size: 3.5em;
     color: #FFF;
     line-height: 200px;
     text-align: center;
     border: 1px solid #0075EA;
     box-shadow: 5px 5px 6px #808080;
     -moz-box-shadow: 5px 5px 6px #808080;
     -webkit-box-shadow: 5px 5px 6px #808080;
     -moz-border-radius: 100px;
     -webkit-border-radius: 100px;
}   
#wrapper {
    width: 600px;
    margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>Creating circles with CSS3 (adding shadows and borders)</h1>
    <div class="circle">Sample</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="circle">Sample</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>

This code simply creates the pertinent circles and drops a subtle shadow around them by means of the “box-shadow” property. If you want to see the output generated by this code sample, look at the screen shot below.

Mission accomplished. Now that you've seen how easy it is to draw some shaded circles on a web page, the next step is to demonstrate the functionality of this approach in a more realistic use case. I'm going to create a customizable header. It will be made up of a bunch of shadowed circles absolutely positioned with reference to their parent container.

Here's the code that renders the header: 

<!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 overlapped circles 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;
}
h2 {
    font-size: 2.6em;
}
/* circles container */
#header {
    width: 750px;
    height: 350px;
    position: relative;
    background: #f3f2f2;
    border: 2px solid #969696;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}
#header h2 {
    font-size: 5.5em;
    font-weight: bold;
    color: #fff;
    margin: 50px 0 0 15px;
    text-shadow: 1px 1px 2px #000;
}
/* main wrapper */
#wrapper {
    width: 750px;
    margin: 0 auto;
}
/* circles */
span#circle1 {
    display: block;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 120px;
    left: 400px;
    background: rgba(249,4,44,.7);
    text-indent: -9999px;
    z-index: 1;
    border: 1px solid #b06500;
    box-shadow: 0px 0px 30px #8c0000;
    -moz-box-shadow: 0px 0px 30px #8c0000;
    -webkit-box-shadow: 0px 0px 30px #8c0000;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}
span#circle2 {
    display: block;
    width: 150px;
    height: 150px;
    position: absolute;
    top: 170px;
    left: 300px;
    background: #ff9900;
    text-indent: -9999px;
    z-index: 1;
    border: 1px solid #b56c04;
    box-shadow: 0px 0px 30px #854f03;
    -moz-box-shadow: 0px 0px 30px #854f03;
    -webkit-box-shadow: 0px 0px 30px #854f03;
    border-radius: 75px;
    -moz-border-radius: 75px;
    -webkit-border-radius: 75px;
}
span#circle3 {
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 220px;
    left: 240px;
    background: rgba(220,5,252,.6);
    text-indent: -9999px;
    border: 1px solid #ca05e7;
    z-index: 1;
    box-shadow: 0px 0px 30px #930093;
    -moz-box-shadow: 0px 0px 30px #930093;
    -webkit-box-shadow: 0px 0px 30px #930093;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
}
span#circle4 {
    display: block;
    width: 220px;
    height: 220px;
    position: absolute;
    top: 40px;
    left: 330px;
    background: #04bcf9;
    text-indent: -9999px;
    z-index: 0;
    border: 1px solid #7584fa;
    box-shadow: 0px 0px 30px #0387a8;
    -moz-box-shadow: 0px 0px 30px #0387a8;
    -webkit-box-shadow: 0px 0px 30px #0387a8;
    border-radius: 110px;
    -moz-border-radius: 110px;
    -webkit-border-radius: 110px;
}
span#circle5 {
    display: block;
    width: 250px;
    height: 250px;
    position: absolute;
    top: 70px;
    left: 470px;
    background: rgba(253,250,5,.7);
    text-indent: -9999px;
    z-index: 0;
    border: 1px solid #fbc405;
    box-shadow: 0px 0px 30px #909002;
    -moz-box-shadow: 0px 0px 30px #909002;
    -webkit-box-shadow: 0px 0px 30px #909002;
    border-radius: 175px;
    -moz-border-radius: 175px;
    -webkit-border-radius: 175px;
}
span#circle6 {
    display: block;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 38px;
    left: 490px;
    background: #7ff106;
    text-indent: -9999px;
    z-index: 0;
    border: 1px solid #3eb304;
    box-shadow: 0px 0px 30px #007500;
    -moz-box-shadow: 0px 0px 30px #007500;
    -webkit-box-shadow: 0px 0px 30px #007500;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}
span#circle7 {
    display: block;
    width: 60px;
    height: 60px;
    position: absolute;
    top: 260px;
    left: 200px;
    background: #07fcee;
    text-indent: -9999px;
    z-index: 1;
    border: 1px solid #04d6ca;
    box-shadow: 0px 0px 30px #04a99f;
    -moz-box-shadow: 0px 0px 30px #04a99f;
    -webkit-box-shadow: 0px 0px 30px #04a99f;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>Creating overlapped circles with CSS3</h1>
    <div id="header">
        <h2>Colorful<br />Circles</h2>
        <span id="circle1">This is a sample circle</span>
        <span id="circle2">This is a sample circle</span>
        <span id="circle3">This is a sample circle</span>
        <span id="circle4">This is a sample circle</span>
        <span id="circle5">This is a sample circle</span>
        <span id="circle6">This is a sample circle</span>
        <span id="circle7">This is a sample circle</span>
    </div>
    <div id="main">
        <h2>Main section</h2>
        <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>
</div>
</body>
</html>

Even though the above code fragment looks somewhat lengthy, you shouldn’t feel intimidated by it. It simply creates seven overlapping circles, whose appearance have been improved by means of some shadows and borders. If you want to see the output that the previous snippet produces, just take a look at the following screen capture:

There you have it. In a few easy steps, I managed to build an eye-catching web page header, composed of a host of circles generated with the “border-radius” property. Naturally, I’m only scratching the surface when it comes to finding other possible uses for CSS3-based circular shapes; the options are everything but scarce. Even so, the examples that you've seen in this tutorial should provide you with the right pointers to start using the “border-radius” property in all sorts of creative ways.

Closing Remarks

In this two-part tutorial, I developed a few approachable examples, which demonstrated that when used in a more “unconventional” fashion, the “border-radius” CSS3 property can allow you to render all sorts of circular shapes on a web page, without having to deal with multiple (and sometimes heavy) background images.

Therefore, if you’re planning to give a refreshing touch to your website, or simply want to play around  with some of the new properties included with CSS3, try constructing circles with "border-radius.” That should keep you entertained for quite a few hours. Go ahead!

See you in the next web design tutorial!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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