Attractive HTML Tab Style

Written by @kerixa 3 March 2021

Tabs are usually used when you are out of space in your website and want to encapsulate the contents. In addition to its performance, there is a need to design them stylishly. With the following code example, you will see how to design attractive HTML tabs.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
html, body {
    font-size: 16px;
    line-height: 1.7rem;
    font-family: "Open Sans";
    width: 100%;
    height: 100%;
}

    #container {
        width: 386px;
        float: right;
        margin: 2rem auto 0;
        justify-content: space-around;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    #container h1 {
        flex-basis: 100%;
        text-align: center;
        color: #555;
        font-size: 3rem;
        font-weight: 100;
    }

    #container .column {
        flex-basis: 30%;
        flex-grow: 1;
        flex-shrink: 1;
        max-width: 336px;
    }

.card {
    font-size: 1.1rem;
    font-weight: 400;
    margin: 2rem 0;
    padding: 0 0 1rem 0;
    width: 100%;
    box-shadow: 0.3rem 0.3rem 2rem -2px rgba(51, 51, 51, 0.41);
}

    .card p {
        margin: 0 1rem 1rem 1rem;
        color: #333;
        font-size: 1.2rem;
        font-weight: 300;
    }

        .card p:last-child {
            margin-bottom: 0;
        }

.tab-heading {
    font-family: "Open Sans";
    font-weight: 600;
    border-top: 0.3rem solid #03a9f4;
    margin: 0 0 1rem 0;
    color: #fdfdfd;
    background-color: transparent;
    display: flex;
    justify-content: flex-start;
    position: relative;
}

.tab-heading:before, .tab-heading:after {
	content: "";
	display: block;
	width: 1rem;
	height: 1rem;
	background-color: transparent;
	background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="#" width="100" height="100"><path fill="#03a9f4" id="concaveCurve" fill-rule="evenodd" d="M0 0c100 0 100 100 100 100V0z"/></svg>');
	background-size: contain;
	background-repeat: no-repeat;
	margin-top: -1px;
}

.tab-heading:before {
	margin: 0 0 0 1rem;
}

.tab-heading:after {
	transform: rotateZ(270deg);
}

.tab-heading .text {
	display: block;
	background-color: #03a9f4;
	padding: 0.2rem 1rem 0.5rem;
	border-color: #03a9f4;
	border-bottom-right-radius: 1rem;
	border-bottom-left-radius: 1rem;
	position: relative;
	box-shadow: 0.1rem 0.4rem 0.5rem -3px rgba(0, 0, 0, 0.56);
	margin-top: -1px;
}

.tab-heading .text:before, .tab-heading .text:after {
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
}

.tab-heading .text:before {
	bottom: 0.4rem;
	right: 0.9rem;
	width: 75%;
	height: 1.6rem;
	box-shadow: 0.8rem 0.4rem 1rem -0.9px rgba(0, 0, 0, 0.76);
	transform: rotate(6deg);
	border-bottom-right-radius: 1rem;
}

.tab-heading .text:after {
	top: -0.7rem;
	right: 0.65rem;
	transform: rotate(20deg);
	content: "(";
	color: transparent;
	font-size: 1.7rem;
	font-weight: 900;
	text-shadow: 1rem 0 0.4rem black;
}

.tab-heading.right, .tab-heading.snatch, .tab-heading.face-off, .tab-heading.terminator-2, .tab-heading.sherlock-holmes, .tab-heading.the-incredibles, .tab-heading.deadpool {
	justify-content: flex-end;
}

.tab-heading.right:before, .tab-heading.snatch:before, .tab-heading.face-off:before, .tab-heading.terminator-2:before, .tab-heading.sherlock-holmes:before, .tab-heading.the-incredibles:before, .tab-heading.deadpool:before {
	margin: 0;
}

.tab-heading.right:after, .tab-heading.snatch:after, .tab-heading.face-off:after, .tab-heading.terminator-2:after, .tab-heading.sherlock-holmes:after, .tab-heading.the-incredibles:after, .tab-heading.deadpool:after {
	margin: 0 1rem 0 0;
}

.tab-heading.right .text, .tab-heading.snatch .text, .tab-heading.face-off .text, .tab-heading.terminator-2 .text, .tab-heading.sherlock-holmes .text, .tab-heading.the-incredibles .text, .tab-heading.deadpool .text {
	box-shadow: -0.1rem 0.4rem 0.5rem -3px rgba(0, 0, 0, 0.56);
}

.tab-heading.right .text:before, .tab-heading.snatch .text:before, .tab-heading.face-off .text:before, .tab-heading.terminator-2 .text:before, .tab-heading.sherlock-holmes .text:before, .tab-heading.the-incredibles .text:before, .tab-heading.deadpool .text:before {
	left: 0.9rem;
	box-shadow: -0.8rem 0.4rem 1rem -0.9px rgba(0, 0, 0, 0.76);
	transform: rotate(-6deg);
	border-bottom-left-radius: 1rem;
}

.tab-heading.right .text:after, .tab-heading.snatch .text:after, .tab-heading.face-off .text:after, .tab-heading.terminator-2 .text:after, .tab-heading.sherlock-holmes .text:after, .tab-heading.the-incredibles .text:after, .tab-heading.deadpool .text:after {
	left: 0.65rem;
	right: auto;
	transform: rotate(-20deg);
	content: ")";
	text-shadow: -1rem 0 0.4rem black;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">


<div id="container">
  <h1>Moving Pictures</h1>
  <div class="column">
    <div class="card inception">
      <h3 class="tab-heading inception">
        <div class="text">Inception</div>
      </h3>
      <p>A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.</p>
    </div>
  </div>
</div>
<font face="Tahoma"><a target="_blank" href="http://www.htmlfreecode.com/"><span style="font-size: 8pt; text-decoration: none">HTML Free Code</span></a></font><a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300