Home Programming [CSS] Headline design summary. With sample code!
Programming

[CSS] Headline design summary. With sample code!

by Yasir Aslam
by Yasir Aslam 0 comment

By reading this article, you will be able to understand the types of designs that can be achieved using CSS and how to implement them.

Table of contents

  • Simple headline design made with CSS
    • Headings with lines on the left and right
    • Headings with brackets
    • headlines with icons
  • Cool headline design with CSS
    • headline with reflected text
    • Headline with diagonal stripes background
    • headline with symbols
  • Cute headline design made with CSS
    • tag style headline
    • ribbon headline
    • headline with checkered background
  • Stylish headline design made with CSS
    • Headings with icons and borders
    • Heading with gradient background
    • Headings with boxes and subtitles
  • Handwritten headline design made with CSS
    • Handwritten style English headline
    • Headings with background boxes that look like handwriting
  • Speech bubble headline design made with CSS
    • simple speech bubble
    • thought wind headline
    • line-only callout
  • summary

Simple headline design made with CSS

I will introduce three headline designs that can be implemented in a simple yet stylish way using CSS.

It can be created with relatively simple code, so please use it as a reference when you want to add one point to your headline design.

Headings with lines on the left and right

HTML

<body>
  <h2 class="line"></h2>
</body>

CSS

.line {
      text-align: center;
      position: relative;
}

.line::before,
.line::after {
      content: '';
      width: 60px;
      height: 4px;
      display: block;
      background-color: #f89019;
}

.line::before {
      position: absolute;
      top:50%;
      left:38%;
      transform: translateY(-50%);
}
.line::after {
      position: absolute;
      top:50%;
      right:38%;
      transform: translateY(-50%);
}

A heading with a simple design that displays lines on the left and right of the element.

Lines are created using the before and after pseudo-elements, and are implemented by specifying left and right using the position property.

Headings with bracket

HTML

<body>
  <h2 class="line"></h2>
</body>

CSS

.line{
  position: relative;
  padding: 10px;
  text-align: center;
  width:80%;
  margin: 0 auto;
}
.line:before,
.line:after {
  position: absolute;
  content: '';
}

.line:after {
  top: 0;
  left: 0;
  width: 45px;
  height: 45px;
  border-top: 4px solid #000000;
  border-left: 4px solid #000000;
}
.line:before {
  right: 0;
  bottom: 0;
  width: 45px;
  height: 45px;
  border-right: 4px solid #000000;
  border-bottom: 4px solid #000000;
}

Heading design with brackets added to the top left and bottom right of the heading. The square brackets are created with pseudo-elements, and the position property specifies the top left and bottom right.

The border-top and border-left properties create the top left bracket, and the border-bottom and border-right properties create the bottom right bracket.

By changing the size of the border, you can change the thickness of the brackets and change the color, so it would be a good idea to actually use the above code to move it.

headlines with icons

HTML

<body>
  <h2 class="line"></h2>
</body>

CSS

.line{
  text-align: center;
  position: relative;
}

.line:before{
    font-family: 'Font Awesome 5 Free';
    content: '\f5d2';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-90px, -50%);
    color: #2566f1;
}

A headline design with an icon added to the left part of the headline. Adding icons can be easily implemented using a service called FontAwesome.

If you do not know how to use FontAwesome, please refer to this article for detailed explanations.

You can change the color of the icon specified by FontAwesome with the color property, so please try it out.

Cool headline design with CSS

I will explain how to implement a cool design in the headline using CSS.

headline with reflected text

HTML

<body>
  <h2 class="line"></h2>
</body>

CSS

.line{
  text-align: center;
  color: #5bf782;
  line-height: 1.4;
  -webkit-box-reflect: below -10px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 10%,rgba(0, 0, 0, 0.6));
}

A headline design in which the headline characters are reflected downward. The -webkit-box-reflect property is used to specify the gradation of the reflection location and the color of the reflected text.

Headline with diagonal stripes background

HTML

<body>
  <h2 class="test"></h2>
</body>

CSS

