How to Create Attractive Ribbon Using CSS

Author: | Posted in CSS 8 Comments

How to Create  Attractive Ribbon Using CSS

Website designing going to be more advanced as look of any website and all new websites trying reduce file sizes even try to avoid images in websites, so in this special requirements we focus on some specific areas in front-end development.

In this CSS tutorial we’re designing “Attractive Ribbon Using CSS” to get advantage of design where we avoiding useless images and even have options to develop creative way of website designs, I got this idea from latest design where most of commanding language CSS (Cascading Style Sheets) with few lines and get output as we showing below.

How to Create  Attractive Ribbon Using CSS

I know everyone will learn from this little creative way of ribbon design which can use in website headers and even I have seen in latest website design footers as well, we appreciate if you share your suggestions in comments area.

How to Create  Attractive Ribbon Using CSS

 Code Start Now

[sourcecode language=”plain”]<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Attractive Ribbon Using CSS</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<style type=”text/css”>
#container {
border: 1px solid #fff;
padding: 50px;
}
#title {
background: #0185ab;
width: 500px;
height: 50px;
color: #fff;
font-size: 18px;
text-align: center;
position: relative;
top: -20px;
}
#title span {
position: relative;
top: 13px;
}
.ribbon {
background: #006685;
width: 100px;
height: 50px;
}
.ribbon-right {
border-color: #006685 white #006685 #006685;
border-style:solid;
border-width:25px;
width:0;
height:0;
position: relative;
}
.ribbon-left {
border-color: #006685 #006685 #006685 white;
border-style:solid;
border-width:25px;
width:0;
height:0;
position: relative;
}
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
.ribbon-right-below {
position: absolute;
top: 88px;
left: 684px;
border-color: #fff #fff #006685 #0097c0;
border-style:solid;
border-width:0 0 21px 25px ;
width:0;
height:0;
}
.ribbon-left-below {
position: absolute;
top: 88px;
left: 209px;
border-color: #006685 #0097c0 #006685 red;
border-style:solid;
border-width:0 25px 21px 0;
width:0;
height:0;
}
</style>
</head>
<body>
<div id=”container”>
<div class=”ribbon-left left”></div>
<div class=”ribbon left”></div>
<div id=”title” class=”left”>
<span>Attractive Ribbon Using CSS by Tutorial Lounge</span>
</div>
<div class=”ribbon left”></div>
<div class=”ribbon-right left”></div>
<div class=”clear”></div>
</div>
<div class=”ribbon-right-below”></div>
<div class=”ribbon-left-below”></div>
</body>
</html>
[/sourcecode]

Comments
  1. Posted by ken
  2. Posted by Beben Koben
  3. Posted by Marco
  4. Posted by Ciuchy
  5. Posted by Isabella Felix
  6. Posted by cinNisa
  7. Posted by Sü Smith
  8. Posted by notebook review

Add Your Comment