menu
Ad goes here

Wednesday, 3 October 2012

Create Ribbon Design Element without using any images

If you want focus on a particular/ important message on your webpage then you have to do something different so the area will be easily visible for the site visitor. The ribbon design element implementation is one of the good ideas, which can be fit for any website design. Just you need to change the color code to match with the website color theme.

CSS Code:

<style type="text/css">

  .ribbon_container {

  width: 500px;

  margin: 10% auto;

  padding: 0;

  text-align: center;

  position: relative;

  }


.ribbon_panel {

  width: 400px;

  height: 75px;

  background: #ff0000;

  margin-left: 50px;

  box-shadow: 0 0 10px rgba(0,0,0,0.2);

  }


.ribbon_panel .message {

  font-family: 'Habibi', serif;

  font-size: 45px;

  color: #fff;

  margin: 0;

  padding: 8px;

  text-shadow: 0 0 5px #333;

  }


.ribbon_panel:before {

  content: "";

  position: absolute;

  bottom: -20px;

  left: 50px;

  width: 0;

  height: 0;

  border-right: 70px solid #d40202;

  border-top: 0px solid transparent;

  border-bottom: 20px solid transparent;

  }


.ribbon_panel:after {

  content: "";

  position: absolute;

  bottom: -20px;

  right: 50px;

  width: 0;

  height: 0;

  border-left: 70px solid #d40202;

  border-top: 0px solid transparent;

  border-bottom: 20px solid transparent;

  }


.ribbon {

  width: 120px;

  height: 75px;

  background: #ff1313;

  position: absolute;

  z-index: -2;

  }


.ribbon.left {

  top: 20px;

  left: 0;

  }


.ribbon.left:before {

  content: "";

  position: absolute;

  left: -29px;

  top: 0;

  width: 0;

  height: 0;

  border-right: 30px solid #ff1313;

  border-top: 0 solid transparent;

  border-bottom: 37.5px solid transparent;

  }


.ribbon.left:after {

  content: "";

  position: absolute;

  left: -29px;

  bottom: 0;

  width: 0;

  height: 0;

  border-right: 30px solid #ff1313;

  border-top: 37.5px solid transparent;

  border-bottom: 0 solid transparent;

  }


.ribbon.right {

  top: 20px;

  right: 0;

  }


.ribbon.right:before {

  content: "";

  position: absolute;

  right: -29px;

  top: 0;

  width: 0;

  height: 0;

  border-left: 30px solid #ff1313;

  border-top: 0 solid transparent;

  border-bottom: 37.5px solid transparent;

  }


.ribbon.right:after {

  content: "";

  position: absolute;

  right: -29px;

  bottom: 0;

  width: 0;

  height: 0;

  border-left: 30px solid #ff1313;

  border-top: 37.5px solid transparent;

  border-bottom: 0 solid transparent;

  }

  </style>

HTML Code:


<div class="ribbon_container">

    

  <div class="ribbon_panel">

  <div class="ribbon left"></div>

  <div class="message">www.24xhtml.com</di  v>

  <div class="ribbon right"></div>

  </div>


</div>



No comments:

Post a Comment

Books for you (Crafted with )