DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Cool headings with pseudo-elements

Cool headings with pseudo-elements

Catalin  Red user avatar by
Catalin Red
·
May. 10, 12 · Web Dev Zone · Interview
Like (0)
Save
Tweet
4.21K Views

Join the DZone community and get the full member experience.

Join For Free

Whether you’re designing a website or a web application, you’ll need custom styles for headings like h1 or h2. In this article you’ll learn how to create some cool headings effects using CSS pseudo-elements.

View demo

Introduction

So, why pseudo-elements? The answer is very simple: there is no need to add extra markup. This fit perfectly for the heading we’re going to create here.

The HTML

<h1 class="headline1">I took lessons</h1>

As you can see above, there is no rocket science here. Just a simple HTML heading with a CSS class that will properly style it. All the other headings use a similar HTML structure, so it can’t easier than that.

<link href="http://fonts.googleapis.com/css?family=Droid+Sans:700" rel='stylesheet' type='text/css'>

Also, for this demo, we’ll use a Google custom font.

The CSS

Further, we’ll use the body as our main wrapper:

body{
        width: 60%;
        margin: 50px auto;
        padding: 15px;
        position: relative; /*needed for heading4 rule*/
        z-index: 0; /* again, just for heading4 rule*/
        border: 7px solid #cecece;
        border: 7px solid rgba(0,0,0,.05);
        background: #fff;
        background-clip: padding-box;
        box-shadow: 0 0 2px rgba(0, 0, 0, .5);
}

h1{
        font-family: 'Droid Sans', sans-serif;
        font-size: 22px;
}

Noticed the background-clip: padding-box declaration? This will help you achieve a cool effect: transparent borders for the main wrapper. Basically, the background-clip CSS property specifies whether an element’s background, either the color or image, extends underneath its border.


Browser support for background-clip: Safari 5+, Chrome 7+, Firefox 3.6+, Opera 10+, IE 9+

Headline 1

Below is a simple and good looking effect made using CSS border property:


.headline1 {
        border-bottom: 1px dashed #aaa;
        border-left: 7px solid #aaa;
        border-left: 7px solid rgba(0,0,0,.2);
        margin: 0 -15px 15px -22px;
        padding: 5px 15px;
}

Headline 2

This style is made using a CSS triangle shape, you’ve seen this before here:


.headline2 {
        border-bottom: 1px solid #aaa;
        margin: 15px 0;
        padding: 5px 0;
        position: relative;
}

.headline2:before,
.headline2:after{
        content: '';
        border-right: 20px solid #fff;
        border-top: 15px solid #aaa;
        bottom: -15px;
        position: absolute;
        left: 25px;
}

.headline2:after{
        border-top-color: #fff;
        border-right-color: transparent;
        bottom: -13px;
        left: 26px;
}

Headline 3

The below HTML heading style is created using the ribbon effect:


.headline3{
  position: relative;
  margin-left: -22px; /* 15px padding + 7px border ribbon shadow*/
  margin-right: -22px;
  padding: 15px;
  background: #e5e5e5;
  background: -moz-linear-gradient(#f5f5f5, #e5e5e5);
  background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
  background: -webkit-linear-gradient(#f5f5f5, #e5e5e5);
  background: -o-linear-gradient(#f5f5f5, #e5e5e5);
  background: -ms-linear-gradient(#f5f5f5, #e5e5e5);
  background: linear-gradient(#f5f5f5, #e5e5e5);
  -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset;
  -moz-box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset;
  box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset;
  text-shadow: 0 1px 0 #fff;
}

.headline3:before, .headline3:after{
  position: absolute;
  left: 0;
  bottom: -6px;
  content:'';
  border-top: 6px solid #555;
  border-left: 6px solid transparent;
}

.headline3:before{
  border-top: 6px solid #555;
  border-right: 6px solid transparent;
  border-left: none;
  left: auto;
  right: 0;
  bottom: -6px;
}

Headline 4

Using box-shadow, you can create some slick effects:


.headline4{
        position: relative;
        border-color: #eee;
        border-style: solid;
        border-width: 5px 5px 5px 0;
        background: #fff;
        margin: 0 0 15px -15px;
        padding: 5px 15px;
        -moz-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
        -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
        box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}

.headline4:after
{
        content: "";
        position: absolute;
        z-index: -1;
        bottom: 15px;
        right: 15px;
        width: 70%;
        height: 10px;
        background: rgba(0, 0, 0, .7);
        -webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
        -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
        box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
        -webkit-transform: rotate(2deg);
        -moz-transform: rotate(2deg);
        -o-transform: rotate(2deg);
        -ms-transform: rotate(2deg);
        transform: rotate(2deg);
}

View demo

Conclusion

I hope you liked my headings examples, and if you have some other cool ones to add, feel free to share your thoughts with us. Thanks you for reading!


If you enjoyed this article, you might also like:

  • CSS filter effects in action
  • Interactive menu with CSS3 & jQuery
  • CSS Variables Preview
  • CSS3 loading animation experiment
  • CSS3 signup form
CSS

Published at DZone with permission of Catalin Red, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Real-Time Supply Chain With Apache Kafka in the Food and Retail Industry
  • How to Optimize MySQL Queries for Speed and Performance
  • Role of Development Team in an Agile Environment
  • Stupid Things Orgs Do That Kill Productivity w/ Netflix, FloSports & Refactoring.club

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo