Farbe ändernde Schrift

[sinankurt]

Hallo, ich habe ein Blog (quartel), da habe ich auch eine automatisch generierte Überschrift. Wenn man auf die Header-Überschrift "Quartel" mit der Maus geht, ändert sich de Farbe.

Ich habe aber einen eigenen Header erstellt mit einem Logo und so. Da habe ich auch eine eigene Überschrift per Adobe Illustrator erstellt. Doch diese ist ganz normal schwarz, meine Frage ist, ob man diese auch so einstellen kann, dass sie dann auch die Farbe auf die gewünschte Farbe (#FF4B33) ändert, wenn man mit der Maus drauf ist, also wie jetzt im Moment?
Wie ist dies zu realisieren? Danke und guten Morgen :-)

 

[Marv]

Hallo,

Da Du die Überschrift mit Illustrator wohl jetzt als Bild hast, kannst Du der Überschrift bzw.
dem Link der den Hovereffekt hat jetzt ein Hovereffekt zuweisen, indem sich das Hintergrundbild ändert:

Einmal halt das Bild mit von deiner Überschrift in schwarzer Schrift:

#blog-title a {
    display:block;
    line-height:10px; /*Höhe des Bildes*/
    width:100px; /* Breite des Bildes*/
    background-image:url(ueberschrift.png); /*Das Bild, bitte auf richtige Dateiendung achten (jpg oder png) */
}

Und dann den Hovereffekt definieren

#blog-title a:hover {
    background-image:url(ueberschrift-hover.png); /* ein Bild der Überschrift mit farbe */
}

So müsste das dann im Prinzip gehen, dass du eine eigene Überschrift als Bild hast, die auch anklickbar ist, wie vorher.

 

[threadi]

Wo sieht man diese "eigene Überschrift"? Ist es eine Grafik oder ist es ein in HTML geschriebener Text?

 

[sinankurt]

Den Header, welchen ich selber hochgeladen habe, habe ich noch nicht hochgeladen. Ich weiß nicht ob man das mit dem "farbe ändern" per Photoshop macht, oder eben mit CSS?

 

[Marv]

Wenn du ein Bild hast musst du natürlich eine Version des Bildes in der einen und eine Version in einer anderen Farbe(Die beim überfahren mit der Maus angezeigt werden soll) z.B. in Photoshop erstellen.
Dann geht das mit dem Überfahren-Effekt wie im Beispiel oben von mir.

Wenn die Überschrift in HTML erzeugt wird (also Text und kein Bild), dann musst du beim Hover effekt nicht das Hintergrundbild sondern die Farbe ändern

#blog-title a:hover {
    color:#FF4B33; /* Rote Text-Farbe beim überfahren mit der maus*/
}

 

[T!P-TOP]

Den Header, welchen ich selber hochgeladen habe, habe ich noch nicht hochgeladen.

:mrgreen:

Erstellst noch eine Zweite Grafik nur diesmal mit der Farbe #FF4B33. Anschließend das befolgen, was Marv geschrieben hat.
//edit: ach jetzt is marv mir zuvor gekommen :)

 

[sinankurt]

Danke euch. Doch bevor es weitergeht und ich die Header mit der aderen Farbe verdoppele, welches Header gefällt euch eigentlich besser?

http://www.html.de/off-topic-plauderecke/39370-welches-gefaellt-euch-besser.html

 

[sinankurt]

Bin jetzt fertig:

Also Schritt für Schritt: Wie gehe ich vor?

 

[threadi]

So wie Marv im zweiten Beitrag schon schrieb. Alternativ auch ohne Link und in Bezug auf eine Überschrift ("h1:hover") oder ein anderes Blockelement.

 

[sinankurt]

Ja, aber ich weiß nicht einmal wie ich es überhaupt hochlade :S

 

[threadi]

Per FTP natürlich. So wie Du sicherlich alle Dateien auf deinen Webspace hochgeladen hast.

 

[sinankurt]

Das weiß ich schon ^^
Ich meinte wie ich den Header jetzt dartstelle, also per CSS und HTML :-)

 

[threadi]

Das hab ich dir in Beitrag #9 schon gesagt.