Erstellen Sie coole Schaltflächen mit CSS3 und RGBa

Nun, wenn wir diesen Titel sehen, können wir zunächst einmal die IE-Browser ignorieren.

Ich gebe zu, dass ich eine minimalistische Tendenz habe und mit der geringsten Menge an Code und Bildern mehr erreichen möchte.

Obwohl CSS3 nur wenige neue Funktionen hinzufügt, können diese Eigenschaften viele nützliche Dinge bewirken und unsere Arbeit erheblich vereinfachen. Die Schaltflächen, die wir heute erstellt haben, nutzen die abgerundeten Ecken, Boxschatten- und Textschatteneffekte von CSS3 voll aus und verwenden gleichzeitig RGBa-Farben.

Schauen wir uns zunächst die Demo an:

Diese schönen Knöpfe können wir in vier Schritten herstellen:

1. Grundeinstellungen der Tasten

Wir müssen zuerst den Grundstil der Schaltfläche festlegen. Hier können wir natürlich auch Eingabe-, Schaltflächen-Tags usw. verwenden. Das a-Tag wird hier verwendet, da nur das a-Tag das unterstützt :hover Pseudoklasse.

Vielen Dank an ytzong Children's Shoes für seinen Vorschlag. Wir haben zu display:inline-block gewechselt, wodurch die Float- und Margin-Zeilen des Codes gespeichert werden können. ——[email protected]

2. Halbtransparentes PNG-Verlaufsbild

Dies ist das einzige Bild, das wir hier verwenden. Dieses transparente PNG-Bild wird verwendet, um Farbverläufe zu erzielen. Wir können dieses Bild einen monochromen Transparenzverlauf nennen. In CSS können Sie verschiedene Farbverlaufseffekte erzielen, indem Sie eine Hintergrunddemo + ein PNG-Bild wie dieses verwenden. Dies ist natürlich keine Funktion von CSS3. Mit Ausnahme von Browsern unter IE6 können alle Browser diesen Effekt erzielen. Sie können hier klicken, um die PNG-Datei anzuzeigen.

3. Abgerundete Ecken

Abgerundete Ecken (Border-Radius) sind eine der besten CSS3-Funktionen, die derzeit von Browsern unterstützt werden. Sie werden von allen A-Level-Browsern unterstützt, obwohl die meisten davon über private Attribute implementiert sind. .

4. Schatten und RGBa

Box-Shadow und Text-Shadow sind zwei neue wichtige Eigenschaften, die CSS3 hinzugefügt wurden. Sie können problemlos Elementschatten und Textschatten auf Blockebene implementieren. Wäre es jedoch nicht besser, wenn die Schattenfarbe halbtransparent wäre? Auf diese Weise würde sich das Element besser in den Hintergrund einfügen. Es ist erwähnenswert, dass FF das Text-Shadow-Attribut nur bis Version 3.5 unterstützt (derzeit von Firefox 3.5beta4 unterstützt).

 .btn {
 ...
 Hintergrund: #222 url(sprites.png) repeat-x;
 /**Hintergrundbild**/
 -moz-border-radius: 5px;
 -webkit-Grenzradius: 5px;
 Randradius: 5px;
 /**Abgerundete Ecken**/
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0,5);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0,5);
 /**Schaltflächenschatten**/
 Textschatten: 0 -1px 1px rgba(0, 0, 0, 0,25);
 /**Textschatten**/
 }

Okay, jetzt ist unser Button komplett fertig. Es hat unser Ziel erreicht.

Dieser Button ist schwarz, daher sind Buttons in anderen Farben einfacher zu implementieren:

Bitte beachten Sie, dass diese Stile nach .btn platziert werden müssen. Auf diese Weise kann die Hintergrundfarbe dieser grünen, blauen, roten usw. Schaltflächen die Hintergrundfarbe von .btn überschreiben. und dann verwenden

Lassen Sie uns schließlich Mitleid mit dem IE-Browser haben. In den Browsern IE7 und IE8 werden diese Schaltflächen rechte Winkel, Verlaufsfarben und keine transparenten Farben anzeigen. Dies liegt daran, dass sie in IE6 einen hellblauen Hintergrund anzeigen unterstützt keine PNG-Transparenz. Wenn Sie möchten, dass es im IE6 wie eine Schaltfläche aussieht, verwenden Sie einfach die IE-Filter nach js.