CSS Ribbon Headings

Developer
Size
3,068 Kb
Views
2,024

How do I make an css ribbon headings?

This is a demo on creating ribbon effects for headings (that we all love). Forked from Ravindu Liyanapathirana's Pen CSS Ribbon Headings.. What is a css ribbon headings? How do you make a css ribbon headings? This script and codes were developed by Hai Nguyen on 29 January 2023, Sunday.

CSS Ribbon Headings Previews

CSS Ribbon Headings - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Ribbon Headings</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Pathway+Gothic+One' rel='stylesheet' type='text/css'>
<div id="main"> <h1 class="left">This is the title</h1> <p>This is a paragraph</p> <h2 class="left">This is the title</h2> <p>This is a paragraph</p> <h3 class="left">This is the title</h3> <p>This is a paragraph</p> <h4 class="left">This is the title</h4> <p>This is a paragraph</p> <h5 class="left">This is the title</h5> <p>This is a paragraph</p> <h6 class="left">This is the title</h6> <p>This is a paragraph</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

CSS Ribbon Headings - Script Codes CSS Codes

html { width: 100%; height: 100%;
}
html body { margin: 0; padding: 0; width: 100%; height: 100%; background-color: #2c3e50; min-width: 600px;
}
html body * { box-sizing: border-box; font-family: "verdana", sans-serif; font-weight: lighter;
}
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 { font-family: "Pathway Gothic One", sans-serif;
}
html body p { color: rgba(255, 255, 255, 0.5);
}
html body #main { width: 500px; height: 100%; margin: 0 auto; background-color: #9b59b6; box-shadow: inset 5px 0px #8e44ad; padding: 20px; /* MAIN HEADING ADJUSTMENTS */ /* INDIVIDUAL HEADING ADJUSTMENTS */
}
html body #main h1, html body #main h2, html body #main h3, html body #main h4, html body #main h5, html body #main h6 { /* 'left' class */
}
html body #main h1.left, html body #main h2.left, html body #main h3.left, html body #main h4.left, html body #main h5.left, html body #main h6.left { color: #056853; background-color: #1abc9c; display: table; padding: 10px; padding-left: 30px; position: relative; left: -30px;
}
html body #main h1.left:before, html body #main h2.left:before, html body #main h3.left:before, html body #main h4.left:before, html body #main h5.left:before, html body #main h6.left:before { content: " "; position: absolute; top: 100%; left: 0; z-index: -1; border-color: #0e7f68 #0e7f68 transparent transparent; border-width: 3px 5px; border-style: solid;
}
html body #main h1.left:after, html body #main h2.left:after, html body #main h3.left:after, html body #main h4.left:after, html body #main h5.left:after, html body #main h6.left:after { content: " "; height: 0px; position: absolute; top: 30%; left: -20px; z-index: -2; border-color: #16a085 #16a085 #16a085 transparent; border-style: solid;
}
html body #main h1.left:after { border-width: 23px 15px;
}
html body #main h2.left:after { border-width: 20px 15px;
}
html body #main h3.left:after { border-width: 18px 15px;
}
html body #main h4.left:after { border-width: 17px 15px;
}
html body #main h5.left:after { border-width: 16px 15px;
}
html body #main h6.left:after { border-width: 15px 15px;
}
CSS Ribbon Headings - Script Codes
CSS Ribbon Headings - Script Codes
Home Page Home
Developer Hai Nguyen
Username HaiNguyen007
Uploaded January 29, 2023
Rating 3
Size 3,068 Kb
Views 2,024
Do you need developer help for CSS Ribbon Headings?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Hai Nguyen (HaiNguyen007) Script Codes
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!