Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Miscellaneous >> CSS3 3D Ribbon Banner


Code Snippet </> Info


Snippet Name: CSS3 3D Ribbon Banner

Description: Add a cool 3D ribbon banner to your page using no images!
Example: View Code Demo

Note:

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2015-08-26 22:48:14

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!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 http://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>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library