Crea velocemente una pagina Teaser Swish con CSS3

In questo tutorial, imparerai come creare una pagina teaser usando solo CSS, nessuna immagine o persino un disegno di Photoshop. Molti siti Web e app in arrivo ottengono una grande pubblicità dalle pagine teaser, quindi questo è un concetto utile da aggiungere al tuo toolkit. Usalo per qualsiasi app o sito web che si sta preparando per il lancio.

Passaggio 1: il markup HTML

L'HTML per la pagina teaser è abbastanza semplice. Abbiamo solo un contenitore con il nostro testo introduttivo e input.

      L'app è in arrivo.            App.
  Questa fantastica applicazione cambierà la tua vita. Iscriviti per ricevere una notifica quando è disponibile o seguici su Twitter.

Step 2: Posizionamento e dimensionamento dei nostri elementi

Diamo una struttura alla nostra pagina. Iniziamo con le basi e posizioniamo il contenitore al centro della pagina. Useremo il posizionamento del 50%, quindi i margini negativi per riportare l'oggetto a metà della larghezza e dell'altezza.

 html, body width: 100%; altezza: 100%; font-family: "Helvetica Neue", Helvetica, sans-serif; colore: # 444; -webkit-font-smoothing: antialiased;  #container position: fixed; larghezza: 500 px; altezza: 300 px; superiore: 50%; a sinistra: 50%; margin-top: -150px; margin-left: -250px; allineamento del testo: centro;

Successivamente, posizioniamo il testo e gli input, utilizzando selettori di attributi per indirizzare l'email e inviare input separatamente.

 h1 font-size: 90px;  p larghezza: 80%; font-size: 23px; line-height: 1.3em; margine: 1.1em auto; allineamento del testo: centro;  #subscribe margin: 0 auto; allineamento del testo: centro;  input [tipo = email] larghezza: 90%; imbottitura: 15px; margine: 0 auto;  input [type = submit] position: absolute; margin-left: -105px; margin-top: 5px; imbottitura: 10px; larghezza: 100 px; altezza: 50 px;

Passaggio 3: stile del testo

Disegnare il testo per questa pagina è abbastanza semplice. Vogliamo che il nome sia in contrasto con lo sfondo, quindi lo renderemo bianco. Il testo è importante, ma vogliamo che i visitatori ricordino il nome del nostro prodotto, quindi non lo renderemo così pronunciato. Il link Twitter è sottolineato, a indicare che si tratta di un collegamento.

Innanzitutto, il testo principale:

 h1 font-size: 90px; font-weight: bold; colore: #fff; text-shadow: 0 1px 4px # 000; margin-top: 20px;  p larghezza: 80%; font-size: 23px; line-height: 1.3em; colore: #fff; margine: 1.1em auto; allineamento del testo: centro; text-shadow: 0 0 2px rgba (0, 0, 0, 0,9);

Quindi il link Twitter:

 p a color: #fff; border-bottom: 2px solid # 2da1ec;

Passaggio 4: Disegnare lo sfondo

Ora per la parte divertente: dare gli oggetti sulla nostra pagina che extra je ne sais quoi. Inizieremo creando uno sfondo gradiente gradevole. Se sei un utente Mac, puoi appoggiarti a GradientApp per fare il duro lavoro per te. In alternativa, vai su CSS3 Per favore! per avere un'idea della sintassi.

 html, body width: 100%; altezza: 100%; font-family: "Helvetica Neue", Helvetica, sans-serif; colore: # 444; -webkit-font-smoothing: antialiased; sfondo: # 000222; sfondo: -moz-linear-gradient (in alto, # 000222 0%, # 4b637c 100%); background: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, color-stop (0%, # 000222), color-stop (100%, # 4b637c)); background: -webkit-linear-gradient (in alto, # 000222 0%, # 4b637c 100%); sfondo: -o-linear-gradient (in alto, # 000222 0%, # 4b637c 100%); sfondo: -ms-linear-gradient (in alto, # 000222 0%, # 4b637c 100%); sfondo: gradiente lineare (in alto, # 000222 0%, # 4b637c 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 000222", endColorstr = "# 4b637c", GradientType = 0);

Passaggio 5: modellazione del modulo di iscrizione

Il modulo di iscrizione è al centro della nostra pagina, dal momento che vogliamo che i visitatori scoprano quando viene rilasciato il nostro straordinario prodotto. Vogliamo che sia al centro della pagina, dopo il nome o il logo.

