TheJoe.it Into the (öffnen) Quelle

14Dez_Dezember_abbreviation/130

Tasten nur mit CSS

CSS-Code

Im heutigen Artikel werden wir sehen, wie eine einfache Form biegen, Eine Taste ist nicht in einer ebenso einfachen Form mit einem Button formatiert ist. Alle Farben, Farbverläufe und Schatten werden "gebaut" über die CSS-Regeln für die Version 3. Dies sind ein paar einfache Regeln, um ein wenig "mit einer Zange nehmen, weil sie funktionieren perfekt mit dem Browser auf Webkit (Safari, Konquerror, iPad / iPhone) E Gecko (Firefox e simili), aber sie nutzlos auf allen Versionen sind

Internet Explorer vor 9.

Beginnen wir mit dem HTML starten. Wir werden auch die Datei verbinden "style.css":

<html>
<Leiter>
  <link rel ="Stylesheet" href ="style.css" type ="text / css" charset ="UTF-8" />
</Leiter>
<Körper>
  <bilden action ="#">
    <Tisch>
      <tr>
        <td>Name:</td><td><input type ="Text" name ="Name" Wert =""></td>
      </tr>
      <tr>
        <td>Post:</td><td><input type ="Text" name ="Mail" Wert =""></td>
      </tr>
      <tr>
        <td colspan ="2" align ="Zentrum"><id = Taste"Schaltfläche">Senden</Schaltfläche></td>
      </tr>
    </Tisch>
  </Form><!--Ende Form ->
</Körper>
</html>

Ohne die Formatierung von CSS gegeben wäre dies die Folge sein "Knoten und Rohöl".

form_non_formattata

1. Home Style

Wir fangen an, geben Sie in unseren "style.css" die folgenden Zeilen Code, um Stil, um die Taste zu geben:

Schaltfläche{
  Breite: 100px;
  umreißen: keine;
  Cursor: Zeiger;
  text-align: Zentrum;
  text-decoration: keine;
  sind: bold 12px Arial, Helvetica, sans-serif;
  Farbe: #fff;
  padding: 10px 20px;
  Grenze: solid 1px # 0076a3;
  Hintergrund: #0095cd;
}

Inzwischen geben wir eine feste Größe, allineamo Text in der Mitte ohne Dekorationen, es ist die Schriftart eingestellt (sind), die Farbe (Farbe) und die Abstände von den anderen Elementen (padding). Dann setzen wir die Hintergrundfarbe der Schaltfläche und die Farbe des Rahmens. Dies ist das Ergebnis:

1

2. Hintergrund mit Farbverlauf

Wir könnten dann einen Farbverlauf auf der Hintergrundfarbe, eine dreidimensionale geben. Wir fügen die folgenden Zeilen an das Element "Schaltfläche" die nostro "style.css":

Hintergrund: -webkit-gradient(linear, links oben, links unten, von(#00Dienstleistungen), zu(#0078a5));
Hintergrund: -webkit-linear-gradient(Spitze,  #00Dienstleistungen,  #0078a5);
Hintergrund: -moz-linear-gradient(Spitze,  #00Dienstleistungen,  #0078a5);
Hintergrund: -ms-linear-gradient(Spitze,  #00Dienstleistungen,  #0078a5);
Hintergrund: -o-linear-gradient(Spitze,  #00Dienstleistungen,  #0078a5);

Von diesen Linien gibt es kaum zu erklären,, fügen Sie einen vertikalen Verlauf in den Hintergrund. Dies ist das Ergebnis:

2

3. Abrunden der Ecken

Je nach Ihren Wünschen können wir wollen, um die Ecken der Schaltfläche runden. Wir fügen die folgenden Zeilen an das Element "Schaltfläche" die nostro "style.css":

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

Es kann nützlich sein, zu verstehen, wie diese Werte. Sie haben zu spielen, um "um das gewünschte Ergebnis zu finden. Unten ist das Ergebnis:

3

4. Schatten

Um den letzten Hauch von Dreidimensionalität zu geben ist notwendig, um eine leichte Schattierung. Wir fügen diese Zeilen an das Element "Schaltfläche" die nostro "style.css":

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
box-shadow: 0 1px 3px rgba(0,0,0,0.5);

Dies ist das Ergebnis:

4

Und jetzt haben wir eine Schaltfläche mit einem Stil, den Sie müssen nur die klassische Wirkung auf Maus-Set und klicken Sie auf. Die folgenden Zeilen zu der Datei hinzufügen "style.css":

Schaltfläche:schweben {
  Hintergrund: #0095cd;
  Hintergrund: -webkit-gradient(linear, links oben, links unten, von(#0078a5), zu(#00Dienstleistungen));
  Hintergrund: -webkit-linear-gradient(Spitze,  #0078a5,  #00Dienstleistungen);
  Hintergrund: -moz-linear-gradient(Spitze,  #0078a5,  #00Dienstleistungen);
  Hintergrund: -ms-linear-gradient(Spitze,  #0078a5,  #00Dienstleistungen);
  Hintergrund: -o-linear-gradient(Spitze,  #0078a5,  #00Dienstleistungen);
  Hintergrund: linear-gradient(Spitze,  #0078a5,  #00Dienstleistungen);
}

Schaltfläche:aktiv{
  Position: relativen;
  Spitze: 1px;
}

Und dies ist das Ergebnis der Ausführung:

hat dir dieser Artikel gefallen?

Dann abonniere doch diesen Blog per RSS Feed!

Über

Ich halte diesen Blog als ein Hobby von 2009. Ich bin begeistert von Grafik, Technologie, Open Source Software. Unter meinen Artikel wird nicht schwierig sein, über die Musik finden, und einige persönliche Reflexionen, aber ich bevorzuge die direkte Linie des Blogs vor allem auf Technologie. Weitere Informationen Kontaktieren Sie mich.

Kommentare (0) Trackbacks (0)

Zu diesem Artikel wurden noch keine Kommentare geschrieben.


Hinterlasse einen Kommentar

Noch keine Trackbacks.