CSS Ribbon Headings
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 - 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;
}
Developer | Hai Nguyen |
Username | HaiNguyen007 |
Uploaded | January 29, 2023 |
Rating | 3 |
Size | 3,068 Kb |
Views | 2,024 |
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!
Name | Size |
Equal Height and Width Columns using Flexbox | 2,015 Kb |
Sticky footer without fixed height | 2,288 Kb |
Creating Different CSS3 Box Shadows Effects | 1,814 Kb |
CSS Folded Corner Effect with Border Radius and Shadow | 2,605 Kb |
Sticky section header | 2,528 Kb |
A Pen by Hai Nguyen | 2,171 Kb |
Sticky notes with CSS3 | 2,146 Kb |
Fixed Header Shadow | 3,112 Kb |
Ribbons with Dynamic Text | 0 Kb |
Css-sticky-notes | 1,995 Kb |
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!
Name | Username | Size |
Toggle menu | Seyedi | 2,279 Kb |
Parallax with only CSS | Thulioph | 2,297 Kb |
P1 | Vivi_Lai | 1,533 Kb |
Flat UI Button | Honchoman | 2,289 Kb |
Css or Czz.. | Judag | 4,111 Kb |
A Pen by Michael Parenteau | Michaelparenteau | 2,133 Kb |
Twitch JSON API | Jvhti | 2,808 Kb |
Parallax scrolling scene | Iharosi | 2,485 Kb |
Drag in vanilla js using dotval math instead of translate | Paulq | 2,662 Kb |
No Vacancy 404 CSS Only | Sethkontny | 0 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!