Webdesign - Der Button-Effekt im Menü dieser Website

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Wie wurden die Buttons für das Menü erstellt?

26Feb2014

Der Button-Effekt im Menü dieser Website


Auch für die Darstellung der Tasten im Menü musste als Vorlage mein Radio herhalten. Für die Farbgebung habe ich mich an dem Farbverlauf im Kopf der Seiten gehalten und durch den wechselnden Farbverlauf, beim Überfahren eines Buttons mit dem Mauszeiger, den Eindruck einer gedrückten Taste erzeugt.
Die Buttons auf dieser Website sind dabei alleine mit CSS3 (Cascading Style Sheet)-Mitteln erstellt worden.

Zuerst wird die Navigation "nav" platziert, eine entsprechende Breite für die Navigationszeile, die Größe der Schrift, sowie ein Schatten nach unten festgelegt. Durch den Schatten heben sich die Bedienelemente von der hellen Seite ab und vermitteln den Eindruck, dass die Tasten hervorstehen.
Danach werden die einzelnen Tasten "nav li" mit "float: left" nebeneinander gesetzt und die Breite der Tasten festgelegt. Außerdem erhält der obere und der linke Tastenrahmen die Farbe "hellgrau color: #555", sowie der untere und der rechte Rahmen die Farbe "schwarz color: #000". Auf der Seite Klamonfra habe ich die Rahmenfarbe beim Überfahren mit dem Mauszeiger noch gewechselt. Das sieht aber bei Tasten die nebeneinander stehen nicht so gut aus.
Im nicht gedrückten Zustand werden dem Bedienelement "nav a" ein Abstand zum Rand und ein Farbverlauf zugeteilt. Außerdem werden der Beschriftung ein Textschatten und die Schrift auf "silber color: #c0c0c0" gesetzt.
Berührt man nun mit dem Mauszeiger eine Taste "nav a:hover" wird der Farbverlauf gewechselt. Dieser Buttoneffekt wird außerdem noch dadurch verstärkt, dass die Schrift durch einen geänderten Innenabstand "padding" zum Rand versetzt wird. Im Ruhezustand habe ich oben und unten einen Abstand von 18 Pixel, und rechts und links von 2 Pixel gewählt. In dem Moment wo der Mauszeiger die Taste berührt, wird der obere und der linke Abstand um 1 Pixel erhöht und der untere und der rechte Abstand um 1 Pixel verringert. Dadurch wird die Schrift der Button leicht nach rechts unten versetzt
Die Schriftfarbe wechselt dabei von "silber color: #c0c0c0" auf "weiß "color: #fff" und der Text wird unterstrichen.

nav {
    position: absolute;
    top: 179px;
    width: 54.1em;
    font-size: 1em;
    text-align: center;
    box-shadow: 0 6px 8px -1px #111;
}

nav li {
    float: left;
    width: 7.59em;
    border: 1px solid;
    border-color: #555 #000 #000 #555;
}

nav a {
    display: block;
    color: #c0c0c0;
    text-shadow: 1px 1px 1px #000;
    padding: 18px 2px;
    background: linear-gradient(#5e5e5e,#282828);
}

nav a:hover,
nav a:focus,
nav #aktiv {
    padding: 19px 1px 17px 3px;
    background: linear-gradient(#282828,#5e5e5e);
}

nav a:hover,
nav a:focus {
    color: #fff;
    text-shadow: 0 1px 1px #000;
    text-decoration: underline;
}

Schließlich erhält die aktive Taste noch die Schriftfarbe unseres Logos.

nav #aktiv {
    width: 7.35em;
    color: #e0f2f4;
}

Die Darstellung des Menüs im HTML (HyperText Markup Language) wird wie folgt geschrieben, hier allerdings nur ein Auszug des gesamten Menüs:

<nav>
  <ul>
    <li>
      <a href="codeschnipsel.php"
        title="Wissenswertes, Tipps und Tricks für Webdesigner">
        Codeschnipsel
      </a>
    </li>
  </ul>
</nav>

Damit heben sich die Tasten des Menüs optisch von der Seite hervor und der Eindruck einer gedückten Taste wird durch einfache CSS3 (Cascading Style Sheet)-Mitteln erreicht.
Auf diese Art und Weise kann man jetzt sehr schnell die Farben und damit die Optik an einen andern Hintergrund anpassen.

Zum Seitenanfang springen Λ