Webdesign

*onip* · 07.08.2012, 13:44

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-Code:

<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-Code:

<div style="width: 0; border: 20px solid; border-color: #222 #222 transparent transparent;" </div>

ein band könnte dann so erstellt werden.

HTML-Code:


<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-Code:

<!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>

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.

powernator · 07.08.2012, 13:52

http://jsfiddle.net/ZgxyC/ - 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!

*Micro86* · 11.08.2012, 23:07

Zitat:

Zitat von onip

// 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.

pff das war einmal!!!

jetzt ist es #one :-D

danke für das beispiel. konnte ich gleich gut gebrauchen

07.08.2012, 13:52	# 2
powernator Underground King Bewertung: Registriert seit: Nov 2008 Internet: VDSL 50Mbit Beiträge: 2.050 Power: 22	http://jsfiddle.net/ZgxyC/ - 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! OMNIA MORS AEQVAT

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bänder überdehnt	Mr.Xtreme	Alltagsprobleme	10	31.03.2010 22:13
Fremdgehen tut weh!!! Der arme kerl tut einem schon leid! schaut euch die pics an!!!	moni	Humor & Fun	7	05.08.2007 15:42
Suche Tut Tut	noodlz	Grafikdesign und Fotografie	5	20.07.2007 20:12

Webdesign

[CSS] - [tut] dreidimensionale bänder