Erstellen Sie schnell eine Swish Teaser-Seite mit CSS3

In diesem Lernprogramm erfahren Sie, wie Sie eine Teaser-Seite mit nur CSS, ohne Bilder oder sogar mit einem Photoshop-Design erstellen. Viele Websites und aufkommende Apps werden auf Teaser-Seiten groß geschrieben. Dies ist ein nützliches Konzept, das Sie Ihrem Toolkit hinzufügen können. Verwenden Sie es für jede App oder Website, die zum Start bereit ist.

Schritt 1: Das HTML-Markup

Der HTML-Code für die Teaser-Seite ist recht einfach. Wir haben nur einen Container mit unserem Einführungstext und Eingaben.

      App kommt bald.            App.
  Diese erstaunliche Anwendung wird Ihr Leben verändern. Melden Sie sich an, um benachrichtigt zu werden, wenn es verfügbar ist, oder folgen Sie uns auf Twitter.

Schritt 2: Positionierung und Größenbestimmung unserer Elemente

Lassen Sie uns unsere Seite etwas strukturieren. Wir beginnen mit den Grundlagen und positionieren den Container in der Mitte der Seite. Wir verwenden eine Positionierung von 50% und dann negative Ränder, um das Objekt auf die Hälfte seiner Breite und Höhe zu bringen.

 HTML, Körper Breite: 100%; Höhe: 100%; Schriftfamilie: "Helvetica Neue", Helvetica, serifenlos; Farbe: # 444; -webkit-font-smoothing: antialiased;  #container position: fixed; Breite: 500px; Höhe: 300px; Spitze: 50%; links: 50%; Rand oben: -150px; Rand links: -250px; Text ausrichten: Mitte;

Als Nächstes positionieren wir den Text und die Eingaben mithilfe von Attributauswählern, um die E-Mail anzuvisieren und Eingaben separat zu senden.

 h1 font-size: 90px;  p Breite: 80%; Schriftgröße: 23px; Zeilenhöhe: 1.3em; Marge: 1.1em Auto; Text ausrichten: Mitte;  #subscribe margin: 0 auto; Text ausrichten: Mitte;  Eingabe [Typ = E-Mail] Breite: 90%; Polsterung: 15px; Marge: 0 auto;  Eingabe [Typ = Senden] Position: absolut; Rand links: -105px; Rand oben: 5px; Polsterung: 10px; Breite: 100px; Höhe: 50px;

Schritt 3: Den Text gestalten

Die Gestaltung des Textes für diese Seite ist recht einfach. Wir möchten, dass der Name sich vom Hintergrund abhebt, also machen wir ihn weiß. Der Text ist wichtig, aber wir möchten, dass sich die Besucher an den Namen unseres Produkts erinnern, damit es nicht als ausgesprochen erscheint. Der Twitter-Link ist unterstrichen, um anzuzeigen, dass es sich um einen Link handelt.

Zuerst der Haupttext:

 h1 font-size: 90px; Schriftdicke: fett; Farbe: #fff; Text-Schatten: 0 1px 4px # 000; Rand oben: 20px;  p Breite: 80%; Schriftgröße: 23px; Zeilenhöhe: 1.3em; Farbe: #fff; Marge: 1.1em Auto; Text ausrichten: Mitte; Textschatten: 0 0 2px rgba (0, 0, 0, 0,9);

Dann den Twitter-Link:

 p a color: #fff; Rand unten: 2px fest # 2da1ec;

Schritt 4: Hintergrund gestalten

Nun zum lustigen Teil: Den Objekten auf unserer Seite das gewisse Extra zu geben. Wir beginnen damit, einen schönen Hintergrund mit Farbverlauf zu erstellen. Wenn Sie ein Mac-Benutzer sind, können Sie sich auf GradientApp verlassen, um die harte Arbeit für Sie zu erledigen. Alternativ können Sie zu CSS3 wechseln. Bitte! um sich ein Bild von der Syntax zu machen.

 HTML, Körper Breite: 100%; Höhe: 100%; Schriftfamilie: "Helvetica Neue", Helvetica, serifenlos; Farbe: # 444; -webkit-font-smoothing: antialiased; Hintergrund: # 000222; Hintergrund: -moz-linearer Gradient (oben, # 000222 0%, # 4b637c 100%); Hintergrund: -webkit-gradient (linear, links oben, links unten, Farbstopp (0%, # 000222), Farbstopp (100%, # 4b637c)); Hintergrund: -webkit-linearer Gradient (oben, # 000222 0%, # 4b637c 100%); Hintergrund: -o-linearer Gradient (oben, # 000222 0%, # 4b637c 100%); Hintergrund: -ms-linearer Gradient (oben, # 000222 0%, # 4b637c 100%); Hintergrund: linearer Gradient (oben, # 000222 0%, # 4b637c 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 000222", endColorstr = "# 4b637c", GradientType = 0);

Schritt 5: Gestalten des Abonnementformulars

Das Anmeldeformular ist der Schwerpunkt unserer Seite, da wir möchten, dass Besucher herausfinden, wann unser tolles Produkt veröffentlicht wird. Wir möchten, dass sie nach dem Namen oder dem Logo im Mittelpunkt der Seite steht.

Wir beginnen mit der Gestaltung des Platzhalters (Mozilla- und Webkit-spezifische Stile) und legen die Schriftgröße fest:

 :: - webkit-input-placeholder color: rgba (255, 255, 255, 0.4);  :: - moz-input-placeholder color: rgba (255, 255, 255, 0.4);  input font-family: "Helvetica Neue", Helvetica, serifenlos; Schriftgröße: 25px;

Nun geben wir dem Feld und der Schaltfläche etwas Farbe und Tiefe:

 Eingabe [Typ = E-Mail] Gliederung: keine; Breite: 90%; Polsterung: 15px; Marge: 0 auto; Farbe: #fff; Grenze: keine; -webkit-border-radius: 6px; -moz-border-radius: 6px; Grenzradius: 6px; Hintergrund: rgba (0, 0, 0, 0,3); -webkit-box-shadow: Einfügung 0 0 5px rgba (0, 0, 0, 0,9); -moz-box-shadow: Einfügung 0 0 5px rgba (0, 0, 0, 0,9); -o-box-shadow: Einfügung 0 0 5px rgba (0, 0, 0, 0,9); Box-Schatten: Einfügung 0 0 5px rgba (0, 0, 0, 0,9);  Eingabe [Typ = Senden] Position: absolut; Rand links: -105px; Rand oben: 5px; Schriftgröße: 25px; Farbe: # 222; Text-Schatten: 0 1px 0 #fff; Polsterung: 10px; Breite: 100px; Höhe: 50px; Grenze: keine; Hintergrund: # f0f0f0; Hintergrund: -moz-linearer Gradient (oben, # f0f0f0 0%, # c3d7ff 100%); Hintergrund: -webkit-gradient (linear, links oben, links unten, Farbstopp (0%, # f0f0f0), Farbstopp (100%, # c3d7ff)); Hintergrund: -webkit-linearer Gradient (oben, # f0f0f0 0%, # c3d7ff 100%); Hintergrund: -o-linearer Gradient (oben, # f0f0f0 0%, # c3d7ff 100%); Hintergrund: -ms-linearer Gradient (oben, # f0f0f0 0%, # c3d7ff 100%); Hintergrund: linearer Gradient (oben, # f0f0f0 0%, # c3d7ff 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f0f0f0", endColorstr = "# c3d7ff", GradientType = 0); -webkit-box-shadow: 0 0 5px rgba (0, 0, 0, 1), Einfügung 0 1px 0 rgba (255, 255, 255, 0,3); -moz-box-shadow: 0 0 5px rgba (0, 0, 0, 1), Einfügung 0 1px 0 rgba (255, 255, 255, 0,3); -o-box-shadow: 0 0 5px rgba (0, 0, 0, 1), Einfügung 0 1px 0 rgba (255, 255, 255, 0,3); Box-Schatten: 0 0 5px rgba (0, 0, 0, 1), eingesetzter 0 1px 0 rgba (255, 255, 255, 0,3); -webkit-border-radius: 3px; -moz-border-radius: 3px; Grenzradius: 3px; Cursor: Zeiger;

Schritt 6: CSS-Übergänge hinzufügen

Fügen Sie einige nette CSS-Übergänge hinzu, um die Aufmerksamkeit der Besucher zu erregen.

Zuerst fügen wir dem Twitter-Link und den Eingaben Hover- und aktive Status hinzu:

 p a color: #fff; Rand unten: 2px fest # 2da1ec;  p a: hover color: # 2da1ec; Rahmen unten: 2px fest #fff;

 Eingabe [Typ = E-Mail] Gliederung: keine; Breite: 90%; Polsterung: 15px; Marge: 0 auto; Farbe: #fff; Grenze: keine; -webkit-border-radius: 6px; -moz-border-radius: 6px; Grenzradius: 6px; Hintergrund: rgba (0, 0, 0, 0,3); -webkit-box-shadow: Einfügung 0 0 5px rgba (0, 0, 0, 0,9); -moz-box-shadow: Einfügung 0 0 5px rgba (0, 0, 0, 0,9); -o-box-shadow: Einfügung 0 0 5px rgba (0, 0, 0, 0,9); Box-Schatten: Einfügung 0 0 5px rgba (0, 0, 0, 0,9);  Eingabe [Typ = E-Mail]: hover Hintergrund: rgba (0, 0, 0, 0,5);  Eingabe [Typ = E-Mail]: Fokus -webkit-box-shadow: Einfügung 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0,2); -moz-box-shadow: Einfügung 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0,2); -o-box-shadow: Einfügung 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0,2); Box-Schatten: Einfügung 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0,2); Hintergrund: rgba (0, 0, 0, 0,6);  Eingabe [Typ = Senden] Position: absolut; Rand links: -105px; Rand oben: 5px; Schriftgröße: 25px; Farbe: # 222; Text-Schatten: 0 1px 0 #fff; Polsterung: 10px; Breite: 100px; Höhe: 50px; Grenze: keine; Hintergrund: # f0f0f0; Hintergrund: -moz-linearer Gradient (oben, # f0f0f0 0%, # c3d7ff 100%); Hintergrund: -webkit-gradient (linear, links oben, links unten, Farbstopp (0%, # f0f0f0), Farbstopp (100%, # c3d7ff)); Hintergrund: -webkit-linearer Gradient (oben, # f0f0f0 0%, # c3d7ff 100%); Hintergrund: -o-linearer Gradient (oben, # f0f0f0 0%, # c3d7ff 100%); Hintergrund: -ms-linearer Gradient (oben, # f0f0f0 0%, # c3d7ff 100%); Hintergrund: linearer Gradient (oben, # f0f0f0 0%, # c3d7ff 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f0f0f0", endColorstr = "# c3d7ff", GradientType = 0); -webkit-box-shadow: 0 0 5px rgba (0, 0, 0, 1), Einfügung 0 1px 0 rgba (255, 255, 255, 0,3); -moz-box-shadow: 0 0 5px rgba (0, 0, 0, 1), Einfügung 0 1px 0 rgba (255, 255, 255, 0,3); -o-box-shadow: 0 0 5px rgba (0, 0, 0, 1), Einfügung 0 1px 0 rgba (255, 255, 255, 0,3); Box-Schatten: 0 0 5px rgba (0, 0, 0, 1), eingesetzter 0 1px 0 rgba (255, 255, 255, 0,3); -webkit-border-radius: 3px; -moz-border-radius: 3px; Grenzradius: 3px; Cursor: Zeiger;  input [type = submit]: hover -webkit-box-shadow: 0 0 10px rgba (0, 0, 0, 0,9); -moz-box-shadow: 0 0 10px rgba (0, 0, 0, 0,9); -o-box-shadow: 0 0 10px rgba (0, 0, 0, 0,9); Box-Schatten: 0 0 10px rgba (0, 0, 0, 0,9); Breite: 125px; Rand links: -130px;  Eingabe [Typ = Senden]: Aktiv Hintergrund: # c3d7ff; Hintergrund: -moz-linearer Gradient (oben, # c3d7ff 0%, # f0f0f0 100%); Hintergrund: -webkit-gradient (linear, links oben, links unten, Farbstopp (0%, # c3d7ff), Farbstopp (100%, # f0f0f0)); Hintergrund: -webkit-linearer Gradient (oben, # c3d7ff 0%, # f0f0f0 100%); Hintergrund: -o-linearer Gradient (oben, # c3d7ff 0%, # f0f0f0 100%); Hintergrund: -ms-linearer Gradient (oben, # c3d7ff 0%, # f0f0f0 100%); Hintergrund: linearer Gradient (oben, # c3d7ff 0%, # f0f0f0 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# c3d7ff", endColorstr = "# f0f0f0", GradientType = 0);

