gördüğünüz gibi CSS3 ile ribbon yapacağız.
html sayfamız aşağıdaki gibi olacak
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
CSS Ribbon
3D CSS Ribbon
I Have Used Only CSS, friends!
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.
It doesn't work with IE!
style.css dosyamızda aşağıdaki gibi olacak.
/* 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;
}
evet arkadaşlar bu kodlarla yapabilirsiniz ribbonları ama zaten ben size hazırının dosyasını vereceğim ordaki kodları inceleyerek sizlerde sitelerinizde kullanabilirsiniz.
demo: http://www.pvmgarage.com/downloads/ribbon/
indir: http://www.pvmgarage.com/downloads/ribbon.zip
pvmgarage.com dan alıntıdır.