Iniziamo disegnando il segnaposto (stili specifici di Mozilla e Webkit) e impostando una dimensione del carattere:

 :: - 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, sans-serif; font-size: 25px;

Ora diamo il campo e il pulsante un po 'di colore e profondità:

 input [type = email] outline: none; larghezza: 90%; imbottitura: 15px; margine: 0 auto; colore: #fff; confine: nessuno; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background: rgba (0, 0, 0, 0,3); -webkit-box-shadow: inset 0 0 5px rgba (0, 0, 0, 0,9); -moz-box-shadow: inset 0 0 5px rgba (0, 0, 0, 0,9); -o-box-shadow: inset 0 0 5px rgba (0, 0, 0, 0,9); box-shadow: inset 0 0 5px rgba (0, 0, 0, 0,9);  input [type = submit] position: absolute; margin-left: -105px; margin-top: 5px; font-size: 25px; colore: # 222; text-shadow: 0 1px 0 #fff; imbottitura: 10px; larghezza: 100 px; altezza: 50 px; confine: nessuno; sfondo: # f0f0f0; background: -moz-linear-gradient (in alto, # f0f0f0 0%, # c3d7ff 100%); background: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, color-stop (0%, # f0f0f0), color-stop (100%, # c3d7ff)); background: -webkit-linear-gradient (in alto, # f0f0f0 0%, # c3d7ff 100%); background: -o-linear-gradient (in alto, # f0f0f0 0%, # c3d7ff 100%); background: -ms-linear-gradient (in alto, # f0f0f0 0%, # c3d7ff 100%); sfondo: gradiente lineare (in alto, # 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), inset 0 1px 0 rgba (255, 255, 255, 0,3); -moz-box-shadow: 0 0 5px rgba (0, 0, 0, 1), inset 0 1px 0 rgba (255, 255, 255, 0,3); -o-box-shadow: 0 0 5px rgba (0, 0, 0, 1), inset 0 1px 0 rgba (255, 255, 255, 0,3); box-shadow: 0 0 5px rgba (0, 0, 0, 1), inset 0 1px 0 rgba (255, 255, 255, 0,3); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; cursore: puntatore;

Passaggio 6: aggiunta di transizioni CSS

Aggiungiamo alcune belle transizioni CSS per aiutare a catturare l'attenzione dei visitatori.

Innanzitutto, aggiungeremo hover e stati attivi al link Twitter e input:

 p a color: #fff; border-bottom: 2px solid # 2da1ec;  p a: hover color: # 2da1ec; border-bottom: 2px solid #fff;

 input [type = email] outline: none; larghezza: 90%; imbottitura: 15px; margine: 0 auto; colore: #fff; confine: nessuno; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background: rgba (0, 0, 0, 0,3); -webkit-box-shadow: inset 0 0 5px rgba (0, 0, 0, 0,9); -moz-box-shadow: inset 0 0 5px rgba (0, 0, 0, 0,9); -o-box-shadow: inset 0 0 5px rgba (0, 0, 0, 0,9); box-shadow: inset 0 0 5px rgba (0, 0, 0, 0,9);  input [tipo = email]: hover background: rgba (0, 0, 0, 0.5);  input [tipo = email]: focus -webkit-box-shadow: inset 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0,2); -moz-box-shadow: inset 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0,2); -o-box-shadow: inset 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0,2); box-shadow: inset 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0,2); background: rgba (0, 0, 0, 0,6);  input [type = submit] position: absolute; margin-left: -105px; margin-top: 5px; font-size: 25px; colore: # 222; text-shadow: 0 1px 0 #fff; imbottitura: 10px; larghezza: 100 px; altezza: 50 px; confine: nessuno; sfondo: # f0f0f0; background: -moz-linear-gradient (in alto, # f0f0f0 0%, # c3d7ff 100%); background: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, color-stop (0%, # f0f0f0), color-stop (100%, # c3d7ff)); background: -webkit-linear-gradient (in alto, # f0f0f0 0%, # c3d7ff 100%); background: -o-linear-gradient (in alto, # f0f0f0 0%, # c3d7ff 100%); background: -ms-linear-gradient (in alto, # f0f0f0 0%, # c3d7ff 100%); sfondo: gradiente lineare (in alto, # 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), inset 0 1px 0 rgba (255, 255, 255, 0,3); -moz-box-shadow: 0 0 5px rgba (0, 0, 0, 1), inset 0 1px 0 rgba (255, 255, 255, 0,3); -o-box-shadow: 0 0 5px rgba (0, 0, 0, 1), inset 0 1px 0 rgba (255, 255, 255, 0,3); box-shadow: 0 0 5px rgba (0, 0, 0, 1), inset 0 1px 0 rgba (255, 255, 255, 0,3); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; cursore: puntatore;  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-shadow: 0 0 10px rgba (0, 0, 0, 0,9); larghezza: 125 px; margin-left: -130px;  input [type = submit]: active background: # c3d7ff; background: -moz-linear-gradient (in alto, # c3d7ff 0%, # f0f0f0 100%); background: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, color-stop (0%, # c3d7ff), color-stop (100%, # f0f0f0)); background: -webkit-linear-gradient (in alto, # c3d7ff 0%, # f0f0f0 100%); background: -o-linear-gradient (in alto, # c3d7ff 0%, # f0f0f0 100%); background: -ms-linear-gradient (in alto, # c3d7ff 0%, # f0f0f0 100%); sfondo: gradiente lineare (in alto, # c3d7ff 0%, # f0f0f0 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# c3d7ff", endColorstr = "# f0f0f0", GradientType = 0);

