[CSS] [tut] dreidimensionale bänder

Dieses Thema im Forum "Webdesign" wurde erstellt von onip, 7. August 2012 .

  1. 7. August 2012
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    [tut] dreidimensionale bänder

    hallo zusammen,

    in einer zeitschrift ging es um 3d-elemente mit html5 css3.
    damt hab ich etwas rumgespielt, das ich euch hier zur verfügung stellen möchte.

    im prinzip recht simpel.
    es wird einem element ein border und border-color (farbe und transparent) zugewiesen.
    daraus ergeben sich dreiecke die man nur noch per :after und :before positioniert.

    hier mal ein element mit vier farbigen dreiecken, das grundprinzip:
    HTML:
    <div style="width: 0; border: 20px solid; border-color: red blue green yellow;"></div>
    arbeitet man nun mit transparent, ergeben sich dreiecke mit denen man arbeiten kann:
    HTML:
    <div style="width: 0; border: 20px solid; border-color: #222 #222 transparent transparent;" </div>
    ein band könnte dann so erstellt werden.
    HTML:
    
<style type="text/css">
.band { 
 text-align: center;
 position: relative;
 margin: 60px -30px;
 padding: 10px 0;
 background: #ffff80;
 height: 20px;
 box-shadow: 0 0 10px #555;
}

.band:after, .band:before {
 content: '';
 border: 5px solid;
 width: 0;
 position: absolute;
}

#band1:after, #band1:before {
 bottom: -10px; 
}
#band1:before {
 border-color: #222 #222 transparent transparent;
 left: 0;
}
#band1:after {
 border-color: #222 transparent transparent #222;
 right: 0px;
}
</style>

<div id="band1" class="band">band1</div>
    spielt man nun etwas rum, kommt das dabei raus:
    HTML:
    <!DOCTYPE HTML>
<head>
 <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
 <title>band</title>
 <style type="text/css">
 
 body {
 background: #ccc;
 }
 
 #site {
 margin: 30px auto;
 padding: 20px;
 width: 40%;
 background: #fff;
 border-radius: 10px;
 box-shadow: 0 0 10px #555;
 text-align: center;
 position: relative;
 }
 .band { 
 text-align: center;
 position: relative;
 margin: 60px -30px;
 padding: 10px 0;
 background: #ffff80;
 height: 20px;
 box-shadow: 0 0 10px #555;
 }
 
 .band:after, .band:before {
 content: '';
 border: 5px solid;
 width: 0;
 position: absolute;
 }
 
 #band1:after, #band1:before, #band3:after, #band3:before, #band5:after, #band6:before {
 bottom: -10px; 
 }
 #band1:before, #band3:before, #band6:before {
 border-color: #222 #222 transparent transparent;
 left: 0;
 }
 #band1:after, #band3:after, #band5:after {
 border-color: #222 transparent transparent #222;
 right: 0px;
 }
 
 #band2:after, #band2:before {
 top: -10px; 
 }
 #band2:before {
 border-color: transparent #222 #222 transparent;
 left: 0;
 }
 #band2:after {
 border-color: transparent transparent #222 #222;
 right: 0;
 }
 
 .bandoutsite{
 top: 10px;
 position: absolute;
 width: 150px;
 height: 40px;
 background: #ffff80;
 box-shadow: 0 0 10px #555;
 z-index: -10;
 
 }
 
 #band3left, #band6left {
 left: -140px;
 
 }
 #band3right, #band5right {
 right: -140px;
 }
 
 
 #band4:after, #band4:before, #band5:before, #band6:after {
 top: 0px; 
 }
 #band4:before, #band5:before {
 border-color: transparent transparent #222 #222;
 left: 0;
 }
 #band4:after, #band6:after {
 border-color: transparent #222 #222 transparent;
 right: 0;
 }
 #band4left, #band5left {
 z-index: 10;
 left: -140px;
 
 }
 #band4right, #band6right {
 z-index: 10;
 right: -140px;
 }
 
 #eck {
 border: 20px solid;
 border-color: red blue green yellow;
 width: 0;
 background: #fff;
 margin: 0 auto;
 }
 </style>
</head>

<body>

<div id="site">
 <div id="band1" class="band">band1</div>

 <div id="band2" class="band">band2</div>
 
 <div id="band3" class="band">
 band3
 <div id="band3left" class="bandoutsite"></div>
 <div id="band3right" class="bandoutsite"></div>
 </div>
 
 <div id="band4" class="band">
 band4
 <div id="band4left" class="bandoutsite"></div>
 <div id="band4right" class="bandoutsite"></div>
 </div>
 
 <div id="band5" class="band">
 band5
 <div id="band5left" class="bandoutsite"></div>
 <div id="band5right" class="bandoutsite"></div>
 </div>
 
 <div id="band6" class="band">
 band6
 <div id="band6left" class="bandoutsite"></div>
 <div id="band6right" class="bandoutsite"></div>
 </div>
 
 <div id="eck"></div>
 
</div>

</body>
</html>
    Bild
    hoffe es gefällt, danke für's vorbeischauen.

    // edit
    wer den code live in aktion sehen will, guckt ein post unter mir.

    @powernator
    danke für jsfiddle. sollte nicht mal registrieren.

    // edit2
    ich kann nicht anderes als immer wieder RR zu bestaunen wie schnell das mit google immer geht.
    echt der hammer!
    suche in google "css 3d bänder" platz 5.
     
    4 Person(en) gefällt das.
    + Multi-Zitat Zitieren
  3. 7. August 2012
    AW: [tut] dreidimensionale bänder

    Edit fiddle - JSFiddle - hier kann man sich deinen Code mal ansehen

    Finde das ziemlich interessant mit den vier border-colors, kann man sicherlich einiges daraus machen - Danke auf jeden Fall dafür!
     
    + Multi-Zitat Zitieren
  4. 12. August 2012
    AW: [tut] dreidimensionale bänder

    pff das war einmal!!!

    jetzt ist es #one :-D

    danke für das beispiel. konnte ich gleich gut gebrauchen
     
    + Multi-Zitat Zitieren
  5. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.

Auf dieses Thema antworten