Construiește rapid o pagină de tip teaser Swish cu CSS3

În acest tutorial, veți învăța cum să construiți o pagină de teaser folosind doar CSS, nici imagini sau chiar un design Photoshop. Multe site-uri web și aplicații viitoare câștigă o publicitate extraordinară din paginile de teaser, deci acesta este un concept util pentru a adăuga setul de instrumente. Utilizați-l pentru orice aplicație sau site care se pregătește să fie lansat.

Pasul 1: Marcajul HTML

HTML pentru pagina de teaser este destul de simplă. Avem doar un container cu textul și intrările introductive.

      Aplicația vine în curând.            App.
  Această aplicație uimitoare vă va schimba viața. Abonați-vă pentru a fi anunțat când este disponibil sau urmați-ne pe Twitter.

Pasul 2: Poziționarea și dimensionarea elementelor noastre

Să oferim structurii noastre pagina. Începem cu elementele de bază și poziționăm containerul în centrul paginii. Vom utiliza poziționarea de 50%, apoi margini negative pentru a aduce obiectul înapoi la jumătate din lățimea și înălțimea acestuia.

 html, corp lățime: 100%; înălțime: 100%; font-family: "Helvetica Neue", Helvetica, sans-serif; culoare: # 444; -webkit-font-smoothing: antialiased;  #container position: fixed; lățime: 500px; înălțime: 300px; top: 50%; stânga: 50%; margin-top: -150px; margin-stânga: -250px; text-align: centru;

Apoi, poziționăm textul și intrările, utilizând selectorul de atribute pentru a direcționa e-mailul și a trimite separat intrările.

 h1 font-size: 90px;  p lățime: 80%; font-size: 23px; linia-înălțime: 1.3; marja: 1.1em auto; text-align: centru;  #subscribe marja: 0 auto; text-align: centru;  intrare [tip = email] lățime: 90%; padding: 15px; marja: 0 auto;  intrare [type = submit] position: absolute; margin-stânga: -105px; margin-top: 5px; padding: 10px; lățime: 100px; înălțime: 50px;

Pasul 3: Stylingul textului

Styling text pentru această pagină este destul de simplu. Vrem ca numele să contrasteze cu fundalul, așa că îl vom face alb. Textul este important, dar dorim ca vizitatorii să-și amintească numele produsului nostru, așa că nu o vom face așa de pronunțată. Legătura Twitter este subliniată, indicând faptul că este o legătură.

În primul rând, textul principal:

 h1 font-size: 90px; font-weight: bold; culoare: #fff; text-shadow: 0 1px 4px # 000; margin-top: 20px;  p lățime: 80%; font-size: 23px; linia-înălțime: 1.3; culoare: #fff; marja: 1.1em auto; text-align: centru; text-shadow: 0 0 2px rgba (0, 0, 0, 0.9);

Apoi link-ul Twitter:

 p a culoare: #fff; frontală de fund: 2px solid # 2da1ec;

Pasul 4: Stylingul fundalului

Acum, pentru partea distractivă: dați obiectele de pe pagina noastră extra extra ne sais quoi. Vom începe prin a crea un fundal de gradient frumos. Dacă sunteți utilizator Mac, puteți să vă sprijiniți pe GradientApp pentru a vă face munca grea. Alternativ, mergeți peste CSS3 Vă rugăm! pentru a obține o idee despre sintaxa.

 html, corp lățime: 100%; înălțime: 100%; font-family: "Helvetica Neue", Helvetica, sans-serif; culoare: # 444; -webkit-font-smoothing: antialiased; fundal: # 000222; fundal: -moz-linear-gradient (top, # 000222 0%, # 4b637c 100%); fundal: -webkit-gradient (liniuță, stânga sus, stânga jos, oprire color (0%, # 000222), stop color (100%, # 4b637c)); fundal: -webkit-gradient linear (top, # 000222 0%, # 4b637c 100%); fundal: -o-gradient linear (top, # 000222 0%, # 4b637c 100%); fundal: -ms-linear-gradient (top, # 000222 0%, # 4b637c 100%); fundal: gradient liniar (top, # 000222 0%, # 4b637c 100%); filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 000222", endColorstr = "# 4b637c", GradientType = 0);

Pasul 5: Modelarea formularului de abonare

