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: 2019-12-09 02:00:21
Language: css
Highlight Mode: css
|
| Copy Codes: Use Free Notepad ++ |
|
Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor
|
|
Copied To Clipboard!
<!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 https://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>
|