.test{
  text-align: center;
  background: linear-gradient(
    -45deg, white 20%, #98d3f5 40%,#98d3f5 55%, 
#fff 55%, #fff 75%, #98d3f5 75%,#98d3f5
    );
    background-size: 35px;
    width: 50%;
    margin: 0 auto;
}

A headline design with 45-degree diagonal stripes in the background. linear-gradient is a function that can specify the angle of an element and multiple colors at once . By specifying the linear-gradient function in the background property, the type of color, the ratio of the color scheme, and the angle of the element are implemented.

headline with symbols

HTML

<body>
  <h2 class="test"><span>01</span>CS
</body>

CSS

.test {
    position: relative;
    overflow: hidden;
    padding: 20px 20px 20px 150px;
    border: 3px solid #000000;
}

.test:before {
    position: absolute;
    top: -107%;
    left: -24px;
    content: '';
    width: 150px;
    height: 230%;
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
    background: #000;
}
.test span {
    font-size: 50px;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 18px;
    color: #fff;
}

A headline design that implements a number symbol on the right side of the title. The diagonal symbol design creates a box using the before pseudo-element and specifies the angle diagonally with the transform property.

By specifying “overflow: hidden;” in the test class and hiding the extra elements of the box created in before, a diagonally separated design is realized.

Cute headline design made with CSS

Here are some headline designs that are suitable when you want to add cuteness to your headline. Please use it as a reference when you want to add cuteness to your web page.

tag style headline

Images with tag-style headings

HTML

<body>
  <div class="center">
    <h2 class="test">CSS見出し</h2>
  </div>
</body>

CSS

.test{
    position: relative;
    display: inline-block;
    padding: 15px 20px 15px 40px;
    color: #ffffff;
    border-radius: 35px 0 0 35px;
    background: #85f1ec;
}
.center{
  text-align: center;
}
.test:before {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #ffffff;
}

A heading that implements a tag-like design by adding roundness to the left. The border-radius property adds a roundness to the left side of the heading, and the before pseudo-element creates a circle inside the tag.

ribbon headline

ribbon headline image

HTML

<body>
  <div class="center">
    <div class="container">
      <h2></h2>
    </div>
  </div>
</body>

CSS

.center{
   text-align: center;
}
.container {
   position: relative;
}
.container:before {/
  content: '';
  position: absolute;
  width: 5px;
  bottom: -10px;
  left: 376px;
  z-index: -2;
  border: 20px solid #f3af56;
  border-left-color: transparent;
}

.container:after {/
  content: '';
  position: absolute;
  width: 5px;
  bottom: -10px;
  right: 376px;
  z-index: -2;
  border: 20px solid #f3af56;
  border-right-color: transparent;/
}

.container h2 {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 10px 20px;
  font-size: 18px;
  color: #FFF;
  background: #f35221;
}
.container h2:before {/*左の折込*/
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border-bottom: solid 10px transparent;
    border-right: solid 10px #b56b39;
}
.container h2:after {/*右の折込*/
  position: absolute;
  content: '';
  top: 100%;
  right: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-left: solid 10px #b56b39;
}

Heading design with a three-dimensional effect with ribbons on the left and right. Pseudo-elements are used on the left and right of the h2 tag, and a triangle with a darker color than the heading is specified to create the folding part.

The ribbon part is specified on the left and right of the heading with “position: absolute;” based on the div tag that specifies the .container class. It uses the border property to implement the shape of the ribbon.

headline with checkered background

HTML

<body>
    <h2 class="test"></h2>
</body>

CSS

