CSS3 – 3D Ribbons

Heute missbrauche ich meinen Blog mal wieder als Datenbank. Es gibt zwar haufenweise Tutorials, aber ich lege so kleine Beispiele gerne selbst ab und wenn ich es verblogge habt ihr auch was von. Hintergrund ist, dass ich gerade an meinem neuen Blogdesign bastel und selbst immer wieder auf alte Codefetzen zurückgreife, die aber leider immer erst mühsam und umständlich aus den fertigen Produkten raus basteln muss.

Los gehts mit einer schönen Spielerei: 3D Ribbons.

 

image

Hier der passende HTML Code dazu:

 

<div id="page">
     <div id="content" class="box">
        <h2>Headline</h2>
        <div class="triangle"></div>
        content
    </div>
</div>

 

Und hier der wirklich wichtige Part. der CSS Code.

 

#content{
    width:750px;
    float:left;   
    height:1000px;
}

.box{
    -webkit-box-shadow: 0px 5px 10px #000000;
    -moz-box-shadow: 0px 5px 10px #000000;
    box-shadow: 0px 5px 10px #000000;
    background-color:#ffffff;
    padding: 5px;
}

h2 {
    background-color: #ff8000;
    margin: 0px -5px 0px -20px;
    padding: 0px 0px 0px 40px;
}

.triangle{
    border-color: #FC0 transparent transparent;
    border-style:solid;
    border-width:15px;
    height:0px;
    width:0px;
    position: relative;
    left: -20px;
    top: 0px;
    z-index: -1;

}

 

Nicht schön an dieser Lösung ist natürlich, dass im HTML ein neues div für das kleine Dreieck angelegt werden muss. Immerhin hat es ja keine Funktion und Lediglich für das Design wichtig, aber nicht für den Content. Trotzdem ist es schöner, als ein .png zu benutzen.

Das ganze habe ich mir natürlich nicht alleine ausgedacht, sondern Großteils geklaut. Das Orginaltutorial findet ihr hier.

, , , , , , , , , , , , , , , , , , ,

Schreibe einen Kommentar

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>