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 Ribbon With 3D Depth


Code Snippet </> Info


Snippet Name: CSS3 Ribbon With 3D Depth

Description: Add a CSS3 3D Ribbon that has a lot of depth to your web page.
Example: View Code Demo

Note:

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2015-08-26 22:46:47

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> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>HTML5 CSS3 Ribbon With 3D Depth</title> <link href="http://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet" type="text/css"> <style> /* Begin HTML5 CSS3 Ribbon With 3D Depth */ /* == 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 == */ html {margin:0; padding:0;} BODY {font-family:verdana,arial,ms sans serif; font-size:100%; background-color:#ffffff; color:#000000; text-shadow:0px 1px 1px rgba(0,0,0,0.2);} a {color:#69C;text-decoration:none;} a:hover {color:#F60; text-decoration:underline;} .triangles { width:320px; height:-0px; background-color:transparent; border: 20px solid #gray; border-right-color: transparent; border-left-color: transparent; border-bottom-color: transparent; margin-left:-20px; z-index:-30; position: relative; } .front { background-color:silver; width:360px; height:40px; z-index:100; margin-left:-20px; position:relative; } .shadow { box-shadow:0px 0px 8px rgba(0,0,0,0.3); -webkit-box-shadow:0px 0px 8px rgba(0,0,0,0.3); -moz-box-shadow:0px 0px 8px rgba(0,0,0,0.3); } #shadtext {padding:12px; font-weight:bold; text-align:center; text-shadow:1px 1px 1px rgba(0,0,0,0.3);} .content { background-color:#e9e9e9; width:320px; height:200px; z-index:90; padding-top:20px; clear: both; margin:auto; } </style> </head> <body> <div id="container"> <div class="content shadow"> <div class="front shadow"><p id="shadtext">CSS3 Ribbon with 3D Depth</p></div> <div class="triangles"></div> </div> </div> <h3>HTML5 CSS3 Ribbon With 3D Depth</h3> <br /><br /> <div id="link"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_226.html"> HTML5 CSS3 Ribbon With 3D Depth Code Snippet</a> page. ] </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library