.test{
    padding: 20px;
    color: #000fe5;
    background: linear-gradient(45deg, #dbf4f9 25%, transparent 25%, transparent 75%, #dbf4f9 75%, #dbf4f9),
    linear-gradient(45deg, #dbf4f9 25%, transparent 25%, transparent 75%, #dbf4f9 75%, #dbf4f9);
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
    text-align: center;
}

A headline design that specifies a two-color check pattern for the background of the headline. The check pattern is implemented by specifying the linear-gradient function that can place two or more colors in one element as the background property.

A rectangle is created by using two linear-gradient functions and setting the angle to 45 degrees.

Stylish headline design made with CSS

Here are some recommended headlines for those who want to make their headlines stylish and catch the attention of users.

Even among the fashionable headlines, the content is relatively easy to implement, so everyone from programming beginners to advanced users should check it out!

Headings with icons and borders

HTML

<body>
  <h2 class="test">CSS</h2>
</body>

CSS

.test{
    position:relative;
    border-bottom:3px solid #819dfa;
    padding-left: 27px;
}
.test:before {
    font-family: 'Font Awesome 5 Free';
    content: '\f5d2';
    color:#6989f3;
    display: block;
    position: absolute;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
}

Headline design with icons and underlines. Add an icon with FontAwesome and specify it on the left side with “position: absolute;”.

Underlining is implemented with the border-bottom property.

Heading with gradient background

Heading image with gradient background

HTML

<body>
  <h2 class="test">C</h2>
</body>

CSS

.test{
  padding: 15px 20px;
  color: #ffffff;
  width:80%;
  margin: 0 auto;
  -webkit-transform: skew(-20deg);
  transform: skew(-20deg);
  background-image: -webkit-linear-gradient(linear, left top, right top, from(#ff7920), to(#d8e068));
  background-image: -webkit-linear-gradient(left, #ff7920 0%, #d8e068 100%);
  background-image: linear-gradient(to right, #ff7920 0%, #d8e068 100%);
}

A headline design that uses a gradient color for the background. I added a fancy element by using the transform property to make the angle oblique by 20 degrees.

The “to right” in the linear-gradient function has the role of gradating the color to the right . The gradation is a code that starts with the color code “#ff7920” and ends with “#d8e068”.

Headings with boxes and subtitles

HTML

<body>
  <h2 class="test">CSSh2>
</body>

CSS

.test {
  position:relative;
  padding:20px;
  border:5px solid #8da1fc;
  width:50%;
  margin: 30px auto;
}
.test:after {
  content:"チェックポイント";
  position:absolute;
  top: -20px;
  left: 15px;
  background-color:#ffffff;
  font-size:22px;
  font-weight:bold;
  color:#4466fd;
  padding:0 5px;
}

A headline design that surrounds the headline with a border and adds a subtitle to the upper left. It is recommended not only as the main headline, but also as a focal point in the text of the content.

The border around the heading is created with the border property. The subtitle is placed in the upper left with “position: absolute;” with the subtitle name specified in the after pseudo element.

Handwritten headline design made with CSS

There are many neat and stylish designs in the headline of the web page. Among them, using a slightly broken handwritten headline has the advantage of being able to differentiate from other web pages.

There are some web pages where handwritten headlines are a better fit. For example, when creating a web page for children or housewives, using a headline with a handwritten design can add warmth and familiarity.

Please use it according to the scene!

Handwritten style English headline

HTML

<body>
  <h2 class="test">CSS見出し</h2>
</body>

CSS

.test {
    font-size: 30px;
    margin-top: 60px;
    text-align: center;
    position: relative;
}
.test::before {
    content:"Contents";
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%) rotate(-8deg);
    color: rgb(233, 108, 108, 0.4);
    font-size: 60px;
    font-family: luxus-brut, cursive;
    font-style: italic;
    z-index: -1;
}

A headline design that specifies handwritten-style letters in the background of the headline. The characters displayed in the before pseudo-element are changed to handwritten fonts with the font-family property.

Place handwritten-style characters at any position with “position: absolute;” and specify “z-index: -1;” so that the characters do not overlap.

Headings with background boxes that look like handwriting

HTML

<body>
  <h2 class="test">CSS見出し</h2>
</body>

CSS

.test{
  padding:20px;
  border:3px solid #81c1f8;
  -webkitborder-radius: 41px 35px 50px 11px/11px 50px 35px 41px;
  -moz-border-radius: 41px 35px 50px 11px/11px 50px 35px 41px;
  border-radius: 41px 35px 50px 11px/11px 50px 35px 41px;
  width:80%;
  margin:0 auto;
}

A headline design that implements irregular borders like handwriting. The border-radius property is used to add roundness to the four sides of the border, and by changing the roundness of each corner, you can achieve an irregular border like handwriting.

Speech bubble headline design made with CSS

I will explain how to create a headline like a speech bubble using CSS.

Speech bubble headlines can be used as conversational content on web pages, so they have the advantage of being widely used.

simple speech bubble

HTML

<body>
  <h2 class="test">CSS見出し</h2>
</body>

CSS

.test {
    position: relative;
    color: #ffffff;
    border-radius: 25px;
    background: rgb(2, 60, 168);
    width: 80%;
    padding: 20px;
    margin: 0 auto;
}
.test:after {
    position: absolute;
    bottom: -19px;
    left: 30px;
    content: '';
    border-width: 20px 20px 0 20px;
    border-style: solid;
    border-color: rgb(2, 60, 168) transparent transparent transparent;
}

It is an orthodox balloon-style headline design. The border property of the pseudo-element is used to create a triangle and place it at the bottom of the box to implement a balloon-like shape.

If you specify it next to the triangle, it is also possible to create a LINE-style balloon. It would be a good idea to touch the sample code and place it where you like.

thought wind headline

HTML

<body>
  <h2 class="test">CSS見出し</h2>
</body>

CSS

.test {
    position: relative;
    padding: 20px;
    border-radius: 20px;
    background: rgb(158, 243, 222);
    width: 80%;
    margin: 0 auto;
}

.test:before,
.test:after {
  position: absolute;
  content: '';
  border-radius: 50%;
  background: rgb(158, 243, 222);
}

.test:before {
    bottom: -13px;
    left: 30px;
    width: 35px;
    height: 35px;
}

.test:after {
    bottom: -32px;
    left: 53px;
    width: 17px;
    height: 17px;
}

A balloon-style headline design that embodies the content of your thoughts. Create two elements with before and after pseudo elements, and change them to a circular shape with the border-radius property.

Adjust the size with width and height, place it at the bottom of the heading with the position property, and you’re done.

line-only callout

HTML

<body>
  <h2 class="test">CSS見出し</h2>
</body>

CSS

.test{
    position: relative;
    padding: 15px 20px;
    border-bottom: 3px solid #000;
    width:80%;
    margin: 0 auto;
}

.test:before {
    position: absolute;
    left: 50px;
    bottom: -40px;
    content: '';
    border-width: 20px;
    border-style: solid;
    border-color: #000000 transparent transparent transparent;
}

.test:after {
    position: absolute;
    left: 50px;
    bottom: -36px;
    content: '';
    border-width: 20px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
}

A simple balloon-like headline design that specifies only the underline and balloon part. Only the line at the bottom of the element is displayed by specifying the border-bottom property for the class selector that displays the heading.

There are two types of triangles used for balloons, one with the same color as the headline and one with the same color as the border. A triangle with the same color as the heading serves to hide the border and the boundaries of the triangle.

summary

This time, I introduced 17 headline designs made with CSS. How was it?

The CSS properties used in heading design are somewhat limited. The following CSS is commonly used for headline design.

  • Pseudo-elements: A technique for implementing styles on parts of an element. It is also possible to create pseudo-elements.
  • position: You can specify the position of the element.
  • border: You can show or hide borders outside the element.
  • linear-gradient: A function that can specify multiple colors for the specified element and adjust the angle.
You Might Also Like

You may also like

Summary of how to align elements horizontally with CSS! Can...

What is Programming? 5 characteristics of unsuitable people!

[CSS] How to change the order of flex items with...

10 services that allow you to write and execute programming...

Test your programing skills! 5 Recommended Skill Check Sites!

[CSS] How to specify the color of the link?

Adding shadows to text is easy with the CSS text-shadow...

Introducing tips for drawing triangles with CSS!

[2023] Best practices for Page Redirect in JavaScript !

How to Edit CSS to Change WordPress Design?

Leave a Comment

Save my name, email, and website in this browser for the next time I comment.