HTML [CSS] Mehrere Farben in einem Link platzieren

[raven16]

Hallo,

ich versuche gerade die Navbar von Bootstrap umzugestalten. Ich weiß auch voll nicht, wonach ich suchen soll. Wenn ich nach mehreren Farben pro Link suche, dann beziehen sich die mehreren Farben nie auf einen Link. Mein eigenes Logo ist kein Bild sondern soll eine zweifarbige Abkürzung sein, so in der Art:

<a class="navbar-brand" href="#">
	<label class="font-color-one">B</label>
	<label class="font-white">.</label>
	<label class="font-color-one">r</label>
	<label class="font-white">.</label>
	<label class="font-color-one">a</label>
	<label class="font-white">.</label>
	<label class="font-color-one">n</label>
	<label class="font-white">.</label>
	<label class="font-color-one">d</label>
</a>

Leider habe ich jetzt immer Lücken im Link, wenn man mit der Maus über den Link fährt, d.h. der Link ist nicht durchgängig aktiv.

Habe schon versucht, .navbar-brand mit

a.navbar-brand{
	display: block;
	height: 50px;
	font-size: 22pt;
}

zu formatieren. Wie kann ich die beiden Farben am besten mit einer jeweiligen CSS-Klasse ins Spiel bringen?

Gruß

 

[Yuuri]

http://creative-punch.net/2014/02/colorful-gradient-text-css3/

Für den Gradient: http://www.colorzilla.com/gradient-editor/

Der Oldschool Weg: Gib den Labeln eigene Klassen und referenzier im CSS eben drauf.

 

[Mirakel]

Dein beschriebenes Verhalten konnte ich nachvollziehen.
Mir ist jetzt aber noch nicht klar, ob die optischen Lücken gewollt sind.

Statt "B.r.a.n.d" erscheint "B . r . a . n . d".

Die "Leerzeichen" entstehen (zumindest bei mir) durch die Zeilenumbrüche.
Wenn du diese entfernst, ist der Abstand der Zeichen wieder normal.

Zudem zeigt dein Beispiel nicht, warum das Label-Tag verwendet werden muss.
Da ich dafür keine Notwendigkeit sehe, kannst du einfach <span> verwenden, dann hat der Link keine Lücken.

 

[pcBauer]

Und fall du gar keine Leerzeichen haben willst (bzw den Abstand zwischen den Zeichen), dann nimm statt label bzw span einfach div und füge dem css hinzu:

a.navbar-brand > div {
    float: left;
}

Fiddle

 

[raven16]

Dein beschriebenes Verhalten konnte ich nachvollziehen.
Mir ist jetzt aber noch nicht klar, ob die optischen Lücken gewollt sind.

Statt "B.r.a.n.d" erscheint "B . r . a . n . d".

Die "Leerzeichen" entstehen (zumindest bei mir) durch die Zeilenumbrüche.
Wenn du diese entfernst, ist der Abstand der Zeichen wieder normal.

Im Prinzip hatte ich das schon beabsichtigt. Wusste nicht, das Zeilenumbrüche im Quellcode solch einen Effekt verursachen. Interessante Info

Zudem zeigt dein Beispiel nicht, warum das Label-Tag verwendet werden muss.
Da ich dafür keine Notwendigkeit sehe, kannst du einfach <span> verwenden, dann hat der Link keine Lücken.

Irgend etwas musste ich ja für die zwei verschiedenen Farben verwenden, daher auch der Thread. Ich selbst wäre dort nie auf die Idee gekommen, ein <span>-Tag zu verwenden. Danke für den hilfreichen Tipp, hat direkt funktioniert :-)

 

[Mirakel]

Wusste nicht, das Zeilenumbrüche im Quellcode solch einen Effekt verursachen. Interessante Info

War auch für mich neu und habe ich hierdurch erst herausgefunden
Freut mich, dass ich helfen konnte.