Formularul de abonare este punctul central al paginii noastre, deoarece dorim ca vizitatorii să afle când produsul nostru uimitor este lansat. Vrem ca acesta să fie centrul paginii, după numele sau sigla.

Începem prin stylingul substituentului (stiluri specifice Mozilla și Webkit) și setarea unui font-size:

 :: - webkit-input-placeholder culoare: rgba (255, 255, 255, 0,4);  :: - moz-input-placeholder culoare: rgba (255, 255, 255, 0,4);  intrare font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 25px;

Acum să dăm câmpului și butonul niște culoare și adâncime:

 introduceți [type = email] outline: none; lățime: 90%; padding: 15px; marja: 0 auto; culoare: #fff; frontieră: nici una; -webkit-border-radius: 6px; -moz-border-radius: 6px; raza de graniță: 6px; fundal: rgba (0, 0, 0, 0,3); -webkit-box-shadow: inserție 0 0 5px rgba (0, 0, 0, 0.9); -moz-box-shadow: inserție 0 0 5px rgba (0, 0, 0, 0.9); -o-box-shadow: inserție 0 0 5px rgba (0, 0, 0, 0.9); box-shadow: inserție 0 0 5px rgba (0, 0, 0, 0.9);  intrare [type = submit] position: absolute; margin-stânga: -105px; margin-top: 5px; font-size: 25px; culoare: # 222; text-shadow: 0 1px 0 #fff; padding: 10px; lățime: 100px; înălțime: 50px; frontieră: nici una; fundal: # f0f0f0; fundal: -moz-linear-gradient (top, # f0f0f0 0%, # c3d7ff 100%); fundal: -webkit-gradient (liniar, stânga sus, jos stânga, stop color (0%, # f0f0f0), oprire color (100%, # c3d7ff)); fundal: -webkit-gradient linear (top, # f0f0f0 0%, # c3d7ff 100%); fundal: -o-gradient linear (top, # f0f0f0 0%, # c3d7ff 100%); fundal: -ms-gradient linear (top, # f0f0f0 0%, # c3d7ff 100%); fundal: gradient liniar (top, # f0f0f0 0%, # c3d7ff 100%); filtru: 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; raza de graniță: 3 pixeli; cursor: pointer;

Pasul 6: Adăugarea tranzițiilor CSS

Să adăugăm câteva frumoase tranziții CSS pentru a atrage atenția vizitatorilor.

Mai întâi, vom adăuga stări hover și active la link-ul Twitter și intrări:

 p a culoare: #fff; frontală de fund: 2px solid # 2da1ec;  p a: hover culoare: # 2da1ec; border-bottom: 2px solid #fff;

 introduceți [type = email] outline: none; lățime: 90%; padding: 15px; marja: 0 auto; culoare: #fff; frontieră: nici una; -webkit-border-radius: 6px; -moz-border-radius: 6px; raza de graniță: 6px; fundal: rgba (0, 0, 0, 0,3); -webkit-box-shadow: inserție 0 0 5px rgba (0, 0, 0, 0.9); -moz-box-shadow: inserție 0 0 5px rgba (0, 0, 0, 0.9); -o-box-shadow: inserție 0 0 5px rgba (0, 0, 0, 0.9); box-shadow: inserție 0 0 5px rgba (0, 0, 0, 0.9);  introduceți [type = email]: mutați background: rgba (0, 0, 0, 0.5);  intrare [tip = email]: focus -webkit-box-shadow: inset 0 0 8px rgba (0, 0, 0); -moz-box-shadow: inserție 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0,2); -o-box-shadow: inserție 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0,2); box-shadow: inserție 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0,2); fundal: rgba (0, 0, 0, 0.6);  intrare [type = submit] position: absolute; margin-stânga: -105px; margin-top: 5px; font-size: 25px; culoare: # 222; text-shadow: 0 1px 0 #fff; padding: 10px; lățime: 100px; înălțime: 50px; frontieră: nici una; fundal: # f0f0f0; fundal: -moz-linear-gradient (top, # f0f0f0 0%, # c3d7ff 100%); fundal: -webkit-gradient (liniar, stânga sus, jos stânga, stop color (0%, # f0f0f0), oprire color (100%, # c3d7ff)); fundal: -webkit-gradient linear (top, # f0f0f0 0%, # c3d7ff 100%); fundal: -o-gradient linear (top, # f0f0f0 0%, # c3d7ff 100%); fundal: -ms-gradient linear (top, # f0f0f0 0%, # c3d7ff 100%); fundal: gradient liniar (top, # f0f0f0 0%, # c3d7ff 100%); filtru: 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; raza de graniță: 3 pixeli; cursor: pointer;  introducere [tip = trimite]: 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); lățime: 125px; margin-stânga: -130px;  intrare [tip = trimite]: activ background: # c3d7ff; fundal: -moz-linear-gradient (top, # c3d7ff 0%, # f0f0f0 100%); fundal: -webkit-gradient (liniar, stânga sus, fund stânga, stop color (0%, # c3d7ff), oprire color (100%, # f0f0f0)); fundal: -webkit-gradient linear (top, # c3d7ff 0%, # f0f0f0 100%); fundal: -o-gradient linear (top, # c3d7ff 0%, # f0f0f0 100%); fundal: -ms-linear-gradient (top, # c3d7ff 0%, # f0f0f0 100%); fundal: gradient liniar (top, # c3d7ff 0%, # f0f0f0 100%); filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# c3d7ff", endColorstr = "# f0f0f0", GradientType = 0);

Apoi adăugăm regulile de tranziție:

 p a culoare: #fff; frontală de fund: 2px solid # 2da1ec; -webkit-tranziție: toate .4s usurinta; -moz-tranziție: ușor. -o-tranziție: toate ușurința .4s; tranziție: ușor.

și

 intrări font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 25px; -webkit-tranziție: toate .4s usurinta; -moz-tranziție: ușor. -o-tranziție: toate ușurința .4s; tranziție: ușor.

Pasul 7: Animații CSS

De asemenea, putem adăuga câteva animații CSS3 frumoase pentru un efect suplimentar când pagina se încarcă. Este recomandabil să folosiți animațiile CSS ca un compliment pentru designul dvs.; nu o parte integrantă a acesteia. Suportul pentru animații este încă rar și ar trebui să fiți precaut să vă complicați designul de dragul acestuia.

Acestea fiind spuse, Animate.css-ul lui Dan Eden este o bibliotecă de animație foarte utilă CSS. Puteți să o adăugați după cum se arată în documentul original la începutul tutorialului sau să îl importați în foaia de stil, dacă preferați:

 @import url (animate.css);

Există o varietate de animații frumoase de ales, dar voi adăuga bounceInDown animaţie. Aplicăm elementul nostru (în acest caz containerul) astfel:

 #container position: fixed; lățime: 500px; înălțime: 300px; top: 50%; stânga: 50%; margin-top: -150px; margin-stânga: -250px; text-align: centru; -webkit-animație-nume: bounceInDown; -webkit-animation-fill-mode: ambele; -webkit-animație-durata: 1.5s; -webkit-animație-iterație-count: 1; -webkit-animație-funcția de sincronizare: liniară; -moz-animație-nume: bounceInDown; -moz-animație-umplere-mod: ambele; -moz-animație-durată: 1,5 s; -moz-animație-iterație-număr: 1; -moz-animație-temporizare-funcție: liniară; animație-nume: bounceInDown; animație-umplere-mod: ambele; durata animației: 1,5 s; animație-iterație-număr: 1; animație-temporizare-funcție: liniară;

Dacă doriți să modificați animația, schimbați doar -animație nume- la numele animației dorite.

Pasul 8: Luați mai mult

Acesta nu este un design receptiv, departe de el, dar ați putea dori să adăugați câteva întrebări media în partea de jos a css dvs. pentru a satisface dispozitive mai mici. Gândiți-vă la a face elementul containerului mai îngust pentru ecranele mai mici și pentru a modifica lățimea sau poziționarea intrărilor.

Pentru a permite formularului nostru de înscriere să adauge adrese de e-mail la o listă, am putea face acest lucru prin conectarea acestuia la un serviciu de newsletter, cum ar fi MailChimp. Nu o voi explica în detaliu, deoarece acest articol o demonstrează perfect.

Dacă doriți să adăugați validarea în formular, puteți consulta acest tutorial.

Concluzie

Construirea unei pagini de teaser rapid ca aceasta este vitală pentru publicitate înainte de lansarea unui site web sau a unui produs. Nu este nevoie să fie complexă, așa cum arată această soluție CSS pură.

Sper că ați învățat ceva din acest tutorial, vă mulțumim pentru lectură!

Web design