Gradient-Borders (Rahmen mit Farbverlauf) ohne per DIV Hintergrundbild zu überdecken?

[KloBoBBerLe]

Liebe Leser,

ich möchte an einem DIV den linken und den rechten Rahmen mit einem Farbverlauf versehen, welcher die Farbe grau langsam zu weiß umwandelt.

Es gibt ja die Möglichkeit, in CSS3 mittels Box-Shadow und Background-Image einen Farbübergang im Rahmen zu "pfuschen". Leider überdeckt diese Lösung dann im Bereich des DIV's mein Hintergrundbild der Website, da das DIV nun eine feste Hintergrundfarbe zugewiesen bekommen hat. Und da es für #hex-Farbtöne kein transparent gibt, kann ich das leider nicht ändern...

Habt Ihr eine Idee, wie ich das anderweitig lösen könnte?

Herzlichen Dank für Eure Hilfe!

Viele Grüße
KloBoBBerLe

 

[leveler]

AW: Gradient-Borders (Rahmen mit Farbverlauf) ohne per DIV Hintergrundbild zu überdec

Kannst Du nicht dem Rahmen ein Bild (einen Farbverlauf) von zB 2px Breite verpassen, den Du dann auf x wiederholst? Und das andere Bild in einem 2.Div mit höherem z-Index drüberbügeln?

 

[patrick_l]

AW: Gradient-Borders (Rahmen mit Farbverlauf) ohne per DIV Hintergrundbild zu überdec

Und da es für #hex-Farbtöne kein transparent gibt, kann ich das leider nicht ändern...

Dann nutzt doch RGB bzw. RGBA (CSS3) für Transparenz.

