Farbverlauf nach Links und Rechts

04.05.2015 16:42
avatar  Dinah
#1 Farbverlauf nach Links und Rechts
avatar
Mitglied

Hallo!

Ich habe mir bereits dieses Thema *KLICK* durchgelesen und muss sagen das es mir auch sehr geholfen hat. Allerdings ist meine Frage, ob man einen Farbverlauf nicht nach LInks und Rechts machen kann. Also statt von oben nach unten zur Farbe zu wechseln eben nach Rechts und Links hin.

Ein Beispiel!

Wäre es möglich, einfach dein ursprungscode der im anderen Bereich bereits gepostet wurde umzuändern? Oder muss man diesen komplett neu gestalten?

Und eine zweite Frage wäre, wäre es ebenso möglich beide Funktionien zu Kombinieren? Das ein Farbverlauf nach unten und zeitgleich zu den Seiten verblasst?
Ich muss gestehen das ich eine anfängerin bin bei solchen Codes :)

Vielen Dank im Vorraus :)


 Antworten

 Beitrag melden
04.05.2015 17:47 (zuletzt bearbeitet: 04.05.2015 17:53)
avatar  Olaf
#2 RE: Farbverlauf nach Links und Rechts
Ol
Mitglied

Das geht alles.Du mußt Dich damit nur beschäftigen.
Das "gradient" ist eine sehr vielseitige CSS Eigenschaft um Farbverläufe zu gestalten.Hier jetzt alle Möglichkeiten der Farbverläufe zu schreiben,würde den Rahmen sprengen.
Hier mal eine Seite mit einigen Beispielen,die für den Mozilla (FF) geschrieben worden sind:
https://developer.mozilla.org/de/docs/Fa...C3%A4ufe_in_CSS
Für andere Browser müssen dann dementsprechende "webkits" zusätzlich eingesetzt werden.
Hier ein Beispiel für einen horizontalen Farbverlauf mit den gleichen Farben vom vertikalen Farbverlauf im anderen Thread:

1
2
3
4
 
