Frage von GoatMode, 49

Kann man via HTML oder CSS eine Bildtextur über hervorgehobene Textabschnitte (Links, etc) legen und wenn ja kann mir jemand sagen wie?

Guten Tag,

Seit einiger Zeit arbeite ich nun an einer kleinen Website für mich und meine Freunde und bin momentan dabei die Website optisch etwas auf zu frischen. Dabei kam mir der Gedanke die gehighlighteteten Bereiche (wie zum Beispiel Links, der aktuelle Tab in der Navigation oder Überschriften nicht mit einer einzelenen Farbe, sondern mit einer Art Textur zu belegen, um ein Muster auf diese zu bringen.

Hat vielleicht jemand eine Idee oder sogar eine komplett Lösung für mein Anliegen?

Falls ja hätte ich gerne einmal die Anleitung für Dummies von 3 - 5 Jahren :)

Vielen Dank im vorraus :D

(Ein Besipeil für eine solche Textur (hier verwendet im Logo) wird im Anhang hochgeladen)

Antwort
von fluffiknuffi, 6

Hier sind ein paar Methoden:

http://www.webdesignerdepot.com/2014/12/3-tricks-for-adding-texture-to-your-text...

Ich glaube auch wenn du mit Javascript Text in ein Canvas-Element schreibst kann man das hinbekommen - bin aber nicht sicher.

Antwort
von mm78pr, 28

obs mit CSS only geht weiss ich nicht aber mit hilfe von SVG kann man eine Textur auf normalen Text legen. da findest du einige gute Beispiele bei google.

Kommentar von GoatMode ,

Danke für die extrem schnelle Antowrt! Ich schaue mich mal um und melde mich dann zurück :)

Antwort
von AndyCrafty, 24

Du könntest dir eine eigene font mit der jeweiligen textur erstellen diese hochladen und so einbinden:
@font-face{
    font-family: "...";
    src: url('url-zur-font ');
}

Kommentar von GoatMode ,

wie gesagt war eine Anleitung für dummis gefordert deshalb verzeih mir diese Frage aber bei "url-zur-font" muss ich den link zur textur angeben richtig? und in welchen format sollte diese sein?

Kommentar von AndyCrafty ,

Also du erstellst eine Bild-Datei mit allen Buchstaben beispielsweise mit dieser Vorlage: http://www.myscriptfont.com/res/ScriptTemplate.png
Wenn du das Gemacht hast, lädst du diese auf dieser Seite hoch: http://www.myscriptfont.com/de.html
Als Ausgabe Format gibst du TTF an und als Namen einfach einen Namen so wie du es nennen möchtest.
So das war die Font dann lädst du die TTF Datei beispielsweise auf den webspace hoch auf dem deine Website liegt. Und bindest diese mit dem von mir geschriebenem Code in deine Website ein.

Lg. AndyCrafty

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten