Brainstorming: Transparente Kantengrafiken für Bilder

Lars · 04.11.2005, 15:02

So, ich habe da ein kniffliges Problemchen.
http://lars.spacefish.biz/design_new/ ist die URI (das ganze funktioniert zur Zeit erst in Opera und Mozilla).

Problem ist folgendes. Die Bilder rechts in der Sidebar sollen einen Rahmen im Stile der Containerahmen, nur dünner kriegen. D. h. unter anderem runde Ecken. Alles kein Problem, allerdings ist der Hintergrund nicht konstant, es sind Farbverläufe drin. Ich hatte es mir ursprünglich so vorgestellt, dass z. B. das eigentlich Bild als Hintergrund eines DIVs nehme und die Rahmen darin positioniere. Die Rahmenecken sind aber transparent, damit der braune Hintergrund durchscheint. Das wiederrum wird aber verhindert, weil so zwischen Rahmen und Hintergrund noch das eigentlich Bild liegt.
Würde ich die Reihenfolge Hintergrund - Rahmen - Bild nehmen, würde der Rahemn vom Bild überblendet werden.

Hat da jemand eine Idee, so unelegant sie auch sein mag?

J33d3X · 04.11.2005, 21:55

eventuell
X hintergrund ( Bild ) -> X div mit z-index in farbe des hintergrundes als border drüber -> X als abschluss den rahmen transparenz

so in der art würd ich das überlegen

mfg

Lars · 06.11.2005, 21:17

Zitat:

Zitat von J33d3X

farbe des hintergrundes

Das ist eben das Problem. Die Hintergrundfarbe ist halt nicht konstant, sondern hat einen Verlauf.

J33d3X · 07.11.2005, 08:59

farbverlauf generiert oder per image ?

CIX88 · 07.11.2005, 10:49

Zitat:

Die Bilder rechts in der Sidebar sollen einen Rahmen im Stile der Containerahmen, nur dünner kriegen.

Interessant, im IE ist davon garnichts zu sehen, jedenfalls nicht bei mir.
Weder die Bilder rechts, noch die Navigation etc.
Erst im FF kann man alles sehen.

J33d3X · 07.11.2005, 13:06

bei mir im IE auch nicht ( bis auf das logo )

Lars · 07.11.2005, 15:35

Hab ich um den Fehler im IE noch nicht gekümmert, weil das für mich persönlich erstmal zweitrangig ist.

@Topic:
Der Farbverlauf steckt in einem Bild. http://lars.spacefish.biz/design_new...sidebar_bg.jpg dürfte das sein.

J33d3X · 07.11.2005, 17:33

http://swbulletin.no-ip.org/publicwww/tmp/index.html

so in etwa meinte ich das

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title></title>
<style type="text/css">
.bg {
    background: url(sidebar_bg.jpg) top repeat-y;
    height:100px;
    width: 230px;
}
.lyr2 {
    background: url(img.gif) top repeat-y;
    height:32px;
    width:230px;
}
.lyr3 {
    margin-left:9px;
    width:212px;
}
</style>
</head>
<body>
<div id="container">
<div class="bg">
    <br />
    <div class="lyr2">
        <div class="lyr3">
            <span style="float:left"><img src="left.gif" /></span>
            <span style="float:right"><img src="right.gif" /></span>
        </div>
    </div>
</div>
</div>
</body>
</html>

mfg

CIX88 · 07.11.2005, 21:07

Zitat:

Die Bilder rechts in der Sidebar sollen einen Rahmen im Stile der Containerahmen, nur dünner kriegen

Ich würde hier nicht ein Rahmen wie beim Content machen, finde ich dann etwas übertrieben.

Nur eine Idee:

Einen dunkleren oder helleren Farbton vom Farbverlauf nehmen (eine Art Hell-Dunkel-Kontrast) und einen 1px Rahmen mit CSS machen.
Zwischen den Bildern auch etwas Abstand bringen.

Bookworm · 13.11.2005, 16:52

Tja....
Transparente Ränder kann man mit nem Grafikprogramm erstellen. Das Problem ist nur, dass sie vom IE nicht interpretiert werden und der stattdessen weiße Flächen darstellt, richtig?
Also, ich habe echt keine Lösung, außer allen IE Usern den Zugriff zu unterbinden, aber ich wäre an einer Lösung interessiert... Ich suche sowas auch...

Lars · 27.11.2005, 20:51