/* --| CSS3 |---------- */
* {background-color:rgba(255,255, 255,[B]0.8[/B]);

/* Transparenz bzw. Deckkraft 0 - 1 */

[...]Und das andere Bild in einem 2.Div mit höherem z-Index drüberbügeln?

Z-Index muss doch nicht sein. Einfach zwei Div "verschachteln" und gut ist. Der äußeren Div dann den Verlauf geben und mit mit CSS (repeat-x/y) wiederholen.

<div id="wrapper">
  <div class="inside">
      <!-- content here! -->
  </div>
</div>

#wrapper {width:502px; background:url(pfad/zur/grafik) repeat-x;}
#wrapper .inside {width:500px; margin:0 auto;}

Liebe Grüße, Patrick

 

[KloBoBBerLe]

AW: Gradient-Borders (Rahmen mit Farbverlauf) ohne per DIV Hintergrundbild zu überdec

#wrapper {width:502px; background:url(pfad/zur/grafik) repeat-x;}
#wrapper .inside {width:500px; margin:0 auto;}

Die Idee an sich ist gut! Es funktioniert aber optisch leider nicht nahtlos... :-(

Ich habe einen Container #left, darin befindet sich .inside.

.inside besitzt je eine Rahmenlinie links und rechts. Diese beiden Rahmen sollen nun linear den Farbverlauf von grau nach transparent erhalten.

Ich habe es bereits mit einem zweiten DIV versucht, welches innerhalb von .inside liegt, jedoch per margin-bottom nach unten rausgeschoben wurde. Somit wäre .inside gänzlich unbeeinflusst vom Gradient-Border, und dieser würde nur in .inside .gradient genutzt werden.

Leider bekomme ich jedoch die Linien von .inside und von .gradient horizontal nicht exakt gefluchtet... Irgend eine Linie steht immer seitlich über oder besitzt nicht die exakte Breite wie die Linie von .inside...

 

[patrick_l]

AW: Gradient-Borders (Rahmen mit Farbverlauf) ohne per DIV Hintergrundbild zu überdec

.inside besitzt je eine Rahmenlinie links und rechts. Diese beiden Rahmen sollen nun linear den Farbverlauf von grau nach transparent erhalten.

Dann wie beschrieben in höher liegenden Div die Grafik verpassen und repeaten. Ansonsten kannst du auch (wenn es CSS3 sein darf) mit mehren Hintergrundgrafiken arbeiten.

/* --| CSS3 |------- */
* {background: url(border.png) top left no-repeat, url(border.png) top right no-repeat;}

jedoch per margin-bottom nach unten rausgeschoben wurde.

Kann dir gerade nicht ganz folgen bzw. steh etwas auf dem Schlauch. Wieso gibst du der innen liegenden Div ein margin-bottom? Kannst du vielleicht mal deinen Quelltext posten, damit man es besser nachvollziehen kann.

Edit:
Ich habe dir jetzt mal zwei Lösungen zusammengeschustert. Einmal mit CSS und einmal mit CSS3 und den mehreren Hintergrundbildern (multiple bg-images). Einfach Zip-Archiv herunterladen und anschauen.

- [STRIKE]Border Demo [/STRIKE]

Liebe Grüße, Patrick

 

[KloBoBBerLe]

AW: Gradient-Borders (Rahmen mit Farbverlauf) ohne per DIV Hintergrundbild zu überdec

Okay, ein Bild sagt mehr als tausend Worte...

Die HTML-Anordnung:

<div id="wrapper">
          <div id="container">
                    <aside id="left">
                              <div class="inside">
                                        <nav class="mod_navigation block">
                              </div>
                    </aside>
          </div>
</div>

Das CSS:

#left .inside {
    border-left: 1px solid #blablabla;
    border-right: 1px solid #blablabla;
    border-top-left-radius: 40px;
    }

Wie Ihr seht kann ich also nicht einfach einen Background-Repeat einsetzen, weil das Menü fest in .inside fixiert ist.

Meine Überlegung vorher war nun die, ein zusätzliches DIV in .inside zu erstellen, und dieses per negativem margin-bottom nach unten aus #left hinauszuschieben. Dort könnte ich dann vielleicht irgendwie einen Farbverlauf am Rahmen reinbasteln.

Viele Grüße
KloBoBBerLe

 

[patrick_l]

AW: Gradient-Borders (Rahmen mit Farbverlauf) ohne per DIV Hintergrundbild zu überdec

Okay, ein Bild sagt mehr als tausend Worte...

Wohl wahr jetzt kann ich es auch besser nachvollziehen. Mmh, gib mir einen kurzen Moment. Frickel das mal eben fix zusammen. Poste es dann gleich hier.

Liebe Grüße, Patrick

 

[KloBoBBerLe]

AW: Gradient-Borders (Rahmen mit Farbverlauf) ohne per DIV Hintergrundbild zu überdec

Ich bin schon auf Deine Lösung gespannt!

Denke daran, dass auch das Hintergrundbild nicht überdeckt werden soll... Ich bin gerade selbst am rumfrickeln und komme irgendwie nicht auf einen grünen Zweig.

Es gibt zwar neuerdings die Anweisung border-image-source, aber deren Funktion habe ich noch nicht ganz nachvollziehen können. Muss ich vor deren Nutzung vielleicht die Rahmen an den gewünschten Seiten noch alle einzeln "aktivieren" bevor man die Source wählen kann?

 

[patrick_l]

AW: Gradient-Borders (Rahmen mit Farbverlauf) ohne per DIV Hintergrundbild zu überdec

So, soweit passt eigentlich alles. Nur an der unteren Ecke muss noch etwas geändert werden. Jetzt schiebt sich noch das zweite bg-image durch das repeat-y über die transparente Ecke. Ansonsten soweit alles richtig. Der Hintergrund ist überall transparent.

- [STRIKE]round corner & border demo [/STRIKE]

Liebe Grüße, Patrick

 

[KloBoBBerLe]

AW: Gradient-Borders (Rahmen mit Farbverlauf) ohne per DIV Hintergrundbild zu überdec

Okay, besten Dank für Deine Mühe! Jetzt mache ich mich wohl unbeliebt...

Linear-Gradient, nicht Radial-Gradient!

Die Bögen sollen unangetastet bleiben. Der Farbverlauf zu transparent soll erst ungefähr ab der Mitte der Rahmenlänge beginnen.

Ich hatte das mit den Bögen nur erwähnt, weil es mir da vorher mit Box-Shadow dauernd Probleme bereitet hat und die Bögen nicht mehr sauber dargestellt wurden...

 

[patrick_l]

AW: Gradient-Borders (Rahmen mit Farbverlauf) ohne per DIV Hintergrundbild zu überdec

Ach quatsch, helfe gern Linear und Radial jetzt vertauscht. Auch gerade nicht dran gedacht, das es um den Rahmen geht. Wenn du den Verlauf als Border haben willst, musst du es als Grafik umsetzen.

Liebe Grüße, Patrick

 

[KloBoBBerLe]

AW: Gradient-Borders (Rahmen mit Farbverlauf) ohne per DIV Hintergrundbild zu überdec

Scheinbar hat es hier irgendwie auch ohne Grafik geklappt, aber die Box-Shadow-Regeln sind mir alle etwas komplex:

https://gist.github.com/nrrrdcore/2580330

Wenn man das ganze Kunstwerk seziert kommt folgendes raus:

[SIZE=2].border-container {
  box-shadow: inset 15px 0 5px -16px rgba(0,0,0,.1), -1px 0 0 #FFF;
  border-width: 0 0 0 1px;

-moz-box-shadow: inset 15px 0 5px -16px rgba(0,0,0,.1), -1px 0 0 #FFF;
-moz-border-image:
-moz-linear-gradient(top, rgba(0,0,0,.09), rgba(0,0,0,0)) 1 100%;


-webkit-box-shadow: inset 15px 0 5px -16px rgba(0,0,0,.1), -1px 0 0 #FFF;
-webkit-border-image: 
-webkit-gradient(linear, 0 100%, 0 0, from(rgba(0,0,0,.09)), to(rgba(0,0,0,0))) 1 100%;
-webkit-border-image: 
-webkit-linear-gradient(top, rgba(0,0,0,.09), rgba(0,0,0,0)) 1 100%;
}[/SIZE]

Doch was soll das mit dem Box-Shadow? Ich glaube, es läuft wirklich auf eine Grafik raus...

 

[KloBoBBerLe]

AW: Gradient-Borders (Rahmen mit Farbverlauf) ohne per DIV Hintergrundbild zu überdec

Hach, etwas frustrierend das Ganze...

Jetzt werkle ich knapp zwei Stunden an einer rechteckigen Grafikdatei herum, die einfach nur an ihren Rändern eine Linie mit Farbverlauf hat.

Das Problem: Ich bekomme in Inkscape die Randlinien nie so scharf wie es die CSS-Rahmenlinien sind! Dateiformat ist png, worin liegt mein Fehler? Ich habe eine Strichstärke von mittlerweile 0,3 px (geht das in der Realität überhaupt?) und die Linie ist noch immer breiter als die CSS-Rahmenlinie (welche im Stylesheet mit einem Pixel bemaßt wurde)...

 

[patrick_l]

AW: Gradient-Borders (Rahmen mit Farbverlauf) ohne per DIV Hintergrundbild zu überdec

Das Aussehen verändert sich unter anderem durch die Kompression bei bestimmten Formaten. In deinem Fall liegt es aber daran das aus Vektoren "Pixelgrafiken" werden. Nun zurück zu deinem Problem.

<div id="wrapper">
  <div id="main">
    <div class="border-radius"></div>
    <aside id="sidebar">
        <!-- navigation here! -->
    </aside>
    <section id="content">
        <!-- content here! -->
    </section>
  </div>
</div>

/* --| CSS3 |-------- */
* {padding:0; margin:0; border:none; outline:none; list-style:none;}
html, body {min-height:100%; min-width:100%;}
body {}

#wrapper {width:700px; min-height:500px; margin:60px auto;}
#main {width:700px;}
.border-radius {height:32px; width:698px; border-top:1px solid #000; border-left:1px solid #000; border-right:1px solid #000; border-radius:35px 35px 0px 0px; background:url(border-radius.png) no-repeat 200px 0;}
#sidebar {width:202px; min-height:400px; background:url(gradient.png) no-repeat top left, url(gradient.png) no-repeat top right; float:left;}
#content {width:498px; min-height:400px; background:url(gradient.png) no-repeat top right; float:right;}

- Alle Dateien als Zip-Archiv

Edit: Ist jetzt wie gesagt nur schnell zusammen gefrickelt.
Gibt sicher noch nen eleganteren Weg.

Liebe Grüße, Patrick

 

[KloBoBBerLe]

AW: Gradient-Borders (Rahmen mit Farbverlauf) ohne per DIV Hintergrundbild zu überdec

Besten Dank für Deine Hilfe Patrick!
Darf ich Dich noch mal schockieren?

Die Bögen oberhalb Deiner Farbverlaufs-Geraden "fressen aus" und sehen dadurch extrem unschön aus. Das exakt selbe Problem hatte ich heute Mittag auch, weshalb ich dann dieses Topic eröffnet habe... Das liegt auch nicht an Dir oder an fehlender Akuranz, sondern an der mangelhaften CSS-Implementierung des Browsers bei den Bögen...

Da ich nach langem Überlegen (und vor allem endlosem Ausprobieren!) endlich eine saubere und browserübergreifende Lösung haben wollte, habe ich nun tatsächlich auf eine Grafik im Bereich des Farbverlaufs zurückgegriffen. Allerdings nicht im png-Format, sondern svg.

Nach langem Rumspielen mit der Pixelstärke in Inkscape und der Vermeidung des png-Formates - tadaaa! Nachts um 2:12 Uhr hat es endlich "klick" gemacht...





Diese verbliebenen Linienflucht-Differenzen sind jetzt meiner Meinung nach absolut vernachlässigbar und auch nur bei maximaler Vergrößerungsstufe wie im darüber liegenden Screenshot gerade noch so erkennbar.

Bei "Normalansicht" passt alles - siehe erster Screenshot!

Wie kann man denn nur einen ganzen Tag damit verbringen, Farbverlaufs-Rahmen zu erstellen... Ich bleibe dabei: Es geht derzeit nur über eine Grafik wirklich fehlerfrei!

Und jetzt gehe ich schlafen, gute Nacht!

 

[patrick_l]

AW: Gradient-Borders (Rahmen mit Farbverlauf) ohne per DIV Hintergrundbild zu überdec

Nachts um 2:12 Uhr hat es endlich "klick" gemacht...

Das ist die Hauptsache.

Wie kann man denn nur einen ganzen Tag damit verbringen, Farbverlaufs-Rahmen zu erstellen...

Wenn ich so an meine Sonderfälle denke, ist ein Tag noch harmlos :lol: Wenn es irgendwo hakt, ärgert es mich so lange bis es endlich sitzt. Da vergisst man dann auch schnell die Zeit.

Liebe Grüße, Patrick