Dann fügen wir die Übergangsregeln hinzu:

 p a color: #fff; Rand unten: 2px fest # 2da1ec; -Webkit-Übergang: alle .4s Leichtigkeit; -Moz-Übergang: alle .4s Leichtigkeit; -o-Übergang: alle .4s Leichtigkeit; Übergang: alle .4s Leichtigkeit;

und

 Eingabe Schriftfamilie: "Helvetica Neue", Helvetica, serifenlos; Schriftgröße: 25px; -Webkit-Übergang: alle .4s Leichtigkeit; -Moz-Übergang: alle .4s Leichtigkeit; -o-Übergang: alle .4s Leichtigkeit; Übergang: alle .4s Leichtigkeit;

Schritt 7: CSS-Animationen

Wir können auch ein paar nette CSS3-Animationen für einen zusätzlichen Effekt hinzufügen, wenn die Seite geladen wird. Es empfiehlt sich, CSS-Animationen als Ergänzung zu Ihrem Design zu verwenden. kein fester Bestandteil davon. Die Unterstützung für Animationen ist immer noch spärlich, und Sie sollten sich davor hüten, Ihr Design zu stark zu komplizieren.

Dan Eden's Animate.css ist eine wirklich nützliche CSS-Animationsbibliothek. Sie können es wie im Originaldokument am Anfang des Lernprogramms hinzugefügt oder in Ihr Stylesheet importieren, wenn Sie möchten:

 @import url (animate.css);

Es gibt eine Vielzahl schöner Animationen zur Auswahl, aber ich werde die hinzufügen bounceInDown Animation. Wir wenden es auf unser Element (in diesem Fall den Container) wie folgt an:

 #container position: fixed; Breite: 500px; Höhe: 300px; Spitze: 50%; links: 50%; Rand oben: -150px; Rand links: -250px; Text ausrichten: Mitte; -webkit-animation-name: bounceInDown; -webkit-animation-fill-mode: beide; -Webkit-Animationsdauer: 1,5s; -webkit-animation-Iterationsanzahl: 1; -webkit-animation-timing-Funktion: linear; -moz-animation-name: bounceInDown; -moz-animation-fill-mode: beide; -Moz-Animationsdauer: 1,5s; -moz-Animation-Iterationszahl: 1; -Moz-Animation-Timing-Funktion: linear; Animationsname: bounceInDown; Animations-Füllmodus: beide; Animationsdauer: 1,5s; Animations-Iterationszahl: 1; Animations-Timing-Funktion: linear;

Wenn Sie die Animation ändern möchten, ändern Sie einfach die -Animationsname auf den Namen der Animation, die Sie möchten.

Schritt 8: Weitere Schritte

Dies ist nicht unbedingt ein responsives Design, aber Sie möchten vielleicht ein paar Medienabfragen am unteren Rand Ihrer CSS hinzufügen, um kleinere Geräte zu unterstützen. Denken Sie daran, das Containerelement für kleinere Bildschirme schmaler zu gestalten und die Breite oder Position der Eingaben zu ändern.

Damit unser Anmeldeformular E-Mail-Adressen zu einer Liste hinzufügen kann, können Sie es mit einem E-Mail-Newsletter-Dienst wie MailChimp verbinden. Ich werde das nicht im Detail erklären, da dieser Artikel es perfekt demonstriert.

Wenn Sie dem Formular eine Bestätigung hinzufügen möchten, können Sie dieses Tutorial überprüfen.

Fazit

Das Erstellen einer schnellen Teaser-Seite wie dieser ist für die Werbung vor der Einführung einer Website oder eines Produkts unerlässlich. Es muss nicht komplex sein, wie diese reine CSS-Lösung zeigt.

Ich hoffe, Sie haben etwas aus diesem Tutorial gelernt, danke fürs Lesen!

Web-Design