So in etwa hab ichs jetzt gelöst. Ich hab den kompletten Rahmen als <img> genommen (also haben die Bilder immer Thumbnail-Größe) und das eigentliche Bild als Hintergrund genommen.

04.11.2005, 15:02	Nach oben #1
Lars me pro ok? Registriert seit: 07.09.2005 Ort: Pulheim bei Köln Beiträge: 964	Brainstorming: Transparente Kantengrafiken für Bilder So, ich habe da ein kniffliges Problemchen. http://lars.spacefish.biz/design_new/ ist die URI (das ganze funktioniert zur Zeit erst in Opera und Mozilla). Problem ist folgendes. Die Bilder rechts in der Sidebar sollen einen Rahmen im Stile der Containerahmen, nur dünner kriegen. D. h. unter anderem runde Ecken. Alles kein Problem, allerdings ist der Hintergrund nicht konstant, es sind Farbverläufe drin. Ich hatte es mir ursprünglich so vorgestellt, dass z. B. das eigentlich Bild als Hintergrund eines DIVs nehme und die Rahmen darin positioniere. Die Rahmenecken sind aber transparent, damit der braune Hintergrund durchscheint. Das wiederrum wird aber verhindert, weil so zwischen Rahmen und Hintergrund noch das eigentlich Bild liegt. Würde ich die Reihenfolge Hintergrund - Rahmen - Bild nehmen, würde der Rahemn vom Bild überblendet werden. Hat da jemand eine Idee, so unelegant sie auch sein mag? __________________ Gedanken aus Draht stricken einen Zaun.

07.11.2005, 15:35	Nach oben #7
Lars me pro ok? Registriert seit: 07.09.2005 Ort: Pulheim bei Köln Beiträge: 964	Hab ich um den Fehler im IE noch nicht gekümmert, weil das für mich persönlich erstmal zweitrangig ist. @Topic: Der Farbverlauf steckt in einem Bild. http://lars.spacefish.biz/design_new...sidebar_bg.jpg dürfte das sein. __________________ Gedanken aus Draht stricken einen Zaun.

27.11.2005, 20:51	Nach oben #11
Lars me pro ok? Registriert seit: 07.09.2005 Ort: Pulheim bei Köln Beiträge: 964	So in etwa hab ichs jetzt gelöst. Ich hab den kompletten Rahmen als <img> genommen (also haben die Bilder immer Thumbnail-Größe) und das eigentliche Bild als Hintergrund genommen. __________________ Gedanken aus Draht stricken einen Zaun.

Themen-Optionen	Thema durchsuchen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen	Thema durchsuchen: Erweiterte Suche

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Freie Bilder	Jan	Plauderecke	2	09.05.2007 14:37
Viele Bilder in einem Ordner => Ladezeitproblem	heohni	PHP-Programmierung	7	06.10.2006 23:25
PHP Bilder verkleinern	robo47	PHP-Programmierung	30	25.09.2006 19:50
[Grundlagen] GDlib und große Bilder	CIX88	Tutorials	0	28.01.2006 12:46
Bilder in NEWS-System	flupsi	PHP-Programmierung	11	09.01.2006 18:41

04.11.2005, 21:55	Nach oben #2
J33d3X Goldman.de Registriert seit: 09.10.2005 Ort: Frankfurt am Main Beiträge: 190	eventuell X hintergrund ( Bild ) -> X div mit z-index in farbe des hintergrundes als border drüber -> X als abschluss den rahmen transparenz so in der art würd ich das überlegen mfg

07.11.2005, 08:59	Nach oben #4
J33d3X Goldman.de Registriert seit: 09.10.2005 Ort: Frankfurt am Main Beiträge: 190	farbverlauf generiert oder per image ?

07.11.2005, 13:06	Nach oben #6
J33d3X Goldman.de Registriert seit: 09.10.2005 Ort: Frankfurt am Main Beiträge: 190	bei mir im IE auch nicht ( bis auf das logo )

13.11.2005, 16:52	Nach oben #10
Bookworm n00b -.- Registriert seit: 10.11.2005 Beiträge: 318	Tja.... Transparente Ränder kann man mit nem Grafikprogramm erstellen. Das Problem ist nur, dass sie vom IE nicht interpretiert werden und der stattdessen weiße Flächen darstellt, richtig? Also, ich habe echt keine Lösung, außer allen IE Usern den Zugriff zu unterbinden, aber ich wäre an einer Lösung interessiert... Ich suche sowas auch...

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)