Tasty Bytes

Elegant Curved HR with CSS3

Brian — Wed, 16 May 2012 22:02:36 +0000

Here is some simple CSS3 to create a clean and elegant HR, it does not necessarily degrade the best, but its not too bad. This was mainly an exercise in CSS3 for me. So lets get to it.

Example of final outcome

The html, just a basic

element with a class of (whatever you’d like) “oval”

And then the CSS, pretty straight forward. I’m using the :before to set up the base curve of the hr. You can edit the border radius to increase or decrease the amount curve to suite you liking. Then the :after to mask off the shadow.

hr.oval {
    position: relative;
    width: 100%;
    height: 50px;
    overflow: hidden;

    margin: 0px auto;
    border: 0;

}

hr.oval:before {
    content: '';
    width: 90%;
    height: 30px;
    left: 5%;
    position: absolute;
    z-index: 50;
     /* Edit these radiuses to change the overall curvature.  Duplicate in :after */
    border-bottom-left-radius: 1000px 70px;
    border-bottom-right-radius: 1000px 70px;

    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, .35);
}

hr.oval:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    z-index: 100;

    border-bottom-left-radius: 1000px 70px;
    border-bottom-right-radius: 1000px 70px;

    background: #fff;
}

And there you have it. Simple and to the point.

JSFiddle: http://jsfiddle.net/3n1gm4/vqMHm/

Self Portrait

Brian — Fri, 10 Dec 2010 04:54:09 +0000

Aqua Sonix Ads

Brian — Fri, 10 Dec 2010 04:37:23 +0000

A full and page magazine ad for AquaSonix. I used Adobe Photoshop and Illustrator to create this piece. The main photo can be found on iStockPhoto.

Aqua Sonix Branding

Brian — Fri, 10 Dec 2010 03:56:35 +0000

This is a logo for a fictitious underwater speaker system company. The ‘a’ and the ‘s’ are created using the same shape insuring a symetrical design. The only software used was Adobe Illustrator.

Here we have two pieces from the branding package of AquaSonix. The first piece is a company envelope, while the second is a basic letter head. Adobe Illustrator is the only software used.

Yellow 7 Promotional Flyer

Brian — Thu, 09 Dec 2010 20:44:02 +0000

Muscle Car Stamps Series

Brian — Thu, 09 Dec 2010 14:38:23 +0000

A set of four stamps created for an American heritage stamp collection. Whats more American than muscle cars? These were made using 100% Adobe Illustrator.

Wok ‘n Roll

Brian — Tue, 07 Dec 2010 16:56:51 +0000

This website is for fictitious sushi restaurant. It serves to be a simplistic informational website with locations, menu, and specials. This was created in xHTML and CSS. The graphics were created in Adobe Photoshop, and the images are from sxc.hu

Metro Sanitation

Brian — Tue, 07 Dec 2010 15:47:38 +0000

Metro Sanitation’s website was created to allow current residential and commercial clients to pay their bills online and attract new customers by displaying the services Metro Sanitation offers.

InviteThis

Brian — Sun, 28 Nov 2010 08:43:50 +0000

Here is a simple, easy to use, invitational website. Two steps and your event is posted, complete the third, and your invitations are sent. Feel free to walk through the process, all the data is for testing purposes only.

DentonDrinks.com

Brian — Sun, 28 Nov 2010 07:21:45 +0000

With three colleges with in five miles of each other, 100,000+ college students, and almost an equal amount of bars. DentonDrinks.com lets students and citizens of Denton TX browse the local happy hour specials.