3D Multiple Borders for aText

Written by @kerixa 6 March 2021

Texts are always very important in sites and used to introduce the concepts needed and provide the essential contents. However, using beautiful styles suchs as innovative borders will attract more attention to your site. The following code example is one of these styles and shows the text along with several borders in a hierarchical way which are merged on hover.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
.card {
    background-color: var(--background);
    display: block;
    background-image: linear-gradient(to right, #eeccff, #ccccff, #b3e0ff, #b3ffb3, #ffffb3, #ffcc99, #ff8566);
    width: 300px;
    min-height: 90px;
    border: 3px solid var(--primary);
    padding: 15px;
    margin: calc(50vh - 30px) auto 0 auto;
    box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--green), 20px -20px 0 -3px var(--background), 20px -20px var(--yellow), 30px -30px 0 -3px var(--background), 30px -30px var(--orange), 40px -40px 0 -3px var(--background), 40px -40px var(--red);
    transition: box-shadow 1s, top 1s, left 1s;
    position: relative;
    top: 0;
    left: 0;
    cursor: pointer;
}

.card:hover {
	top: -40px;
	left: 40px;
	box-shadow: 0 0 0 -3px var(--background), 0 0 0 0 var(--green), 0 0 0 -3px var(--background), 0 0 0 0 var(--yellow), 0 0 0 -3px var(--background), 0 0 0 0 var(--orange), 0 0 0 -3px var(--background), 0 0 0 0 var(--red);
}

:root {
    --primary: black;
    --secondary: pink;
    --background: white;
    --green: lightpink;
    --yellow: purple;
    --orange: lightblue;
    --red: blue;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-image: radial-gradient(var(--secondary) 30%, var(--background) 30%);
    background-size: 2px 3px;
    color: var(--primary);
}

.card p {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    font-weight: bold;
    font-family: 'Langar', cursive;
}

.card h2 {
    font-size: 14px;
    font-family: 'Permanent Marker', cursive;
    font-weight: normal;
}
</style>

<link href="https://fonts.googleapis.com/css2?family=Langar&family=Permanent+Marker&display=swap" rel="stylesheet">
<div class="card">
  <p><u>
    The Orignals</u>
  </p>
  <h2>
    The fictitious yet most adorable webseries present.
  </h2>
</div>
<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