CODEWITHSUNDEEP
css
Cristian Capannini
Cristian Capannini

Reputation: 110

Background 3 colors in px not shaded color but net

How can I create a simple header with this property:


    .header {
       width: 100%;
       height: 60px;
       background-color: #FFFFFF;
       /* top 12px background-color:  #ce041d*/
       /*  center color is white */
       /* bottom 12px background-color: #e5e5e5 */ 
    }

As this image?

Color i want

Upvotes: 0

Views: 213

Answers (3)

Sahil Dhir
Sahil Dhir

Reputation: 4250

Solution 1: Using Border.

.header{
width:100px;
height:40px;
border-top:20px solid #ce041d;
border-bottom:20px solid #e5e5e5;
}
<div class="header"></div>

Solution 2: using background gradient

.header{
width:100px;
height:40px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ce041d+11,ffffff+11,ffffff+88,ffffff+90,ffffff+90,ffffff+91,e5e5e5+91 */
background: #ce041d; /* Old browsers */
background: -moz-linear-gradient(top,  #ce041d 11%, #ffffff 11%, #ffffff 88%, #ffffff 90%, #ffffff 90%, #ffffff 91%, #e5e5e5 91%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ce041d 11%,#ffffff 11%,#ffffff 88%,#ffffff 90%,#ffffff 90%,#ffffff 91%,#e5e5e5 91%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ce041d 11%,#ffffff 11%,#ffffff 88%,#ffffff 90%,#ffffff 90%,#ffffff 91%,#e5e5e5 91%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce041d', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */

}
<div class="header"></div>

Solution 3: using psuedo :after & :before

.header {
  width: 100px;
  height: 40px;
  position: relative;
}

.header:before {
content:'';
  position: absolute;
  top: 0px;
  height: 5px;
  background: #CE041D;
  width: 100%;
  left: 0px;
}

.header::after {
content:'';
  position: absolute;
  bottom: 0px;
  height: 5px;
  background: #E5E5E5;
  width: 100%;
  left: 0px;
}
<div class="header"></div>

Upvotes: 0

Rotan075
Rotan075

Reputation: 2615

By using a border-top and border-bottom.

.header{
width:100px;
height:40px;
border-top:12px solid #ce041d;
border-bottom:12px solid #e5e5e5;
}
<div class="header"></div>

Or you can use two sub elements which you position absolute:

.header{
  width:100px;
  height:40px;
  position:relative;
}
.header .top{
  position:absolute;
  top:0;
  left:0;
  height: 12px;
  width: 100px;
  background-color:#ce041d;
}
.header .bottom{
  position:absolute;
  bottom:0;
  left:0;
  height: 12px;
  width: 100px;
  background-color:#e5e5e5;
}
<div class="header">
   <span class="top"></span>
   <span class="bottom"></span>
</div>

Upvotes: 1

Mike Bovenlander
Mike Bovenlander

Reputation: 5426

You can do this by adding a top and bottom border.

Something like this:

 .header {
       width: 100%;
       height: 60px;
       background-color: #FFFFFF;
       border-top: 12px solid #ce041d;
       border-bottom: 12px solid #e5e5e5;
    }
<div class="header">
</div>

CSS Border:

The border CSS property is a shorthand property for setting the individual border property values in a single place in the style sheet. border can be used to set the values for one or more of: border-width, border-style, border-color.

Upvotes: -2

Related Questions