Cookie

Vorsicht


Dieser Artikel wurde mehr als vor einem Jahr veröffentlicht, Es gab Entwicklungen können.
Bitte berücksichtigen Sie dies.

Im heutigen Artikel werden wir sehen, wie eine einfache Form drehen, mit einem Knopf in einer ebenso einfachen Form mit einer formatierten Taste unformatiert. Alle Farben, Farbverläufe und Schatten werden “gebaut” über die CSS-Regeln für die Version 3. Diese wenigen einfachen Regeln sind einige nehmen’ mit einer Zange, 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 beginnen in unserem eingeben “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 Sie die folgenden Zeilen an dem 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 wenig 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 Sie die folgenden Zeilen an dem 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 ein bisschen spielen’ 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 letzten Zeilen 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:

Zu wenig?

Kategorien: GraphicsWeb

TheJoe

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.

0 Kommentare

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.