So erstellen Sie 3D-Buttons Mit CSS ()
Text-Schaltflächen, die wie grafische 3D-Buttons Schauen
Cascading Style Sheets oder CSS, kann verwendet werden, um eine Vielzahl von visuellen Effekten zu erstellen. Zum Beispiel ist es möglich, eine Schaltfläche zu erstellen, die tatsächlich reiner Text dreidimensionale (3D), sondern sieht. Der 3D-Effekt wird vorstehende mit CSS erzeugt. Dieser Artikel beschreibt zwei Möglichkeiten, in denen Sie einen 3D-Text-Button CSS produzieren verwenden, ohne Grafiken zu verwenden.
Dieser Artikel setzt voraus, dass Sie eine gute Kenntnis von CSS haben. Sie müssen kein Guru oder so etwas, aber Sie müssen ein grundlegendes Verständnis von CSS mindestens haben, wie CSS-Code in Ihre Webseite einfügen und CSS, um verschiedene HTML-Elemente anwenden.
Möglichkeiten, einen 3D Button Effekt mit CSS zu erstellen
Es gibt wahrscheinlich eine Reihe von Möglichkeiten, die Sie Text-Buttons erstellen können, die aussehen wie sie allein grafische 3D-Tasten mit CSS sind. Ich werde zwei Möglichkeiten, die in diesem Artikel beschreiben.
Mit den "Inset" und "Outset" Border Stile in CSS
Der einfachste Weg, um einen 3D-Effekt für Ihre Knöpfe zu schaffen ist eine Einrichtung von CSS für diesen Zweck zu verwenden. Nehmen Sie den folgenden Code-Schnipsel, die durch die CSS-Navigation Menüleiste Buttons Assistenten. als Beispiel:
Schauen Sie sich die Zeile "border: 1px Anfang # b37d00;". Es gibt an, dass die Taste 1 Pixel dick sein soll, einen Farbwert von „# b37d00“ hat, und hat die „Anfang“ Eigenschaft. Die „Anfang“ Eigenschaft für den border-style ist das, was auf den Button Look macht, als ob es von der Webseite vorsteht. Mit anderen Worten, macht es den Block schauen, wie es eine Taste ist, die gedrückt werden können.
CSS hat auch eine andere Eigenschaft für Grenzen „Einsatz“ bezeichnet, die wie der Name schon sagt, Blick auf den Button macht, als ob sie gedrückt wird.
Wenn Sie einen modernen Web-Browser haben, sollten Sie in der Lage sein, die Wirkung solcher CSS-Eigenschaften auf der Probe Menüleisten auf der CSS-Menüleiste Assistenten Seite zu sehen. Wenn die Wirkung des Vorsprungs oder Depression nicht sehr offensichtlich im Assistenten ist, ist es wahrscheinlich, weil ich nur 1 Pixel für den Rahmen verwendet. Der Effekt ist stärker ausgeprägt, wenn Sie einen dickeren Rahmen verwenden (zum Beispiel 2 Pixel).
So erstellen Sie eine Schaltfläche mit dem Inset oder Outset Property
Es ist sehr einfach, eine 3D-Button mit dem Einsatz oder Anfang Eigentum zu schaffen. Für jedes Stück Text, den Sie in eine Taste machen wollen, geben sie einige Hintergrundfarbe und legen Sie einen Rand-Stil mit der entsprechenden Eigenschaft ( „Einsatz“ oder „Anfang“).
Angenommen, Sie haben den Text „Home“ in einen Knopf machen wollen. Im Block den Text zu halten, legen Sie die folgenden Eigenschaften:
Farbe schwarz ;
background-color: # ffb200;
border: 1px Anfang # b37d00;
Um es optisch wie ein Knopf aussehen zu lassen, Ihre Grenze Farbe, # b37d00 in dem obigen Beispiel sollte ein Schatten Ihrer Hintergrundfarbe sein, anstatt einige andere zufällige Farbe. Der einfachste Weg, dies zu tun ist mit verschiedenen Schattierungen von Ihrer Haupt-Hintergrundfarbe für den Anfang zu experimentieren. Standard-konformer Browser wird die richtigen Farben für die verschiedenen Seiten der Taste von der Farbe, die Sie hier liefern berechnen.
Erstellen Sie manuell die vier Ränder eines Button einen 3D Button-Effekt zu erzeugen
div.button Farbe: schwarz;
background-color: # 9cf;
border-top: 1px solid # c0ffff;
border-right: 1px solid # 00f;
border-bottom: 1px solid # 00f;
border-left: 1px solid # c0ffff;
>
Wenn Sie den „Einsatz“ und „Anfang“ Stile für Ihre Grenzen verwenden (wie in dem früheren Schritt erwähnt), nimmt der Browser automatisch Pflege der richtigen Farben für Sie. Hier aber tun Sie alles von Hand, so dass Sie herausfinden müssen, welche Farben am besten funktionieren, die Art der Schaltfläche erstellen Sie für Ihre Seite wollen. Ich nehme an talentierten Grafikern Sie wahrscheinlich instinktiv sagen kann, welche Farben am besten funktionieren, aber wenn Sie alles wie ich sind, werden Sie nur verschiedene Farben versuchen müssen, und überprüfen Sie die Auswirkungen auf Ihre Web-Seite, die beste Kombination zu finden.
(Als Randnotiz, wenn Sie wissen möchten, wie die Schaltfläche Farbe ändern machen, wenn die Maus darüber bewegt wird, finden Sie im Artikel Wie Sie Ihre Verbindungen Farbe ändern, wenn die Maus schwebt über machen.)
Schlussfolgerung
Es wird, wie auf der Seite erscheinen: