| 

.NET C# Java Javascript Exception

3
Ich würde auf einer Webseite gerne Navigationstexte unterschiedlicher Länge diagonal durchstreichen (von links unten nach rechts oben). Wie liesse sich das am besten realisieren?
Eventuell mit Javascript?
Danke für eure Hinweise.
Harry
News:
20.09.2011
HarryS
HarryS
31 ● 1
Nur den "reinen Text", oder befindet sich der innerhalb eines Elementes (p, div, ...)? Ein horizontales durchstreichen wäre einfach <s></s> ;)
– Xantiva 21.09.2011
Im Grunde Text der durch CSS Bezeichner class oder id ausgezeichnet ist. Als Bsp würde aber sicher auch reiner text bzw. html-getaggter text ausreichen.
<p>Dieser Text soll diagonal durchgestrichen werden</p>
PS: <s> ist mir bekannt, geht aber nur horizontal, afaik.
– HarryS 21.09.2011
Mir ist nicht ganz klar wie das aussehen soll. Kannst du mal mit Paint / Photoshop nur kurze Demo machen?
– Floyd 21.09.2011
@Floyd: Jetzt hab ich zwar grad ein image gebastelt, aber es aber offenbar nicht auf codekicker stellen :-( In jedem Fall stell dir vor, mehrere Worte, die mit einer Linie von links unten nach rechts oben durchgestrichen sind.
– HarryS 21.09.2011
3 Antworten
2
Da es meines Wissens weder in HTML noch in CSS vorgesehen ist, diagonale Linien zu zeichen (lasse mich da aber gern eines besseren belehren) ist das nicht so trivial.
Da es dynamisch sein soll, wenn ich das richtig verstanden hab, mußt Du zuerst rauskriegen, wie breit und wie hoch der durchzustreichende Text ist. Wenn die Texte eh in einem 
<p id="foo">text</p>
eingefasst sind, sollte das mit jQuery möglich sein. Dann wirste ein Canvas mit JavaScript bauen müssen, da dürfte dir lineTo helfen. Den Canvas-Layer positionierts Du dann überhalb des Textes und dann solltest Du dein Ergebnis haben.

Alternativ kannste Dir vielleicht auch das Canvas sparen, indem Du einfach nur eine transparente Grafik nimmst die die diagonale Linie drin hat und die je nach Bedarf entsprechend gestreched in den Hintergrund von einem Layer über dem Text quetscht wird.
Das Ergebnis könnte aber je nach Ausgangsgrafik und Länge des Textes relativ komisch aussehen.
21.09.2011
lunatigs
lunatigs
1,1k ● 1 ● 7
Danke, klingt beides interessant. Bezüglich Alternative: Wie/Woran würdest du die Grafik positionieren? Und wie würdest du das Stretching realisieren?
– HarryS 21.09.2011
Also man kann ja nicht nur Breite und Höhe ermitteln, sondern auch Position bzw. offSet. Das heißt Du kannst den drüber liegenden Layer absolut positionieren. Das stretchen steht hier http://stackoverflow.com/questions/376253/stretch-and-scale-css-background/388817#388817
– lunatigs 21.09.2011
Anstatt eines canvas dürfte vermutlich auch ein transparentes, floating div gehen oder? Dann funktioniert es auch mit älteren Browsern.
– puls200 21.09.2011
1
Spontane Idee: Wäre es möglich, ein transparentes Bild mit schräger Linie vor den durchzustreichenden Text zu legen?!?!
21.09.2011
Jürgen Luhr
Jürgen Luhr
6,9k ● 1 ● 8
hatte ich auch als alternative gedacht, aber je mehr ich drüber nachdenke ... die diagonale linie wird da praktisch nie einheitlich, sondern immer leicht verzogen. wenn das nicht stört, ist das natürlich die einfachste lösung.
– lunatigs 21.09.2011
0
Im Grunde Text der durch CSS Bezeichner class oder id ausgezeichnet ist. Als Bsp würde aber sicher auch reiner text bzw. html-getaggter text ausreichen.
<p>Dieser Text soll diagonal durchgestrichen werden</p>
PS: <s> ist mir bekannt, geht aber nur horizontal, afaik.
21.09.2011
HarryS
HarryS
31 ● 1
Sorry hab ich irrtümlich als Antwort reingestellt. kann ich die wieder löschen? wohl eher nicht. soll ich die Frage neu anlegen?
– HarryS 21.09.2011

Stelle deine Web-Frage jetzt!