css - Create a ribbon header responsive in bootstrap -


how can create ribbon header in bootstrap , need responsive, best way if header split in 2 parts, mean left , right, ribbon must this:

enter image description here

my code is:

 .ribbon {     font-size: 16px !important;     /* ribbon based on 16px font side , 24px vertical rhythm. i've used em's position each element scalability. if want use different font size may have play position of ribbon elements */     width: 75%;     position: relative;     background-color: #fafafa;     background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));     background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);     background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);     background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);     background-repeat: repeat-x;     filter: progid: dximagetransform.microsoft.gradient(startcolorstr='#ffffffff', endcolorstr='#fff2f2f2', gradienttype=0);     border: 1px solid #d4d4d4;     color: #fff;     text-align: center;     padding: 1em 2em;     /* adjust suit */     margin: 2em auto 3em;     /* based on 24px vertical rhythm. 48px bottom margin - 24 ribbon 'graphics' take 24px double it. */   }   .ribbon:before,   .ribbon:after {     content: "";     position: absolute;     display: block;     bottom: -1em;     border: 1.5em solid #f2f2f2;     /*side ribbons*/     z-index: -1;   }   .ribbon:before {     left: -2em;     border-right-width: 1.5em;     border-left-color: transparent;   }   .ribbon:after {     right: -2em;     border-left-width: 1.5em;     border-right-color: transparent;   }   .ribbon .ribbon-content:before,   .ribbon .ribbon-content:after {     content: "";     position: absolute;     display: block;     border-style: solid;     border-color: #e2e2e2 transparent transparent transparent;     bottom: -1em;   }   .ribbon .ribbon-content:before {     left: 0;     border-width: 1em 0 0 1em;   }   .ribbon .ribbon-content:after {     right: 0;     border-width: 1em 1em 0 0;   }
<div class="navbar ribbon">    <div class="navbar-inner ribbon-content">      <div class="container">        <ul class="nav">          <li class="active"><a href="#">home</a>          </li>          <li><a href="#">projects</a>          </li>          <li><a href="#">services</a>          </li>          <li><a href="#">downloads</a>          </li>          <li><a href="#">about</a>          </li>          <li><a href="#">contact</a>          </li>        </ul>      </div>    </div>  </div>  <!-- /.navbar -->

thank you

i've made using pseudo element , css triangles. maybe can inspire you

body {    background-color: white;  }  header {    position: relative;    background-color: blue;    color: white;    text-align: center;    width: 95%;    height: 40px;  }  header::before,  header::after {    content: '';    display: block;    position: absolute;  }  header::before {    height: 40px;    width: 50px;    right: -30px;    top: 4px;    background-color: darkblue;    z-index: -1;  }  header::after {    width: 0;    height: 0;    border-style: solid;    border-width: 20px 20px 20px 0;    border-color: transparent white transparent transparent;    right: -30px;    top: 4px;  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />  <div class="row">    <div class="col-xs-12 header">      <header>        <h1>header</h1>      </header>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

javascript - Google App Script ContentService downloadAsFile not working -

i have web app developed using google app script htmlservice , html form, populating excel sheet in google drive using spreadsheetapp . , 1 section calling contentservice download data excel file. function doget(e) { // read excel sheet //getappfile(); // render application html template return htmlservice.createtemplatefromfile('index').evaluate() .settitle('go smart') .setsandboxmode(htmlservice.sandboxmode.iframe); } function downloaddoublequatecsvfile() { var sheetid = propertiesservice.getscriptproperties().getproperty('sheetid'); var ss = spreadsheetapp.openbyid(sheetid).getactivesheet(); //var ss = spreadsheetapp.getactivespreadsheet().getactivesheet(); var maxcolumn = ss.getlastcolumn(); var maxrow = ss.getlastrow(); var data = ss.getrange(1, 1, maxrow, maxcolumn).getvalues(); if (data.length > 1) { var csv = ""; (var row = 0; row < data.length; row++) { (var c...
Read more

javascript - Function overwritting -

is there way overwrite function or event handling in function? using addeventlistener, can have many event handlers on element want var test=document.getelementbyid("div"); test.addeventlistener("click",function(){alert("im first");},false); test.addeventlistener("click",function(){alert("im second");},false); // alerts "im first" , after "im second" but if want overwrite function/event example based on client width example this function one() { alert("first"); } function two() { alert("second"); } window.onresize = function() { var test = document.getelementbyid("div"); if (window.innerwidth > 500) { test.onclick = 1 } else { test.onclick = two; } } is possible in javascript? in case use effective little known approach. addeventlistener can accept object property handleevent event handler. in case it's easy overwr...
Read more

php - Find a regex to take part of Email -

i have following emails need extract part from: bestellnummer xxx: 1 von xxx, 1er pack ------------- anfang der nachricht ------------- foo bar baz foo bar baz // <<<<< need text here ------------- ende der nachricht ------------- ------------- anfang der nachricht ------------- foo bar baz foo bar baz ------------- ende der nachricht ------------- there 0 unlimited occurences of ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- and i'm able extract first part regex: $re = "/------------- .*? -------------.?(.*?).?------------- .*? -------------/s"; but, i'm quite new on learning regex, i'm pretty sure there must better regex extract part (foo bar baz foo bar baz) of text between ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- as can in different languages, i'm using .? to match between hyphens. i...
Read more