Submit your widget
HomeMenu & NavigationDepth And Nice 3D Ribbons Only Using CSS3

Depth And Nice 3D Ribbons Only Using CSS3

Created 14 years ago   Views 17114   downloads 2775    Author n/a
Depth And Nice 3D Ribbons Only Using CSS3
View DemoDownload
100
Share |

we learned how to realize a nice 3D ribbon and how to play with the drop shadow in Photoshop to simulate depth in a web design layout. This is a widespread trends in recent web design: creating a 3D perception in a website and simulating a “world” in three dimensions are two great ways for the designers to play with their skills.

Sure? Yes, it’s possible to create a simple and nice (3D) layout playing with some CSS3 properties, only using code and without the help of Photoshop.

How To Make a CSS Based 3D Layout

First of all we set up our files. We create a new folder with index.html and style.css.

We prepare the HTML document. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Ribbon</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<!-- 3D Stuff -->

</body>
</html>

 

Take a look at the following image to understand how we will realize the “structure” in our index.html file.

Well, as you have just seen in the picture we need a main container (centered), a bubble for the contents, and three elements for the ribbon: a rectangle and two triangles. 

<div id="container"> <!-- Main Container -->    

<div class="bubble"> <!-- Bubble -->
<div class="rectangle"><h2>3D CSS Ribbon</h2></div> <!-- Rectangle with a title -->
<div class="info">
<h2>I Have Used Only CSS, friends!</h2>
<p>
For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.<br />It doesn't work with IE!
</p>
<p>
<a href="#">Go to the tutorial!</a>
</p>
</div>
</div>

</div>

 

The CSS code to style the basic elements (container, bubble and rectangle) is the following. 

/* Reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, font, img, ul, li {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}

:focus {
 outline: 0;
}
/* // Reset */

body {
 background: url(bck.jpg); /* image for body made with Photoshop using noise filter (gaussian monochromatic) on #ccc */
 font-family: Georgia, Verdana, “Lucida Sans Unicode”, sans-serif;
 font-size: 12px;
 color: #999;
}

h2 {
 font-style: italic;
 font-weight: normal;
 line-height: 1.2em;
}

div#container {
 margin: 50px auto 0px auto; /* centered */
 width: 400px;
}

.bubble {
 clear: both;
 margin: 0px auto;
 width: 350px;
 background: #fff;
 -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
 -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
 position: relative;
 z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
}

.rectangle {
 background: #7f9db9;
 height: 50px;
 width: 380px;
 position: relative;
 left:-15px;
 top: 30px;
 float: left;
 -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
 z-index: 100; /* the stack order: foreground */
}

.rectangle h2 {
 font-size: 30px;
 color: #fff;
 padding-top: 6px;
 text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 text-align: center;
}

 

We add the two classes to make and place the triangles in style.css… and we also add the style for the content (class info). 

<div id="container">

<div class="bubble">
<div class="rectangle"><h2>3D CSS Ribbon</h2></div>
<div class="triangle-l"></div> <!-- Left triangle -->
<div class="triangle-r"></div> <!-- Right triangle -->
<div class="info">
<h2>I Have Used Only CSS, friends!</h2>
<p>
For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.<br />It doesn't work with IE!
</p>
<p>
<a href="#">Go to the tutorial!</a>
</p>
</div>
</div>

</div>

 

We add the two classes to make and place the triangles in style.css… and the style for the content (class info). 

.triangle-l {
 border-color: transparent #7d90a3 transparent transparent;
 border-style:solid;
 border-width:15px;
 height:0px;
 width:0px;
 position: relative;
 left: -30px;
 top: 65px;
 z-index: -1; /* displayed under bubble */
}

.triangle-r {
 border-color: transparent transparent transparent #7d90a3;
 border-style:solid;
 border-width:15px;
 height:0px;
 width:0px;
 position: relative;
 left: 350px;
 top: 35px;
 z-index: -1; /* displayed under bubble */
}

.info {
 padding: 60px 25px 35px 25px;
}

.info h2 {
 font-size: 20px;
}

.info p {
 padding-top: 10px;
 font-size: 14px;
 line-height: 22px;
}

.info p a {
 color: #c4591e;
 text-decoration: none;
}

.info p a:hover {
 text-decoration: underline;
}

 

We create a nice menu on the top. Below the markup. 

<div id="container">

<div class="menu">
<ul>
<li class="l1"><a href="#">CSS3</a></li>
<li class="l2"><a href="#">is really</a></li>
<li class="l3"><a href="#">powerful</a></li>
</ul>
<span>by PV.M Garage</span>
</div>

<div class="bubble">
<div class="rectangle"><h2>3D CSS Ribbon</h2></div>
<div class="triangle-l"></div>
<div class="triangle-r"></div>
<div class="info">
<h2>I Have Used Only CSS, friends!</h2>
<p>
For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.<br />It doesn't work with IE!
</p>
<p>
<a href="#">Go to the tutorial!</a>
</p>
</div>
</div>

</div>

 

The style for our top-menu. 

.menu {
 position: relative;
 top:3px;
 left: 50px;
 z-index: 80; /* the stack order: displayed under bubble (90) */
}

.menu ul li {
 -webkit-transform: rotate(-45deg); /* rotate the list item */
 -moz-transform: rotate(-45deg); /* rotate the list item */
 width: 50px;
 overflow: hidden;
 margin: 10px 0px;
 padding: 5px 5px 5px 18px;
 float: left;
 background: #7f9db9;
 text-align: right;
}

.menu ul li a {
 color: #fff;
 text-decoration: none;
 display:block;
}

.menu ul li.l1 {
 background: rgba(131,178,51,0.65);
}

.menu ul li.l1:hover {
 background: rgb(131,178,51);
}

.menu ul li.l2 {
 background: rgba(196,89,30,0.65);
}

.menu ul li.l2:hover {
 background: rgb(196,89,30);
}

.menu ul li.l3 {
 background: rgba(65,117,160,0.65);
}

.menu ul li.l3:hover {
 background: rgb(65,117,160);
}

.menu span {
 margin: 15px 80px 0px 0px;
 float:right;
}

 

I think this kind of solution is useful to improve the performance of the website holding a great 3D effect. There is great question: Internet Explorer and Opera have some problems with CSS3. But this is not an impediment because we are looking to the future. So, if you are browsing the web with IE, please consider to install Mozilla Firefox or Google Chrome or Safari.

You might also like