.farbverlauf {
background-image: -moz-linear-gradient(left, #936BFF, #F0EBFF);
background-image: -webkit-linear-gradient(left, #936BFF, #F0EBFF);
}
 


Hier zu sehen in meinem Testforum:
http://138600.homepagemodules.de/t78f2-U...est.html#msg465

Wenn Du mehere Option für den Farbverlauf in der Iconbar haben möchtest,dann mußt Du auch mehere CSS Klassen anlegen,die dann immer einen anderen Namen haben müssen.


Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

 Antworten

 Beitrag melden
04.05.2015 18:26
avatar  Ingmar
#3 RE: Farbverlauf nach Links und Rechts
avatar
Technik

Es gibt auch viele Webseiten, die einen bei der Erstellung von Gradients unterstützen.

z.B. http://www.colorzilla.com/gradient-editor/

Viele Grüße,
Ingmar


 Technik · Homepagemodules.de · Miranus GmbH

 Antworten

 Beitrag melden
10.05.2015 14:24
avatar  Dinah
#4 RE: Farbverlauf nach Links und Rechts
avatar
Mitglied

Ich noch mal xD

Also die Seiten haben schon mal geholfen - Vielen Dank dafür!
Das der Farbverlauf nach einer Seite hin verblasst habe ich auch hinbekommen:

1
2
3
4
5
 
.farbverlauf7 {
background-image: linear-gradient(right, #c9beb2, #e6e6e6);
background-image: -webkit-linear-gradient(right, #c9beb2, #e6e6e6);
 
}
 



Nur leider hab ich nun keine Ahnung, wie ich es hinbekomme, das der Verlauf zeitgleich nach Rechts _und_ Links verläuft.
Rumprobiert hab ich schon, komme aber leider auf keinen Grünen Zweig. Vielleicht kann mir ja jemand einen Stupser in die richtige Richtung geben :)


 Antworten

 Beitrag melden
10.05.2015 15:04
avatar  ( gelöscht )
#5 RE: Farbverlauf nach Links und Rechts
Gast
( gelöscht )

Hallo,

... ich hab Dir hier mal eine Variante aufgeschrieben, die den Farbverlauf mit den von Dir angegebenen Farben aus der Mitte heraus nach beiden Seiten erzeugt. Mit den Prozentwerten kannst Du die Farbanteile und deren Position beeinflussen. Der Eintrag 180deg bestimmt den Winkel des Farbverlaufes. Im Falle jetzt links/rechts. 90deg würden z.Bsp. einen Verlauf oben/unten erzeugen.

1
2
3
 
.farbverlauf7  {background-image: linear-gradient(100% 100% 180deg,#c9beb2, #e6e6e6, #c9beb2 100%);
background-image: -moz-linear-gradient(100% 100% 180deg,#c9beb2, #e6e6e6, #c9beb2 100%);
background-image: -webkit-linear-gradient(100% 100% 180deg,#c9beb2, #e6e6e6, #c9beb2 100%);}
 


 Antworten

 Beitrag melden
10.05.2015 16:26
avatar  Dinah
#6 RE: Farbverlauf nach Links und Rechts
avatar
Mitglied

Hey!

Vielen Dank!
Ich habe den Code auch direkt mal so in mein Test Board ins CSS gepackt und in der Iconbar zugewiesen.
Leider funktioniert es jedoch nicht :o
Zu sehen hier: http://devil-within.xobor.de/t6f2-Farbve...chts.html#msg41


 Antworten

 Beitrag melden
10.05.2015 17:58
avatar  ( gelöscht )
#7 RE: Farbverlauf nach Links und Rechts
Gast
( gelöscht )

... ich weiß jetzt nicht genau, wie Du es mit der Zuweisung gemacht hast, aber im oberen Bereich sieht man ja den Farbverlauf...


 Antworten

 Beitrag melden
10.05.2015 19:41
avatar  ( gelöscht )
#8 RE: Farbverlauf nach Links und Rechts
Gast
( gelöscht )

.... ich hab es gerade mal mit genau dem code getestet, .. und ich kann sowohl Bilder als auch Texte innerhalb des farbverlaufes einbinden:


 Antworten

 Beitrag melden
13.06.2015 18:45 (zuletzt bearbeitet: 13.06.2015 18:46)
avatar  Dinah
#9 RE: Farbverlauf nach Links und Rechts
avatar
Mitglied

Hey,

schon wieder ich xD
Also der Farbverlauf funktioniert nun bei mir! - Danke dafür *thumps up*
**KLICK**

Jetzt hätte ich aber eine Frage bezüglich: Einer anderern Schriftart in dem Farbverlauf.
Quasi: Nur im Farbverlauf eine andere Farbe.
Ich hatte bereits ein wenig gegoogelt um mich schlau zu machen. Und demnach einfach eine neue Font familie hinzugefügt:

1
2
3
 

.farbverlauf6 {font-family: Verdana;background-image: linear-gradient(to right, #f0eae2, #7f7a91, #7f7a91, #f0eae2); width:100%;}
 
 


Doch funktionieren tut es nicht, wie man im Screenshot sieht ^^ Vielleicht kann mir ja noch einmal jemand eine Hilfestellung geben :)- Vielen Dank


 Antworten

 Beitrag melden
13.06.2015 21:28
avatar  Romulus
#10 RE: Farbverlauf nach Links und Rechts
avatar
Mitglied

Hallo,

versuche es mal so:

1
 
.farbverlauf6  {font-family: Verdana !important;background-image: linear-gradient(to right, #f0eae2, #7f7a91, #7f7a91, #f0eae2); width:100%;}
 



Einziger Unterschied: der Schriftart wird ein "!important" nachgestellt, was der Forumsoftware signalisieren soll, dass an der betreffenden Stelle wirklich Verdana und nicht die Hauptschriftart verwendet werden soll, die du unter den Schrifteinstellungen eingetragen hast.

So sollte es eigentlich klappen.

LG. Romulus

www.neverface.com
Liebhaber des Business Templates

 Antworten

 Beitrag melden
13.06.2015 21:42
avatar  Dinah
#11 RE: Farbverlauf nach Links und Rechts
avatar
Mitglied

Vielen Dank!
Mit dem Important dahinter klappt es nun :)

Eine kurze Frag noch; Wenn ich bei der Schriftart nun irgendeine beliebige nehme ( zB Google font) muss ich diese Schrift dann auch eintragen ins Forum? Damit sie dargestellt wird?


 Antworten

 Beitrag melden
13.06.2015 21:51
avatar  Romulus
#12 RE: Farbverlauf nach Links und Rechts
avatar
Mitglied

Yes!

Wie du eine Google-Schriftart korrekt in dein Forum einbinden kannst, erfährst du Schritt für Schritt HIER.

Überlege dir aber genau, ob das die Sache wirklich wert ist. Denn solche Webfonts beanspruchen ein klein wenig Ladezeiten - aber nur beim ersten Seitenaufruf.

Ich selbst verwende übrigens trotzdem gerne einen Google-Webfont. Allerdings als Hauptschriftart für das ganze Forum.

www.neverface.com
Liebhaber des Business Templates

 Antworten

 Beitrag melden
13.06.2015 21:54
avatar  Dinah
#13 RE: Farbverlauf nach Links und Rechts
avatar
Mitglied

Danke!Wie ich Google Fonts einbinde weiss ich :) - Und es war ja auch vorweg erst mal nur eine Überlegung. Jetzt weiss ich ja wie das ganze funktioniert und kann mir eine geeignete Schrift suchen.

Vielen Dank!


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!