Wie Verbindungen in Schaltflächen für HTML5 und CSS3 Programmierung zu drehen

Was die HTML5-Code betroffen ist, es ist einfach eine Liste von Links. Hier gibt es nichts Besonderes, dass diese Tat wie eine Gruppe von Tasten genannt, mit Ausnahme der Schaffung eines div macht Menü. All die eigentliche Arbeit wird in CSS getan:

#menu li {list-style-type: none; Breite: 7em-text-align: center-margin-left: -2.5em -} # Menü a {text-decoration: none; color: black-Display: Block-Hintergrund -Farbe: # EEEEFF-box-shadow: 5px 5px 5px grau-margin-bottom: 2px;} # Menü a: Hover {background-color: # DDDDEE-box-shadow: 3px 3px 3px grau-border: none;}

Das Verfahren zum Drehen eines gewöhnlichen Liste von Links in eine Schaltfläche Gruppe wie diese ist einfach eine Anwendung von CSS Tricks:

  1. Beginnen Sie mit einer gewöhnlichen Liste, die richtig validieren.

    Es spielt keine Rolle, ob Sie eine ungeordnete oder geordnete Liste verwenden. Typischerweise wird die Liste Anker zu anderen Seiten enthalten. In diesem Beispiel wird eine Liste von Links zu einigen beliebten Webseiten:

  2. Google
  3. Wiley
  4. Wikipedia
  5. reddit

  6. Schließen Sie die Liste in einer benannten div.

    Typischerweise haben Sie noch normale Links auf einer Seite. Um anzuzeigen, dass diese Menü Verbindungen anders behandelt werden sollen, setzen Sie sie in einem div namens Menü. Alle CSS-Stil Tricks hier beschrieben beziehen sich auf Listen und Anker nur dann, wenn sie in einem div sind.

  7. Entfernen Sie die Kugeln durch die Einstellung list-style-type nach keiner.

    Dies entfernt die Kugeln oder Zahlen, die in der Regel in einer Liste angezeigt werden, da diese Funktionen von der Wirkung ablenken Sie sind mit dem Ziel für (eine Gruppe von Tasten). Verwenden Sie CSS, um festzulegen, wie Listenelemente sollten formatiert werden, wenn sie im Zusammenhang mit der erscheinen Menü ICH WÜRDE:

    #menu li {list-style-type: none; Breite: 5em-text-align: center-margin-left: -2.5em-}

  8. Geben Sie die Breite der einzelnen Tasten:

     Breite: 5em-

    Eine Gruppe von Tasten sieht am besten, wenn sie alle die gleiche Größe sind. Verwenden Sie die CSS Breite Attribut jeder einstellen li nach 5em.

  9. Entfernen Sie die Marge durch eine negative Verwendung margin-left Wert, wie hier gezeigt:

     margin-left: -2.5em-

    Listen haben eine Standard-Einzug von etwa um Platz für die Aufzählungszeichen oder Nummern zu machen. Da diese Liste nicht Kugeln haben wird, braucht es nicht in die Vertiefungen. Überschreiben Sie den Standard Einrücken Verhalten von einer negativen Einstellung margin-left Wert.

  10. Reinigen Sie den Anker, indem text-decoration nach keiner und Setzen des Ankers Farbe etwas statisch, wie schwarzer Text auf hellblau in diesem Beispiel:

    #menu a {text-decoration: none; color: black-Display: Block-background-color: # EEEEFF-box-shadow: 5px 5px 5px grau-margin-bottom: 2px;}

    Das Aussehen der Taste wird es deutlich machen, dass die Nutzer darauf klicken, so ist dies ein Ort, den Sie die Unterstreichung entfernen, die normalerweise mit Links geht.

  11. Geben Sie jedem Button einen Kasten Schatten, wie im Folgenden dargestellt:

     box-shadow: 5px 5px 5px grau-

    Der Schatten macht es wie eine 3D-Taste schauen von der Seite herausragen. Dies wird am besten an dem Anker befestigt ist, so dass Sie die Grenze tauschen können, wenn die Maus über die Schaltfläche schwebt.

  12. Stellen Sie den Anker des anzeigen nach Block.

    Dies ist eine hinterhältige Trick. Satzanzeige macht in der Regel ein Element wirken wie ein Block-Element in seinem Behälter. Im Fall eines Ankers, wird die gesamte Taste anklickbare, nicht nur der Text. Das macht Ihre Seite leichter zu verwenden, da die Maus, um ein viel größeres Ziel zu streben hat:

     Bildschirmsperre-

  13. Geben Sie eine kleine Lücke, jedes Element zu trennen.

    Verwenden Sie die margin-bottom Regel jede Taste zu trennen. Dadurch wird der 3D-Effekt zu verstärken, indem die Schatten noch deutlicher zu machen.

    margin-bottom: 2px;

  14. Geben Sie einen Grenzradius für abgerundeten Ecken.

    Verwendung des border-radius Eigenschaft verleiht den Ecken einen schönen abgerundeten Effekt auf die Schaltfläche Gefühl zu verbessern.

  15. Verwenden Sie einen Anfang Grenze für ein wenig mehr Dimension.

    die Grenze zu Beginn einstellen können die Tasten nur ein bisschen mehr 3D Reiz geben.

  16. Sprechen Sie die Taste niederdrücken, wenn die Maus auf einem Anker schwebt:

    #menu a: Hover {background-color: # DDDDEE-box-shadow: 3px 3px 3px grau-border: none;}

    Wenn die Maus auf den Button schwebt, ist der Schatten kleiner, und die Hintergrundfarbe des Elementes ist dunkler. Sie können auch die Grenze zu entfernen, so dass die Taste flach fühlen. Diese Techniken geben zusammen eine überzeugende Illusion der Knopf gedrückt wird.

Diese Liste ist ein ideales Navigationsmenü, vor allem, wenn sie innerhalb einer Spalte eines mehrspaltigen schwebenden Layout platziert.

Der Schatten Trick ist einfach, aber es gibt viele Variationen. Wenn Sie möchten, können Sie zwei leere Schaltfläche Bilder (eine oben und eine unten) in Ihrem Bild-Editor erstellen und tauschen einfach die Hintergrundbilder, anstatt die Schatten zu verändern. Einige Varianten beinhalten auch die Grenze zu ändern.

Ähnliche

Menü