textschatten
jochen
- css
0 Cybaer- dhtml
0 jochen0 Ashura0 jochen
0 wahsaga
Hallo!
Ich möchte einem Text gerne einen Schatten zuweisen. Damit dies auch in allen Browsern funktioniert, möchte ich es nicht mit dem ie-filter sondern mit css machen. Ich hab mir dazu auch schon jede Menge durchgelesen und selbst getestet (auch alte beiträge aus dem Forum), aber so langsam verzweifle ich.
Folgende Probleme haben sich bei mir jeweils ergeben:
als ich den Text nochmals hingeschrieben habe (als <h1>-tag), dann wurde er nach unten verschoben. Mit css konnte ich ihm zwar den negativen margin nach oben zuweisen, aber dafür blieb die höhe unverändert, heißt, meine überschrift war plötzlich doppelt so hoch!
absolute konnte ich meine überschrift nicht setzen, da das ganze sehr dynamisch sein soll (je nach Bildschirmgröße und nicht auf den Pixel festzementiert).
der häufige Vorschlag, z.B. top:-35px; funktioniert bei der strict variante denke ich nicht mehr. Da muss man schon margin-top:... nehmen. Die ineinander verschachtelten Divs sorgen später übrigens dafür, dass ein Logo und runde Ecken erscheinen, sind also nicht unnötig!
Hier nur das Beispiel des Kopfes, so kann man sich die Ausgangslage (ohne Schattenversuch) vielleicht besser vorstellen:
Beispiel http://fc-lenzkirch.de/beispiel.html
Noch eine kleine Frage nebenbei. Ich hab auch gelesen, dass es vielleicht doch nicht so geschickt ist, das ganze mit css zu machen, weil der reine "Text" dann doppelt vorkommt (@suchmaschine, ...).
Ich hoffe ihr könnt mir helfen!
Dank im Voraus
Gruß Jochen
Hi,
Noch eine kleine Frage nebenbei. Ich hab auch gelesen, dass es vielleicht doch nicht so geschickt ist, das ganze mit css zu machen, weil der reine "Text" dann doppelt vorkommt (@suchmaschine, ...).
S. Elementposition herausfinden.
Das Beispiel schattiert. Beachte aber auch den letzten Satz. ;-)
Gruß, Cybaer
Hi Cybaer!
zunächst mal Danke für deine Antwort. Allerdings wäre es so nicht mit CSS gelöst und Javascript hat schließlich nicht jeder aktiviert. Außerdem erscheint es mir etwas viel Code für einen Schatten (gut, ich bin kein JS-Fachmann :-)). Geht das nicht irgendwie einfacher?
Gruß Jochen
Hi,
Noch eine kleine Frage nebenbei. Ich hab auch gelesen, dass es vielleicht doch nicht so geschickt ist, das ganze mit css zu machen, weil der reine "Text" dann doppelt vorkommt (@suchmaschine, ...).
S. Elementposition herausfinden.
Das Beispiel schattiert. Beachte aber auch den letzten Satz. ;-)
Gruß, Cybaer
Hallo jochen.
zunächst mal Danke für deine Antwort. Allerdings wäre es so nicht mit CSS gelöst und Javascript hat schließlich nicht jeder aktiviert. Außerdem erscheint es mir etwas viel Code für einen Schatten (gut, ich bin kein JS-Fachmann :-)). Geht das nicht irgendwie einfacher?
Im Konqueror und Safari ist es mit http://de.selfhtml.org/css/eigenschaften/schrift.htm#text_shadow@title=text-shadow umsetzbar.
Einen schönen Mittwoch noch.
Gruß, Ashura
Hi Ashura!
Danke für deinen Tipp! Eigentlich wollte ich halt genau das vermeiden, dass ich für jeden Browser den Schatten speziell angeben muss. Deshalb wollte ich es mit CSS lösen. Oder was meinst du dazu? Ist es so das einfachste?
Gruß
Hallo jochen.
zunächst mal Danke für deine Antwort. Allerdings wäre es so nicht mit CSS gelöst und Javascript hat schließlich nicht jeder aktiviert. Außerdem erscheint es mir etwas viel Code für einen Schatten (gut, ich bin kein JS-Fachmann :-)). Geht das nicht irgendwie einfacher?
Im Konqueror und Safari ist es mit http://de.selfhtml.org/css/eigenschaften/schrift.htm#text_shadow@title=text-shadow umsetzbar.
Einen schönen Mittwoch noch.
Gruß, Ashura
Hallo jochen.
Danke für deinen Tipp! Eigentlich wollte ich halt genau das vermeiden, dass ich für jeden Browser den Schatten speziell angeben muss.
Da nicht jeder Browser über dieselben Fähigkeiten verfügt, wirst du wohl um Tricks nicht herum kommen, wenn du den Effekt für die breite Masse verfügbar machen möchtest.
Deshalb wollte ich es mit CSS lösen. Oder was meinst du dazu? Ist es so das einfachste?
Es ist einfach, ja. Aber wie gesagt leider nicht von allen Browsern unterstützt.
Einen schönen Mittwoch noch.
Gruß, Ashura
PS: Und vermeide bitte TOFU, danke.
Hallo,
Was spricht bei Deinem Vorhaben (Schatten, runde Ecken,...) gegen ein Bild mit gutem alt-Attribut? Macht eine Zeile Code...
Oder einem Hintergrundbild in der H1-Überschrift sowie einem Text, der mit display: none; ausgeblendet wird (für Suchmaschinen eben lesbar bleibt)...
Mit freundlichem Gruß
Micha
Hi Micha!
Ich glaub ich war knapp zu langsam für deinen Beitrag. :-) Genau auf das wird es bei mir nun wahrscheinlich herauslaufen. Wenn ich den Text als display: none; setze, denken die Suchmaschinen dann, dass ich sie versuche mit schmutzigen Tricks zu hintergehen??
Danke und Gruß
Jochen
Hallo jochen,
Wenn ich den Text als display: none; setze, denken die Suchmaschinen dann, dass ich sie versuche mit schmutzigen Tricks zu hintergehen??
Das kann ich Dir leider nicht sagen, ich mach es einfach so...
Mit freundlichem Gruß
Micha
Hallo derletztekick.
Oder einem Hintergrundbild in der H1-Überschrift sowie einem Text, der mit display: none; ausgeblendet wird (für Suchmaschinen eben lesbar bleibt)...
Wenn du per display:none das h1 ausblendest, ist der Hintergrund hierfür aber auch nicht mehr sichtbar …
Einen schönen Mittwoch noch.
Gruß, Ashura
Hallo Ashura,
Wenn du per display:none das h1 ausblendest, ist der Hintergrund hierfür aber auch nicht mehr sichtbar
Ja, man benötigt natürlich noch ein weiteres Tag (span, em, strong...).
Mit freundlichem Gruß
Micha
Hallo derletztekick.
Wenn du per display:none das h1 ausblendest, ist der Hintergrund hierfür aber auch nicht mehr sichtbar
Ja, man benötigt natürlich noch ein weiteres Tag (span, em, strong...).
Wenn sich dies im h1 befindet, wird es ebenfalls ausgeblendet.
Einen schönen Mittwoch noch.
Gruß, Ashura
Hallo Ashura,
*rettungsversuche*
zunächst, wo habe ich geschrieben, dass der Text in der h1 sein soll?
"Oder einem Hintergrundbild in der H1-Überschrift sowie einem Text, der mit display: none; ausgeblendet wird"
Wenn sich dies im h1 befindet, wird es ebenfalls ausgeblendet.
Richtig, hat keiner was anderes gesagt...
Schreibt ja keiner, das Du h1 ausblenden sollst, oder? Damit sind wir bei meinem zusätzlichen Tag, der eingefügt werden muss und ggf mit einer entsprechenden Eigenschaft belegt werden sollte...
Viele liebe Grüße
Micha
Hallo derletztekick.
zunächst, wo habe ich geschrieben, dass der Text in der h1 sein soll?
"Oder einem Hintergrundbild in der H1-Überschrift sowie einem Text, der mit display: none; ausgeblendet wird"
Da du hier nichts weiter dazu geschrieben hast, gehe ich davon aus, dass du Hintergrundbild und Text auf das h1-Element bezogen hast.
Schreibt ja keiner, das Du h1 ausblenden sollst, oder?
Je nach dem, wie man obigen Text deutet schon.
Damit sind wir bei meinem zusätzlichen Tag, der eingefügt werden muss und ggf mit einer entsprechenden Eigenschaft belegt werden sollte...
Da ich dir nun überhaupt nicht mehr folgen kann, wäre ich dir dankbar, wenn du deinen Vorschlag in HTML+CSS ausdrücken könntest.
Einen schönen Mittwoch noch.
Gruß, Ashura
Hallo Ashura,
<!-- html Auszug -->
<h1 id="banner"><span>Titel Deiner Seite</span></h1>
<!-- html Auszug -->
eine mögliche CSS zur ID "banner":
h1#banner{
background: red url("./image/head.png") no-repeat;
/* weitere Angaben (Höhe, Position, usw.) */
}
h1#banner span{
display: none;
}
So, nun ab ins Archiv mit Dir...
Mit freundlichem Gruß
Micha
Hallo derletztekick.
[ Code ]
So, nun ab ins Archiv mit Dir...
Ah, nun verstehe ich und ja, ist akzeptabel.
Einen schönen Mittwoch noch.
Gruß, Ashura
Hallo Ashura, hallo Micha
Ah, nun verstehe ich und ja, ist akzeptabel.
Das finde ich nicht unbedingt.
Was ist zu sehen, wenn die Grafik nicht angezeigt wird?
Was sagt ein Screenreader?
Was ist auf einem Ausdruck der Seite zu sehen?
Auf Wiederlesen
Detlef
Hallo Detlef G.,
»» Hallo Ashura, hallo Micha
Ah, nun verstehe ich und ja, ist akzeptabel.
Das finde ich nicht unbedingt.
Was ist zu sehen, wenn die Grafik nicht angezeigt wird?
In meinem Beispiel wohl eine rote Fläche würde ich sagen. Setzt vll auch vorraus, das man der Überschrift eine Höhe verpasst hat...
Was sagt ein Screenreader?
Kann ich leider nicht sagen, ich habe keinen.
Ich habe es aber mit meiner [link=http://derletztekick.com@title=Seite] getestet. Im [link=http://www.delorie.com/web/lynxview.cgi?url=http%3A%2F%2Fwww.derletztekick.com%2Findex.php@title=LynxViewer] sieht es okay aus...
Was ist auf einem Ausdruck der Seite zu sehen?
Da würde ich meinen Code dahingegen erweitern wollen: media="screen" für die CSS
Mit freundlichem Gruß
Micha
Sry, sollte so aussehen:
Ich habe es aber mit meiner Seite getestet. Im LynxViewer sieht es okay aus...
Mit freundlichem Gruß
Micha
Hallo Micha
In meinem Beispiel wohl eine rote Fläche würde ich sagen. Setzt vll auch vorraus, das man der Überschrift eine Höhe verpasst hat...
Also _keine_ Überschrift.
Was sagt ein Screenreader?
Versteckter Text-Block und Screenreader Jaws
Wieder _keine_ Überschrift.
Was ist auf einem Ausdruck der Seite zu sehen?
Da würde ich meinen Code dahingegen erweitern wollen: media="screen" für die CSS
OK
Ich würde es eher andersherum machen und das Bild über die Schrift legen.
Auf Wiederlesen
Detlef
Hallo Detlef G.,
Also _keine_ Überschrift.
Nein, in meinem Fall gehen ihn auch keine Informationen durch die Lappen...
Was sagt ein Screenreader?
Versteckter Text-Block und Screenreader Jaws
Wieder _keine_ Überschrift.
Doch, mit einem /vernünftigen/ Browser. Wenn ich Tabelle weiter unten korrekt deute, erkennt bspw.: pwWebSpeak es korrekt.
Nun möchte ich hier kein Diskussion über Browser anzetteln, wie es des öfteren zwischen dem IE und anderen passiert...
Es soll nur zeigen, das es alertative Browser zu Jaws gibt, die es so umsetzen, wie ich es mir gedacht hätte. Ich stecke jedoch viel zu wenig in der Materie, um mich hier aus den Fenster zu lehnen.
Ich würde es eher andersherum machen und das Bild über die Schrift legen.
Du meinst duch z-index?
Mit freundlichem Gruß
Micha
Hallo Micha
Ich würde es eher andersherum machen und das Bild über die Schrift legen.
Du meinst duch z-index?
Auf Wiederlesen
Detlef
Hallo Detlef G.,
Das kann ich bei mir leider nicht machen, zumindest spielt Opera8 da nicht mit. Der setzt das "Karteikarten-Menü" unter die Überschrift bzw. das Hintergrundbild. Ich habe keinen Weg gefunden, die Anzeigereihenfolge abzuändern!? Im Firefox konnte ich mittels z-index die Darstellung beliebig festlegen aber Opera reagiert da nicht drauf...
Mit freundlichem Gruß
Micha
Hi,
So, nun ab ins Archiv mit Dir...
Zu Nachteilen von FIR (Fahrner Image Replacement) möchtest Du bitte googeln oder vielleicht auch hier suchen.
Darüberhinaus fallen mir spontan noch so *einige* weitere Nachteile ein.
Zu dem was Wahsaga (mir förmlich aus der Tastatur ;-)) schrieb, möchte ich nur noch hinzufügen:
Ein großes Script kannst Du vermeiden, wenn Du Text (und dann auch den Schatten) positionieren kannst. Die Ermittlung der aktuellen Position entfällt dann ja komplett - und darum geht es in meinem Script ja eigentlich.
Trotzdem würde ich den Schatten (den ich zusätzlich noch teiltransparent machen würde) nur mit JS verwirklichen (s. Wahsagas Argumentation). Bzw. ich würde wohl eine Mischung aus CSS (auch dem proprietären von MS) und JS verwenden, am besten mit einem externen Script, das mittels innerHTML den aktuellen Quellcode vollautoatisch erweitert (OK, das wird wieder ein bissel größer - aber so bin ich halt ;-)).
Eine Grafik würde *ich* für diesen Zweck *unter keinen auch nur irgendwie gearteten Umständen* verwenden - selbst wenn ich deren Generierung on-the-fly und vollautomatisch von PHP machen lassen würde.
Aber es ist ja deine Seite ...
Gruß, Cybaer
Hallo Cybaer,
Zu Nachteilen von FIR (Fahrner Image Replacement) möchtest Du bitte googeln oder vielleicht auch hier suchen.
_möchte_ ich nicht, habe es aber getan und gesehen, das es das selbe ist, worauf ich hier schon geantwortet habe...
Eine Grafik würde *ich* für diesen Zweck *unter keinen auch nur irgendwie gearteten Umständen* verwenden....
Dann mach es einfach nicht...
Mit freundlichem Gruß
Micha
Hi,
gesehen, das es das selbe ist, worauf ich hier schon geantwortet habe...
Offensichtlich nicht - bzw. nur oberflächlich nachgeschaut. VOn weiteren Überlegungen ganz zu schweigen.
Dann mach es einfach nicht...
Ich schrieb ich ja auch, daß es *deine* Website ist und *Du* machen kannst, was immer *Du* möchtest. :-)
Sogar verhunzen! >;-)
Gruß, Cybaer
PS: Nimm's nicht persönlich! Ich will dir deine Idee ja nicht ausreden (s.o.). Aber das bleibt hier im Forumsachiv quasi für die Ewigkeit erhalten - und ein anderer HTM-Autor, der den gleichen Wunsch hat wie Du, verwechselt vielleicht "vollständiger Lösungsansatz" mit "guter, sinnvoller, surferfreundlicher Lösung", denkt nicht weiter drüber nach, und macht es genauso. Das muß nun wirklich nicht sein ...
Hallo Cybaer,
Offensichtlich nicht - bzw. nur oberflächlich nachgeschaut. VOn weiteren Überlegungen ganz zu schweigen.
Ja, habe kurz gegoogelt (wie Du es vorgeschlagen hattest), bin ja keiner, der grundsätzlich was ablehnt und habe gesehen, das es auf die selne Thematik abzielt. Für mich ergibt sich da vorrangig keine Überlegung, da keinerlei Informationen in der Grafik stecken. Sollte es also nicht möglich sein, den ausgeblendeten Text vorzulesen, wird der User keinen Informationsverlust dadurch haben.
Des Weiteren schrieb ich bereits, das ich mich mit dem Gebiet nicht befasst habe. Das hat sich auch jetzt *noch* nicht geändert.
Bevor ich jedoch ein riesen JS nutze oder den Quellcode verschachtle um mittels CSS was zu formatieren, würde ich es entweder so oder (das war ja auch ein _Vorschlag_) mit einem Bild und entsprechendem ALT-Attribut lösen.
Ich schrieb ich ja auch, daß es *deine* Website ist und *Du* machen kannst, was immer *Du* möchtest. :-)
Sogar verhunzen! >;-)
Danke fürs Kompliment...
verwechselt vielleicht "vollständiger Lösungsansatz" mit "guter, sinnvoller, surferfreundlicher Lösung"...
Wenn Du das aus dem wort Lösungsansatz rausließt, ist das ja kein Problem des Forums bzw. des Archivs. Es wurde nun wirklich mit keiner Silbe während des ganzen Beitrags erwähnt, das es eine "guter, sinnvoller, surferfreundlicher Lösung" ist - es ist und bleibt ein _möglicher_ Ansatz, so, wie es eben auch mit einem Image oder via JavaScript zu machen.
Mit freundlichem Gruß
Micha
Hi,
Wenn Du das aus dem wort Lösungsansatz rausließt, ist das ja kein Problem des Forums bzw. des Archivs.
Nein, es ist ein mögliches Problem zukünftiger Suchender, die das ...
Des Weiteren schrieb ich bereits, das ich mich mit dem Gebiet nicht befasst habe.
... dauerhaft so sehen. :-)
es ist und bleibt ein _möglicher_ Ansatz, so, wie es eben auch mit einem Image oder via JavaScript zu machen.
Ja, Du hast Recht! Es in Stein zu meißeln und jedem Surfer als Paket per Post zu schicken ist ja auch ein _möglicher_ Ansatz.
Aber genug geschmunzelt ... :-)
Gruß, Cybaer
Hallo Cybaer,
Ja, Du hast Recht! Es in Stein zu meißeln und jedem Surfer als Paket per Post zu schicken ist ja auch ein _möglicher_ Ansatz.
Da scheint zumindest das Problem, welches bei JavaScript und CSS derzeit zwischen den Browsern noch besteht, völlig weg zufallen...
Aber genug geschmunzelt ... :-)
Richtig! ;-D
Liebe Grüße
Micha
Hallo Helfer!
Also zunächst noch mal Danke für die vielen Antworten. Ich hab nicht damit gerechnet, dass sich aus meinem Problem so eine Eigendynamik entwickelt :-)
Auch wenn es vielleicht der falsche Weg ist, ich habe es jetzt schlussendlich mit einem Hintergrundbild für <h1> gelöst, das den Text in einem <span> (display:none;) beinhaltet. Für 1024x768 schaut es nun eigentlich ganz ordentlich aus und bei 1400x1050 ist es auch noch ok.
Den Javascript-Weg habe ich für mich mal ausgeschlossen, da ich mich damit bislang nur rudimentär beschäftigt habe und die Ladezeit der Seite nicht unnötig mit schlecht programmiertem Javascript verlängern möchte.
Wer Lust hat, kann sich das ganze (in ein paar Tagen) unter http://www.fc-lenzkirch.de mal angucken.
!!Für alle Archivleser noch der Hinweis: dies ist kein sinnvoller Lösungshinweis!! :-)
Danke und Grüße
Jochen
Hi,
!!Für alle Archivleser noch der Hinweis: dies ist kein sinnvoller Lösungshinweis!! :-)
LOL
Also wenn alle Seiten im Web nur "Gutdesigner"-Seiten wären (also abgeleitet von "designenden Gutmenschen", *nicht* von "guten Designern"), dann wären ja auch die meisten Webautoren bei Werbeagenturen arbeitslos - wer kann das in Hartz-IV-Zeiten auch schon wollen?! =;->
Gruß, Cybaer
Hallo Cybaer,
Ein netter Artikel den Du da aus dem Web gezaubert hast. Hat mir doch echt gefallen. Es sheint also gut zu sein, das ich meine Seite noch selbst mache, wenn scheinbar jede Agentur es nur noch "verhunzter" haätte hinbekommen...
Nochmal zum Thema: Was wird bei dsplay: none; alles ausgeblendet? Das ganze Element oder nur der Inhalt dessen?
Mir ist gerade durch den Kopf gegangen, man könnte ja dem span-Tag auch ein title Attribut mitgeben. Da es sich um einen Kopfbereich (einen Seitentitel) handelt, wäre es auch nicht so fehlerhaft dort. Meine Frage ist nun, was passiert mit diesem Attribut im Zusammenspiel mit display: none?
Alternativ: wäre es für die Überschrift selbst natürlich auch möglich....
Bis morgen,
Micha
Hallo derletztekick.
Nochmal zum Thema: Was wird bei dsplay: none; alles ausgeblendet? Das ganze Element oder nur der Inhalt dessen?
Es wird all das ausgeblendet, auf was der betreffende Selektor zutrifft. (Also Element und Inhalt.)
Dadurch sind momentan leider solche Konstrukte wirkungslos:
foo {
display:none;
}
foo::before {
content:'Bar';
display:block;
}
Einen schönen Donnerstag noch.
Gruß, Ashura
Hallo Ihr zwei,
Danke für den Link @Cybaer
@Ashura schade, war ja ein "Versuch" Wert. Das direkte betiteln der Überschrift mag ich nicht so, man könnte natürlich mit einem kleine JS das Ding wieder entfernen... Ob das sinnig ist?
Mit freundlichem Gruß
Micha
Hi,
Es sheint also gut zu sein, das ich meine Seite noch selbst mache, wenn scheinbar jede Agentur es nur noch "verhunzter" haätte hinbekommen...
;)
Keine Frage. Und um Dich noch ein bißchen mehr "aufzubauen": So schlimm kriegt es IMHO z.B. keiner hin, der hier auch nur einmal ins Forum geschaut hat. (Ja, auch dafür bekommt man Geld.)
Gruß, Cybaer
Hallo Ashura,
Das Problem an dieser relativ einfachen Lösung ist, wie du schon sagst, der Browser. Leider surfen halt >95% mit was anderem. Das heißt, es wird wohl auf ein Bild herauslaufen müssen ... So ein Mist!
Danke trotzdem, TOFU war nicht meine Absicht :-)
Gruß
hi,
Allerdings wäre es so nicht mit CSS gelöst
Das ist browserübergreifend rein mit CSS derzeit auch noch nicht wirklich lösbar (wenn wir jetzt mal vom doppelten Einfügen des Textes fest ins HTML-Dokument absehen, was aber schon aufgrund der SuMas nicht gewünscht ist).
und Javascript hat schließlich nicht jeder aktiviert.
Na und? Dann würde, bei einer JS-basierten Lösung, halt ein Benutzer ohne JS einen optionalen optischen Effekt nicht zu Gesicht bekommen - wahrlich kein Beinbruch!
Außerdem erscheint es mir etwas viel Code für einen Schatten
Ja, mir auch.
Geht das nicht irgendwie einfacher?
Ginge schon ...
Aber auch hierzu müsste der Text erst mal dupliziert werden - aber wenn das per JS gemacht wird, stört es die SuMas ja schon mal nicht mehr (höchstens einen Benutzer, der zwar JS aktiviert hat, aber CSS nicht).
Man könnte also per JS den Textinhalt bestimmer Elemente "klonen", in dem man bspw. einen span mit eben diesem Textinhalt dynamisch erzeugt, und ihn in das original den Text enthaltende Element einhängt. Mittels einer Kombination aus relativer und absoluter Positionierung per CSS könnte man dann diesen span um ein paar Pixel versetzt direkt unter dem Originaltext ausrichten, so dass ein Schatteneffekt entsteht.
Dazu braucht es aber natürlich schon ein paar Kenntnisse in Javascript (DOM) und CSS ... und jetzt ein komplettes Script hier hinwerfen werde ich natürlich nicht, das ist nur ein Denkansatz für einen potentiell Interessierten, der sich gern in die Materie einarbeiten möchte ;-)
gruß,
wahsaga