Quindi aggiungiamo le regole di transizione:

 p a color: #fff; border-bottom: 2px solid # 2da1ec; -webkit-transition: all .4s facilità; -moz-transition: all .4s facilità; -o-transizione: tutti i .4s facilità; transizione: tutti i .4s facilità;

 input font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 25px; -webkit-transition: all .4s facilità; -moz-transition: all .4s facilità; -o-transizione: tutti i .4s facilità; transizione: tutti i .4s facilità;

Passaggio 7: animazioni CSS

Possiamo anche aggiungere alcune belle animazioni CSS3 per un effetto aggiunto al caricamento della pagina. È consigliabile utilizzare le animazioni CSS come complimento per il tuo design; non è parte integrante di esso. Il supporto per le animazioni è ancora scarso e dovresti essere cauto nel complicare eccessivamente il tuo design per il gusto di farlo.

Detto questo, Animate.css di Dan Eden è una libreria di animazioni CSS davvero utile. Puoi aggiungerlo come mostrato nel documento originale all'inizio del tutorial o importarlo nel tuo foglio di stile, se preferisci:

 @import url (animate.css);

Ci sono una varietà di bellissime animazioni tra cui scegliere, ma ho intenzione di aggiungere il bounceInDown animazione. Lo applichiamo al nostro elemento (in questo caso il contenitore) in questo modo:

 #container position: fixed; larghezza: 500 px; altezza: 300 px; superiore: 50%; a sinistra: 50%; margin-top: -150px; margin-left: -250px; allineamento del testo: centro; -webkit-animation-name: bounceInDown; -webkit-animation-fill-mode: entrambi; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: lineare; -moz-animation-name: bounceInDown; -moz-animation-fill-mode: entrambi; -moz-animation-duration: 1.5s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: lineare; nome-animazione: bounceInDown; animation-fill-mode: entrambi; durata dell'animazione: 1,5 s; animazione-iterazione: 1; animazione-temporizzazione-funzione: lineare;

Se si desidera modificare l'animazione, è sufficiente modificare il -Animazione-nome al nome dell'animazione che desideri.

Step 8: Prendendo le cose ulteriormente

Questo non è un design reattivo, lontano da esso, ma potresti voler aggiungere un paio di media query al fondo del tuo css per far fronte a dispositivi più piccoli. Pensa di rendere l'elemento del contenitore più stretto per schermi più piccoli e di modificare la larghezza o il posizionamento degli input.

Per consentire al nostro modulo di registrazione di aggiungere indirizzi e-mail a un elenco, potremmo farlo collegandolo a un servizio di newsletter, come MailChimp. Non ho intenzione di spiegarlo in dettaglio, dal momento che questo articolo lo dimostra perfettamente.

Se desideri aggiungere la convalida al modulo, puoi consultare questo tutorial.

Conclusione

Costruire una pagina di teaser veloce come questa è vitale per la pubblicità prima di un sito Web o di un lancio di un prodotto. Non deve essere complesso, come mostra questa pura soluzione CSS.

Spero che tu abbia imparato qualcosa da questo tutorial, grazie per la lettura!

Web design