Wie man stilvolle Navigationstasten Mit CSS erstellen - Vanseo Entwurf
Du bist da:
Home / Blog / CSS / So erstellen Sie stilvolle Navigationstasten Mit CSS
Finale Navigation Bar Vorschau
Bevor wir beginnen lassen Sie uns einen Blick auf, wohin wir gehen. Hier ist ein Bild von dem, was unsere letzten Navigationsleiste wie so aussehen wird auch ein Bild davon, wie es aussehen wird, wenn sie über eine der Schaltflächen mousing.
Und hier ist eine Demo von der Navigationsleiste, die in einem neuen Fenster geöffnet.
Auch ohne über Bilder der Navigationsleiste unter Verwendung hat es ein 3D-Gefühl, und vermittelt den Eindruck, dass die Tasten gedrückt werden kann oder angeklickt.
Ich werde nicht über den gesamten Code verwendet werden, gehen die Navigationsleiste in diesem Beitrag zu erstellen, wie ich das meiste davon vor in meiner einfachen Navigationsleiste Post behandelt haben. Was ich will Ihnen heute zeigen, ist der Teil, der die Taste, um den 3D-Effekt verleiht, obwohl ich den gesamten Code zur Verfügung stellen werde die Navigationsleiste am unteren Rand dieses Postens zu erstellen.
CSS Grenzen geben jedes Element Tiefe
Der Trick, um den 3D-Effekt, wie Sie oben von der Überschrift erraten können, ist CSS-Grenzen zu verwenden, um ein Gefühl der Tiefe von einer imaginären Lichtquelle zu vermitteln. Es gibt drei einfache Teile dieser Technik.
Lassen Sie uns die drei Schritte veranschaulichen eine Graustufen- Version unserer Navigationsleiste oben unter Verwendung der Farbwechsel zu erleichtern.
Ich habe oben # 555555 als Farbe für die Graustufen-Tasten verwendet, und wir gehen davon aus unserer Lichtquelle von links oben scheint. Das bedeutet, dass die obere und linke Seite der Taste sollte heller erscheinen, während der rechte und unterer Rand dunkler sein wird.
Ich habe eine 2px Grenze für jede Seite und für die oben verwendet und die linke Seite verwendet, um eine Farbe von # 777777 oder zwei Nuancen heller als die Farbe der Schaltfläche # 555555. Auf der rechten Seite wird eine Farbe zwei Nuancen dunkler bei # 333333 und der Boden ging ich nur ein Schatten dunkler mit # 444444.
In der Praxis könnte man nur eine 1px Grenze, aber ich verwenden hier 2px den Effekt noch deutlicher zu machen. Ich werde auch ein wenig mit den Farben zu spielen, um neigen dazu, bis ich etwas bekommen Ich mag, obwohl ich, indem sie alle Hex beginnen in der Regel Werte ein oder zwei Nummern dunkler oder heller.
Mit der Rollover-Schaltfläche ist der Prozess ähnlich, außer dass nun die oberen und linken Seiten werden dunkler und die rechte und unterer Rand wird leichter. Hier habe ich eine Farbe von # 999999 für die Schaltfläche selbst und dann für die Grenzen der Code ist wie folgt.
Wieder ist es das gleiche wie vorher, außer für die dunkleren und helleren Seiten umgekehrt wird.
Die Erweiterung der CSS Border-Technik
Die Technik, die oben ist sehr einfach, aber es gibt keinen Grund, warum Sie es nicht etwas für mehr kreativen Möglichkeiten erweitern können. Sie können versuchen, die Breite der verschiedenen Grenzen zu verändern oder mit den Farben spielen, um es aussehen zu lassen wie das Licht durch einen Filter gegossen wurde. Statt alle sechs hexadezimalen Ziffern zu ändern könnten Sie erhöhen oder nur die roten oder grünen Werte senken, während die blaue konstant zu halten.
Eine Sache, ich werde manchmal nicht ändern, um die oberen und unteren Rand Farben auf dem Rollover. Das wird den Eindruck, dass, wenn in der Taste sitzt auf dem gleichen Niveau wie die umgebenden Seite gedrückt wird, statt das Gefühl von der Seite leicht gedrückt, wie hier gezeigt.
Code verwendet, um die Navigationsleiste zu erstellen
Wie hier versprach den gesamten Code benutzte ich die Navigationsleiste am oberen Rand der Seite zu erstellen. Der # nav-Wrapper-Code ist es nur eine Farbe zu haben, das zeigt, was los ist besser als das Weiß der Seite. Es wird hier präsentiert, aber nicht notwendig.