CODEWITHSUNDEEP
htmlcss
enne87
enne87

Reputation: 2299

CSS - Create headline with special underline

In the image below you can see some purple headline that I would like to implement with HTML and CSS. The headline can be arbitrary long of course. Difficult for me is the appropriate creation of the custom underline of the purple headline.

I thought of using display block for the headline and using the background-image and background-repeat property, but I have no idea how I should set purple decorative element on the right of the underline.

Any help is appreciated, thanks!

Special Headline

Upvotes: 2

Views: 1374

Answers (5)

Deepak Yadav
Deepak Yadav

Reputation: 7069

I have no idea, how you can achieve that double border effect completely using CSS, but to some extent, this is possible. or you can use multiple images, or even a complete image for border and repeat it.

Note: have given 1px border-bottom to .under class to bring similar border effect as that of image.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 80%;
  margin: 0 auto;
}
.heading {
  color: purple;
  margin: 10px 0 15px;
}
.under {
  width: 98%;
  display:block;
  position: relative;
  border-bottom: 1px solid purple;
}
.under:after,
.under:before {
  content: '';
  position: absolute;
  margin-top:2px;
  top: 100%;
}
.under:after {
  border-bottom: 3px solid purple;
  width: 98%;
  display: block;
  z-index: 10;
  left: 0;
}
.under:before {
  background: #fff url('https://i.sstatic.net/SHc6G.png')no-repeat right top;
  width: 33px;
  height: 28px;
  display: block;
  right: 0;
  top: 100%;
  left: auto;
  float: right;
  margin-top: -11px;
  z-index: 100;
}
<div class="container">

  <h1 class="heading under">
Some heading
</h1>
</div>

Upvotes: 1

Sleek Geek
Sleek Geek

Reputation: 4686

You can use a combo of CSS :before and :after selectors, and fontAwesome to achieve that. Take a look at my example and adjust as needed.

h1 {
    display: block;
    border-bottom: solid 1px #6B1E69;
    position: relative;
    width: 450px;
    color: #6B1E69;
}
h1:after {
    content: '';
    width: 100%;
    height: 25px;
    position: absolute;
    border-bottom: solid 3px #6B1E69;
    margin-bottom: -5px;
    bottom: 0;
    left: 0;
}



h1:before {
    content: '\f18c';
    font-family: fontAwesome;
    height: 25px;
    position: absolute;
    margin-bottom: -10px;
    bottom: 0;
    right: -30px;
    text-align: right;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<h1> Thi sis your header text</h1>

Upvotes: 2

Beepye
Beepye

Reputation: 328

Using an SVG with a fallback image + solid bg-color is a good solution. I'd consider coding the image into the HTML and avoid making it a background image. The reason being is you'd need a hard-set height (or min-height) for the element containing the image and with today's web being available on multiple devices having a hard-set height or width can be a negative experience and is better off avoided, IMO.

Running the image as a block level element (or inline-block) will give you width flexibility without with no display issues or extra styling.

As far as layout goes, you could structure it as 2 separate images, put each image into a div and style with display:table-cell; inside a wrapper/container div w/ display:table;, put width:100%; on the border image to stretch across the container and push the small ornament image to the right.

This is a good thread for opinions on how to handle the image; css bg vs. inline.

Upvotes: 0

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9012

This is the closest I got with just pure html and css and no images

*{box-sizing:border-box;}
.container {
    padding-right:30px;
    position:relative;
    width:300px
}
h2 {
    color:purple;
    border-bottom:1px solid purple;
    padding:bottom:5px;
    margin-bottom:1px;
}
.line {
    height:3px;
    background-color:purple;
    margin:0;
    position:relative;
}
.line:after {
    width: 6px; 
    height: 6px; 
    background: white;
    border:4px solid purple;
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px;
    position:absolute;
        right: -20px;
    bottom: -5px;
    z-index: 100;
    content: "";
}
.line:before {
    width: 16px; 
    height: 16px; 
    background: white;
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px;
    position:absolute;
        right: -22px;
    bottom: -6px;
    z-index: 100;
    content: "";
}
.shape { 
    width: 10px; 
    height: 10px; 
    background: purple; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px;
    position:absolute;
    z-index: 100;
    position:absolute;
    right:0px;
    bottom:0px;
} 
.shape:before { 
    width: 10px; 
    height: 10px; 
    background: purple; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px;
    position:absolute;
    left:0px;
    top:5px;
    z-index: 100;
    content: "";
}

.shape:after { 
    width: 10px; 
    height: 10px; 
    background: purple; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px;
    position:absolute;
    left: 5px;
    top: 2px;
    z-index: 100;
    content: "";
    transform: scale(1,0.8);
} 
    
<div class="container">
   <h2>You header</h2>
    <div class="shape"></div>
    <div class="line"></div>
    
</div>

Upvotes: 0

Christoph
Christoph

Reputation: 51191

You have several options to achieve this:

1) multiple background images

Declare the decorative element as second background image and position it to the right with no-repeat.

Browser support: very good

2) border-image

You can take your image as it is and declare it as border image.

browser support: good (with some exceptions)

3) pseudo element

use a pseudo element which has the decorative element as background image and place it accordingly in the lower corner.

browser support: excellent - all browsers support this (even down to IE8)

Upvotes: 7

Related Questions