How to achieve this header with html and css?


Tags: html,css,asp.net,html5,css3

Problem :

I am trying to design this kind of header (like in the attached image) in my site with no success is any one can help please?

Header I am trying to design

enter image description here

Web site with this header



Solution :

I create this:

html

<h1 class="ribbon">
   <strong class="ribbon-content">CAPTURE|WEDDING PHOTOGRAPHY</strong>
</h1>

css

.ribbon {
 font-size: 16px !important;
 /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */
 width: 50%;    
 position: relative;
 background: #ffffff;
color: rgb(134, 152, 158);
 text-align: center;
 padding: 1em 2em; /* Adjust to suit */
 margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
.ribbon:before, .ribbon:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1em;
 border: 1.5em solid #fff;
 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: #000000 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;
}

fiddle

You can play with colors size etc.

Source for css: css ribbon


    CSS Howto..

    How to use the Javascript to add/remove the CSS/colour style to the html page?

    How do I let the DOM know about new elements created on the fly?

    Is it possible to have a web browser scroll to show CSS fixed position items that are outside the viewport of the web browser?

    How to make a sliding dashboard similar to medium.com? [closed]

    Show / Hide HTML using swatch / HTML 5 - dynamic HTML

    How can I “hack” the Thunderbird Lightning extension to fully color categories

    How to avoid double border from the multiple
  • How do I use a wildcard asterisk CSS selector in SASS? [closed]

    How do I output HTML form data to PDF?

    How to echo CSS class only once in first iteration foreach in PHP?

    How to get this specific responsive nav?

    With html tables, using CSS, how do I get the tables next to each other?

    How insert value from Ruby in CSS file

    how to hide html video controls in micorostf edge (fullscreen mode)

    How to add and remove a current state to a link when another is clicked using jQuery

    I can not load the CSS pages which can be accessed after a login carry with spring security. How can I fix it?

    Hover img to show an absolutely positioned div isn't working

    How to make centered fixed width body responsive?

    how to use css inheritance for button colors

    How to provide an API to alter CSS / styles / white label for an encapsulated angularJS directive ( re usable widget / component )

    CSS image rollover map and jQuery : how to use a second li list?

    How to do a webkit css endless rotation-animation.

    How to apply Title Case in input box through css

    How to get MetroUI CSS Datepicker value with javascript

    how to change to color of pseudo-elements in css through jquery

    How to CSS the select field so that it occupy the entire cell of my table?

    how to insert a ribbon inside a div how background without images only pure css? [closed]

    SceneBuilder (by gluon) doesn't show imported fonts

    responsive image gallery with different heights - how to achieve this with css (or jquery)

    How to create an image hover fade effect with jQuery and CSS?