CSS3 Ribbon

Mar 26, 2013

Project Description

A simple exercise to create a ribbon or banner effect using only CSS. I wanted to create a ribbon that could be re-sized, aligned, colored and included inline with other text. The end result includes several different text sizes and color varieties, which can easily be expanded. The banner expands to fit any size text and even multiple lines comfortably.

Project Details

Title: CSS3 Ribbon Effect
Role: HTML • CSS
URL: http://codepen.io/jahdaic/pen/KELxa

[xhtml]

Amazingly Simple CSS3 Ribbon

This

Ribbon

can even be used inside of text.

You can make up new colors and sizes too!


[/xhtml]
[css].ribbon
{
display: inline-block;
position: relative;
/*z-index: initial;*/
box-shadow: 0px 2px 4px rgba(0,0,0,0.55);
border-radius: 3px;
text-align: center;
padding: 10px 30px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
font-size: 32px;
margin: 30px 1em;
clear:both;
}

.ribbon:before
{
content: ”;
border-color: #006DCC transparent transparent;
border-style: solid;
border-width: 1em;
height: 0;
width: 100%;
position: absolute;
z-index: -10;
float: left;
top: 5px;
left: -1em;
}

.ribbon:after
{
content: ”;
border-color: transparent transparent #006DCC transparent;
border-style: solid;
border-width: 1em;
height: 0;
width: 100%;
position: absolute;
z-index: -10;
float: left;
bottom: 3px;
right: -1em;
box-shadow: 0px 2px 4px rgba(0,0,0,0.55);
}[/css]

Project Feature

Vivamus ipsum velit, ullamcorper quis nibh non, molestie tempus sapien. Mauris ultrices, felis ut eleifend auctor, leo felis vehicula quam, ut accumsan augue nunc at nisl quis nibh non, molestie tempus sapien.

Like What You See?