| CSS3 3D Ribbon Banner - Add a cool 3D ribbon banner to your page using no images! Example: View Code Demo |
<!DOCTYPE html>
<html>
<head>
<title>HTML5 CSS3 3D Ribbon Banner</title>
<style>
/* Begin HTML5 CSS3 3D Ribbon Banner */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library == */
/* == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000;}
#wrapper {margin:0; padding:15px 15px 15px 15px;}
.ribbon {
width:460px; /* specify width of banner */
font-size:16px !important;
position:relative;
background:#ba89b6; /* specify banner bg color */
color:#ffff00; /* specify banner text color */
text-align:center;
padding:1em 2em;
margin:auto;
}
.ribbon:before, .ribbon:after {
content:"";
position:absolute;
display:block;
bottom:-1em;
border:1.5em solid #986794; /* specify border color */
z-index:-1;
}
.ribbon:before {
left:-2em;
border-right-width:1.5em;
border-left-color:transparent;
}
.ribbon:after {
right:-2em;
border-left-width:1.5em;
border-right-color:transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
content:"";
position:absolute;
display:block;
border-style:solid;
border-color:#804f7c transparent transparent transparent; /* specify inside bottom fold bg color */
bottom:-1em;
}
.ribbon .ribbon-content:before {
left:0;
border-width:1em 0 0 1em;
}
.ribbon .ribbon-content:after {
right:0;
border-width:1em 1em 0 0;
}
</style>
</head>
<body>
<div id="wrapper">
<h3 align="center">HTML5 CSS3 3D Ribbon Banner</h3>
<h1 class="ribbon"><strong class="ribbon-content">This is an awesome ribbon</strong></h1>
<br /><br />
<div align="center">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_209.html">HTML5 CSS3 3D Ribbon Banner Code Snippet</a> page. ]
</div>
</div>
</body>
</html>
|
Scroll