Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Wichtige Mitglieder-Information

Aufgrund der anstehenden gesetzlichen Änderungen in Sachen Datenschutz habe ich am 03.05.2018 eine umfassende Bereinigung unserer Datenbanken vorgenommen.

Bei dieser Bereinigung habe ich alle personenbezogenen und privaten Daten unserer Mitglieder aus den Mitglieder- , Beitrags- und Nachrichtendatenbanken gelöscht.

Konkret von der Löschung betroffen waren hierbei im Wesentlichen folgende Daten:

persönliche Avatare
E-Mail-Adressen
Angaben zum Wohnort
Angaben zum Geschlecht
Angaben zu Alter und Geburtstag
IP-Adressen
Websites und Websitetitel
Signaturen
Angaben zu diversen Messengern
Passwörter
Sicherheitsfragen und -antworten
Angaben zur verwendeten Programmversion
Angaben zum verwendeten Betriebssystem
sämtlicher persönlicher Schriftverkehr in Form privater Nachrichten

Beste Grüße nettesekel

* Friendship

DER Katzenblog – mit tollen Tipps und Ideen für deine Katze(n) <3

Die letzten Beiträge

Autor Thema: Hover-Effekte für Textfelder mittels CSS  (Gelesen 2195 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
Hover-Effekte für Textfelder mittels CSS
« am: 05. Dezember 2013, 00:16:38 »
Wie man bei Textfeldern mittels CSS hover-Effekte (optische Veränderung bei Mouseover) erzielen kann, erklärt das folgende Tutorial.

Damit die Hover-Effekte auch im IE funktionieren, publiziert eure Website bitte unter dem DocType LOOSE.
In den neuen NOF-Versionen wählt ihr hierfür die HTML-Ausgabe "HTML 4.01", in älteren NOF-Versionen könnt ihr diesen Doctype mit Hilfe der SwissKnife-DocType-Komponente publizieren.

Die Komponente könnt ihr hier downloaden.
Hier könnt ihr nachlesen wie sie installiert wird.
Und hier findet ihr eine Anleitung zur Nutzung der Komponente.


Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
Re: Hover-Effekte für Textfelder mittels CSS
« Antwort #1 am: 05. Dezember 2013, 00:22:39 »
In der folgenden Demo seht ihr 1 Textfeld mit Inhalt, welches bei Berührung mit der Maus seine Hintergrundfarbe, Rahmenfarbe und die Textfarbe verändert.



Um diesen Effekt zu erzielen habe ich folgende Einfügungen vorgenommen:

------------------------------------------------------------------------------------------------
Code zum Einfügen zwischen den Head-Tags der Seite
------------------------------------------------------------------------------------------------

Code: HTML5
  1. <style type="text/css">
  2. div.style {border: 2px solid #000000; background:#FEDDF7; color:blue; padding:8px;}
  3. div.style:hover {border: 2px solid #FF0000; background:#ffffff;color:gray;padding:8px;}

------------------------------------------------------------------------------------------------
Code zum Einfügen ins HTML des Textfeldes vor dem Tag (vorher) öffnet den Div-Container
------------------------------------------------------------------------------------------------
Code: HTML5
  1. <div class="style">

------------------------------------------------------------------------------------------------
Code zum Einfügen ins HTML des Textfeldes nach dem Tag (nachher) schließt den Div-Container
------------------------------------------------------------------------------------------------
Code: HTML5
  1. </div>



Für die Einfügungen im HTML des Textfeldes darf das Textfeld nur einfach angeklickt werden, heißt, im Textfeld darf kein Cursor blinken. Die Einfügung sorgt dafür, dass der Inhalt des Textfeldes von einem Div-Container umschlossen wird. Das heißt, das Textfeld wird quasi zum Div-Container (div) und im öffnenden Tag des Divs wird dem Div die entsprechende CSS-Klasse zugewiesen.
« Letzte Änderung: 05. Dezember 2013, 00:49:54 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
Re: Hover-Effekte für Textfelder mittels CSS
« Antwort #2 am: 05. Dezember 2013, 00:29:22 »
------------------------------------------------------------------------------------------------
Erklärung zum Code
------------------------------------------------------------------------------------------------

Der Code besteht aus zwei Zeilen die CSS-Angaben enthalten.
Eine Zeile für den Standard-Zustand des Textfeldes(Divs) und eine Zeile für den Hover-Zustand der Textfeldes(Divs).

Die Zeile für den Standard-Zustand setzt sich aus dem Kürzel für den Div-Container...
Code: HTML5
  1. div

...gefolgt vom Namen der CSS-Klasse...
Code: HTML5
  1. .style

...gefolgt vom eigentlichen Inhalt der Klasse zusammen.
Code: HTML5
  1. {border: 2px solid #000000; background:#FEDDF7; color:#2B2ED1;padding:8px;}

Hier wird die Rahmenstärke (2px), der Rahmenstil (solid) und die Rahmenfarbe (#000000) , die Hintergrundfarbe (#FEDDF7), die Schriftfarbe (#2B2ED1) und der Abstand des Textes zum Rand des Textfeldes (8px) für den Standard-Zustand definiert.

------------------------------------------------------------------------------------------------

Die Zeile für den Hover-Zustand setzt sich fast identisch zusammen.
Sie beginnt ebenfalls mit dem Kürzel für den Div-Container, gefolgt vom Namen der CSS-Klasse...
Code: HTML5
  1. div.style

...nur folgt hier im Anschluss an den Namen der CSS-Klasse noch die Einfügung:
Code: HTML5
  1. :hover

...und erst dann geht es mit den Style-Angaben für den Hover-Zustand des Div-Containers weiter.
Code: HTML5
  1. {border: 2px solid #FF0000; background:#ffffff;color:#808080;padding:8px;}

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
Re: Hover-Effekte für Textfelder mittels CSS
« Antwort #3 am: 05. Dezember 2013, 00:37:26 »
Natürlich lassen sich auch verschiedene Textfelder verschieden formatieren, wie ihr in der folgenden Demo unschwer erkennen könnt.




Hierzu müsst ihr einfach nur für jedes Textfeld das anders aussehen soll, eine weitere CSS-Klasse erstellen...

Code: HTML5
  1. <style type="text/css">
  2. div.style {border: 2px solid #000000; background:#FED........}
  3. div.style:hover {border: 2px solid #FF0000; background:#FFF.....}
  4.  
  5. div.styleA {border: 2px solid #000000; background:#FED........}
  6. div.styleA:hover {border: 2px solid #FF0000; background:#FFF.....}
  7.  
  8. div.styleB {border: 2px solid #000000; background:#FED........}
  9. div.styleB:hover {border: 2px solid #FF0000; background:#FFF.....}
  10.  
  11. div.styleC {border: 2px solid #000000; background:#FED........}
  12. div.styleC:hover {border: 2px solid #FF0000; background:#FFF.....}

...und das entsprechenden Textfeld wieder mit einem div umschließen, welchem die jeweilige CSS-Klasse zugewiesen ist.

In meinem Beispiel wären das die Klassen:

style    >>  class="style"   >>  <div class="style">
styleA  >>  class="styleA"   >>  <div class="styleA">
styleB  >>  class="styleB"   >>  <div class="styleB">
styleC  >>  class="styleC"   >>  <div class="styleC">

« Letzte Änderung: 19. Februar 2014, 23:24:41 von nettesekel »

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion