Cookie

Nell’articolo di oggi vediamo come trasformare una semplice form, con un bottone non formattato in un’altrettanto semplice form con un bottone formattato. Alle Farben, Farbverläufe und Schatten werden “gebaut” über die CSS-Regeln für die Version 3. Queste poche regolette sono da prendere un pocon le pinze, 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.

Iniziamo con l’HTML. 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

Iniziamo a inserire all’interno del nostro “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. Aggiungiamo le seguenti righe all’elemento “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);

Di queste righe c’è poco da spiegare, 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. Aggiungiamo le seguenti righe all’elemento “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. Bisogna giocarci un poper trovare il risultato voluto. Unten ist das Ergebnis:

3

4. Schatten

Um den letzten Hauch von Dreidimensionalität zu geben ist notwendig, um eine leichte Schattierung. Aggiungiamo queste ultime righe all’elemento “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:

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.

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.