nicht angemeldet
Seite abdunkeln bei Klick in Input Feld
0 
Gunnar Bittersmann
0
Seite abdunkeln bei Klick in Input Feld
AugeHallo,
ist es möglich meine Seite komplett abzudunkeln wenn ich in das Feld Titel klicke?
<body>
<form name="form1" method="post" action="">
<label for="titel">Titel</label>
<input type="text" name="titel" id="titel" value="">
</form>
</body>
Die zweite Frage, wenn die erste Frage geht, wäre es dann möglich oberhalb dem Textfeld ein kleines Infofenster einzublenden?
-
@@Jule
ist es möglich meine Seite komplett abzudunkeln wenn ich in das Feld Titel klicke?
Das wäre kaum sinnvoll. Dann ist ja nichts mehr zu sehen (auch nicht das Feld Titel).
Also vielleicht nicht ganz komplett? Ja, ist möglich.
Die zweite Frage, wenn die erste Frage geht, wäre es dann möglich oberhalb dem Textfeld ein kleines Infofenster einzublenden?
Ja, ebenso.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Hallo,
Also vielleicht nicht ganz komplett? Ja, ist möglich.
vielen Dank für dein Beispiel. Genau so habe ich es gemeint. Dazu hätte ich noch eine Frage. Ist es möglich die Abdunklung etwas langsamer zu machen? Ich weiß das sind nur Spielereien aber mir gefallen diese :)
Die zweite Frage, wenn die erste Frage geht, wäre es dann möglich oberhalb dem Textfeld ein kleines Infofenster einzublenden?
Ja, ebenso.
Das heißt ich müsste wahrscheinlich ein DIV über dem Textfeld plazieren, dieses ausblenden und mit deiner Abdunkelungs-Funktion verknüpfen?
-
Hallo
Also vielleicht nicht ganz komplett? Ja, ist möglich.
vielen Dank für dein Beispiel. Genau so habe ich es gemeint. Dazu hätte ich noch eine Frage. Ist es möglich die Abdunklung etwas langsamer zu machen? Ich weiß das sind nur Spielereien aber mir gefallen diese :)
Ja, das geht mit der CSS-Eigenschaft Transition. Die Unterstützung durch die Browser ist weit mehr als ausreichend. Beispiele findest du nicht nur im Wiki (erster Link), sondern auch im Reiter „Resources“ im zweiten Link.
Tschö, Auge
--
Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
Terry Pratchett, „Gevatter Tod“-
@@Auge
Ja, das geht mit der CSS-Eigenschaft Transition.
Ein bisschen Gehirnschmalz muss man da aber schon reinstecken.
Umschalten der Sichtbarkeit mit
display:none/block` fällt dann aus.Auf
opacity: 0/0.5lässt sichtransitionanwenden. Aber das reicht nicht. Die Blende darf ja nicht unsichtbar über anderen Elementen liegen, sonst sind die nicht clickbar. Also auch sowas wiez-index: -1/0schalten.Auch auf
z-indexlässt sichtransitionanwenden. Nur muss man auf die Abfolge achten. Beim Ausblenden der Blende darfz-indexerst am Ende deropacity-Transition umgeschaltet werden.Die Unterstützung durch die Browser ist weit mehr als ausreichend.
Alle relevanten außer – naturgegeben – Opera Mini.
Und selbst wenn
transitionnicht weitgehend unterstützt werden würde, wäre das auch egal.transitionmacht ja nichts kaputt, sondern bereichert (progressive enhancemant).LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
-
-
@@Jule
Das heißt ich müsste wahrscheinlich ein DIV über dem Textfeld plazieren, dieses ausblenden und mit deiner Abdunkelungs-Funktion verknüpfen?
Das Problem daran ist, dass man mit CSS auf die Art nur Zugriff auf nachfolgende Geschwisterelemente der sich ändernden Elements und auf deren Kindelemente hat.
Das
divmüsste also nach deminputim HTML stehen. Ob das für Nutzer assitiver Technologien (Screenreader) sinnvoll ist? Dennoch kann man es aber zumindest visuell über das Eingabefeld setzten: Flexbox mitorder, absolute Positionierung, …Die absolute Positionierung bezieht sich in dem einfachen Beispiel auf den Viewport. Das gilt aber nur solange wie kein Vorfahrenelement (absolut, relativ, fix) positioniert ist; dann hätte die Blende nur noch die Ausmaße dieses Elements.
Die Blende kann aber nicht weite oben im DOM stehen, da man dann wie gesagt keinen Zugriff mit CSS darauf hat.
Ein robuste Lösung braucht doch etwas JavaScript: Bei
focuswird demhtml-Element eine Klasse verpasst, beiblurwieder weggenommen. Das funktioniert das auch mit mehren Eingabefelden, ohne dass jedes seine eigene Blende braucht. Und für die eine Blende braucht man gar kein Element im HTML mehr, das kann ein Pseudoelement sein. Sieht dann so aus.Allerdings wird
z-index: 1nur beim Fokussieren eines Eingabelders nur für dieses gesetzt. Einge gescheite Transition dafür zu bauen überlasse ich mal dir.Nachtrag: Dann kann natürlich auch das
divim DOM stehen wo es will.LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Hallo,
vielen Dank für dein Beispiel und deiner sehr ausführlichen Erklärung. Allerdings sehe ich keinen Unterschied zwischen Feld 1 und Feld 2 :). Außerdem sind die Felder beim laden der Seite nicht gleich klickbar daher nehme ich die erste Variante und schau wie ich da mein Infofeld hinein bekomme.
-
-
-