hover
<table border="0px" width="600px"><tr><td width="300px" style="vertical-align:top;">
:hover <font color="orange">[/b](Mit Mauszeiger über Element)</font>
</td><td width="400px">
hover beschreibt, was passiert, wenn mit der Maus über ein Element gefahren wird. Der Hover Effekt kann überall eingefügt werden, um einen gewünschten Effekt überzeugen.
Beispiele:
<font color="grey">.header:hover {background: #[/b]fff;}; </font>
ändert den Hintergrund im Header beim drüber fahren von Farbe x in weiß.
<font color="grey">.tabnav a:hover {text-shadow: none; color: lime;}</font>
ändert die Farbe der Links in der Rubrikleiste beim hovern von x nach lime und entfernt den Textschatten.
So können ebenfalls Transparenz Effekte, sowie Schriftänderungen vorgenommen werden, oder beim Hovern einfach etwas verschwinden lassen.
</td></tr>
<tr><td width="300px" style="vertical-align:top;">
:before <font color="orange">(Voransetzen)</font>
:after <font color="orange">(Hinten anfügen)</font>
</td><td>
Mit :before und :after kann man z.B. einen Text, oder ein Bild vor oder hinter etwas setzen. Beispiele:
<font color="grey">a.attitel:before {content: "I love ";}</font>
Statt Allmystery, steht "I love Allmystery"
<font color="grey">a.attitel:after{content: " ist geil ";}</font>
Statt Allmystery, steht "Allmystery ist geil"
<font color="grey">a.attitel:before {content: url(linkadresse );}</font>
Setzt ein Bild vor Allmystery
<font color="grey">a.attitel:after{content: url( linkadresse);}</font>
Setzt ein Bild hinter Allmystery
Bei Änderungen mit before und after müssen unter Umständen Anpassungen in der Größe der Elemente, oder der Schrift vorgenommen werden.
WICHTIG
Beim Arbeiten mit .before und :after muss auf <font color="red">Leerzeichen</font> geachtet werden, bei :before ein Leerzeichen dahinter und bei :after ein Leerzeichen davor einfügen, da sonst das Bild, bzw. der Text an Allmystery angrenzt!
</tr></td>
<tr><td width="300px" style="vertical-align:top;">
:link <font color="orange">(noch nicht besucht)</font>
:visited <font color="orange">(besucht)</font>
:active <font color="orange">(aktuell)</font>
:focus <font color="orange">(Navigation)</font>
</td><td>
Diese Befehle kann nutzen, um besuchte Seiten, bzw. noch nicht besuchte Seiten und gerade angeklickte Seiten unterschiedlich zu markieren. Beispiele:
<font color="grey">a:link {color: blue;}</font>
- alle noch nicht besuchten Links werden blau angezeigt
<font color="grey">a:visited {color: red;}</font>
- alle besuchten Links werden rot angezeigt
<font color="grey">a:active {color: violet;}</font>
- der gerade angeklickte Link wird violet angezeigt
<font color="grey">a:focus {color: green;}</font>
- erleichtert die Navigation mit der Tastatur z.B. Tab Taste, da die Links bei denen man sich gerade befindet, grün angezeigt werden.
</tr></td>
<tr><td width="300px" style="vertical-align:top;">
:nth-child () <font color="orange">(Einzelemente einer Klasse)</font>
:nth-line () <font color="orange">(Einzelzeilen eines Textes)</font>
:nth-letter () <font color="orange">(Einzelbuchstaben eines Textes)</font>
</td><td>
Ermöglicht das gezielte Ansprechen von Elementen, die keine eigene Klasse haben (Pseudoelement). Die Rubrikleiste zum Beispiel besteht aus einer Klasse. Ändert man die Form, oder Farbe betrifft das die gesamte Rubrikleiste. Will man aber den einzelnen Rubriken eigene Hintergrundfarben, oder andere Effekte geben, muss man diese mit nth-child ansprechen. Beispiel:
<font color="grey">.tabnav a:nth-child(2) {background: red;}</font>
- 2 Rubrik in der Rubrikleiste ist rot
<font color="grey">.tabnav a:nth-child(3) {background: yellow;}</font>
- 3 Rubrik in der Rubrikleiste ist gelb
<font color="grey">.gb_post_text:nth-first-line {color: yellow;}</font>
- Erste Zeile im GB Eintrag wird gelb angezeigt
<font color="grey">.gb_post_text:nth-line(3) {color: green;}</font>
- Dritte Zeile im GB Eintrag wird grün angezeigt
<font color="grey">.gb_post_text:nth-letter(57) {color: red;}</font>
- 57ter Buchstabe GB Eintrag wird rot angezeigt
<font color="grey">.gb_post_text:nth-last-letter {color: gold;}</font>
- Letzter Buchstabe im GB Eintrag wird in gold angezeigt
</tr></td>
</table></font><a href="http://www.allmystery.de/cgi-bin/allmystery.pl?am=wiki_edit&id=97" target="blank" style="position:absolute;top:43px;left:390px;">Diese Seite bearbeiten[/url]
<style>.header, .userfunction, .infoleiste, h1, .footer, tabnav, .sufu, .tabnav a, div[style=font-size:11px;position:absolute;top:10px;left:5px;background-color:black;color:#FFFFFF], div[id=reklame], a[href=/wiki/], img[src=http://static.allmystery.de/images/left.gif], center a {display: none;} table {margin-top: -100px;} </style>
:hover <font color="orange">[/b](Mit Mauszeiger über Element)</font>
</td><td width="400px">
hover beschreibt, was passiert, wenn mit der Maus über ein Element gefahren wird. Der Hover Effekt kann überall eingefügt werden, um einen gewünschten Effekt überzeugen.
Beispiele:
<font color="grey">.header:hover {background: #[/b]fff;}; </font>
ändert den Hintergrund im Header beim drüber fahren von Farbe x in weiß.
<font color="grey">.tabnav a:hover {text-shadow: none; color: lime;}</font>
ändert die Farbe der Links in der Rubrikleiste beim hovern von x nach lime und entfernt den Textschatten.
So können ebenfalls Transparenz Effekte, sowie Schriftänderungen vorgenommen werden, oder beim Hovern einfach etwas verschwinden lassen.
</td></tr>
<tr><td width="300px" style="vertical-align:top;">
:before <font color="orange">(Voransetzen)</font>
:after <font color="orange">(Hinten anfügen)</font>
</td><td>
Mit :before und :after kann man z.B. einen Text, oder ein Bild vor oder hinter etwas setzen. Beispiele:
<font color="grey">a.attitel:before {content: "I love ";}</font>
Statt Allmystery, steht "I love Allmystery"
<font color="grey">a.attitel:after{content: " ist geil ";}</font>
Statt Allmystery, steht "Allmystery ist geil"
<font color="grey">a.attitel:before {content: url(linkadresse );}</font>
Setzt ein Bild vor Allmystery
<font color="grey">a.attitel:after{content: url( linkadresse);}</font>
Setzt ein Bild hinter Allmystery
Bei Änderungen mit before und after müssen unter Umständen Anpassungen in der Größe der Elemente, oder der Schrift vorgenommen werden.
WICHTIG
Beim Arbeiten mit .before und :after muss auf <font color="red">Leerzeichen</font> geachtet werden, bei :before ein Leerzeichen dahinter und bei :after ein Leerzeichen davor einfügen, da sonst das Bild, bzw. der Text an Allmystery angrenzt!
</tr></td>
<tr><td width="300px" style="vertical-align:top;">
:link <font color="orange">(noch nicht besucht)</font>
:visited <font color="orange">(besucht)</font>
:active <font color="orange">(aktuell)</font>
:focus <font color="orange">(Navigation)</font>
</td><td>
Diese Befehle kann nutzen, um besuchte Seiten, bzw. noch nicht besuchte Seiten und gerade angeklickte Seiten unterschiedlich zu markieren. Beispiele:
<font color="grey">a:link {color: blue;}</font>
- alle noch nicht besuchten Links werden blau angezeigt
<font color="grey">a:visited {color: red;}</font>
- alle besuchten Links werden rot angezeigt
<font color="grey">a:active {color: violet;}</font>
- der gerade angeklickte Link wird violet angezeigt
<font color="grey">a:focus {color: green;}</font>
- erleichtert die Navigation mit der Tastatur z.B. Tab Taste, da die Links bei denen man sich gerade befindet, grün angezeigt werden.
</tr></td>
<tr><td width="300px" style="vertical-align:top;">
:nth-child () <font color="orange">(Einzelemente einer Klasse)</font>
:nth-line () <font color="orange">(Einzelzeilen eines Textes)</font>
:nth-letter () <font color="orange">(Einzelbuchstaben eines Textes)</font>
</td><td>
Ermöglicht das gezielte Ansprechen von Elementen, die keine eigene Klasse haben (Pseudoelement). Die Rubrikleiste zum Beispiel besteht aus einer Klasse. Ändert man die Form, oder Farbe betrifft das die gesamte Rubrikleiste. Will man aber den einzelnen Rubriken eigene Hintergrundfarben, oder andere Effekte geben, muss man diese mit nth-child ansprechen. Beispiel:
<font color="grey">.tabnav a:nth-child(2) {background: red;}</font>
- 2 Rubrik in der Rubrikleiste ist rot
<font color="grey">.tabnav a:nth-child(3) {background: yellow;}</font>
- 3 Rubrik in der Rubrikleiste ist gelb
<font color="grey">.gb_post_text:nth-first-line {color: yellow;}</font>
- Erste Zeile im GB Eintrag wird gelb angezeigt
<font color="grey">.gb_post_text:nth-line(3) {color: green;}</font>
- Dritte Zeile im GB Eintrag wird grün angezeigt
<font color="grey">.gb_post_text:nth-letter(57) {color: red;}</font>
- 57ter Buchstabe GB Eintrag wird rot angezeigt
<font color="grey">.gb_post_text:nth-last-letter {color: gold;}</font>
- Letzter Buchstabe im GB Eintrag wird in gold angezeigt
</tr></td>
</table></font><a href="http://www.allmystery.de/cgi-bin/allmystery.pl?am=wiki_edit&id=97" target="blank" style="position:absolute;top:43px;left:390px;">Diese Seite bearbeiten[/url]
<style>.header, .userfunction, .infoleiste, h1, .footer, tabnav, .sufu, .tabnav a, div[style=font-size:11px;position:absolute;top:10px;left:5px;background-color:black;color:#FFFFFF], div[id=reklame], a[href=/wiki/], img[src=http://static.allmystery.de/images/left.gif], center a {display: none;} table {margin-top: -100px;} </style>