Create a full width header with diagonal background color using gradient - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Header

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Header

Description

Create a full width header with diagonal background color using gradient

Demo Code

ResultView the demo in separate window 


<html>
 <head> 
  <style>

body {<!--from  w ww  .ja v  a 2  s.com-->
   background-color: #ff9;
}
.header {
   background: -webkit-linear-gradient(-20deg, rgba(230, 0, 200, 0.5), rgba(230, 0, 200, 0.5) 40%, rgba(200, 0, 200, 0.3) 40%, rgba(200, 0, 200, 0.3));
   background:    -moz-linear-gradient(-20deg, rgba(230, 0, 200, 0.5), rgba(230, 0, 200, 0.5) 40%, rgba(200, 0, 200, 0.3) 40%, rgba(200, 0, 200, 0.3));
   background:     -ms-linear-gradient(-20deg, rgba(230, 0, 200, 0.5), rgba(230, 0, 200, 0.5) 40%, rgba(200, 0, 200, 0.3) 40%, rgba(200, 0, 200, 0.3));
   background:      -o-linear-gradient(-20deg, rgba(230, 0, 200, 0.5), rgba(230, 0, 200, 0.5) 40%, rgba(200, 0, 200, 0.3) 40%, rgba(200, 0, 200, 0.3));
   background:         linear-gradient(110deg, rgba(230, 0, 200, 0.5), rgba(230, 0, 200, 0.5) 40%, rgba(200, 0, 200, 0.3) 40%, rgba(200, 0, 200, 0.3));
   min-width: 960px;
   width: 100%;
}
.wrapper {
   width: 960px;
   margin: 0 auto;
   outline: 2px dashed green; /* Just for demo */
}
.wrapper:after { 
  content: ' ';
  display: block;
  clear: both;
}
.left, .right {
   height: 35px;
   line-height: 35px;
}
.left {
   float: left;
   width: 350px;
}
.right {
   text-align: right;
   margin-left: 350px;
}

      </style> 
 </head> 
 <body> 
  <div class="header"> 
   <div class="wrapper"> 
    <div class="left">
      Left 
    </div> 
    <div class="right">
      right side 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials