I denna handledning lär du dig att bygga en teaser sida med bara CSS, inga bilder eller till och med en Photoshop-design. Många webbplatser och kommande appar får stor publicitet från teaser sidor, så det här är ett användbart koncept att lägga till i din verktygslåda. Använd det för alla appar eller webbplatser som är redo att starta.

---

Steg 1: HTML Markup

HTML för teaser-sidan är ganska enkel. Vi har bara en behållare med vår inledande text och ingångar.

                 
 
App.
 
 Denna fantastiska applikation kommer att förändra ditt liv. Prenumerera på att bli underrättad när den är tillgänglig, eller följ oss på Twitter. 
 
   
 
   

---

Steg 2: Placering och dimensionering av våra delar

Låt oss ge vår sida lite struktur. Vi börjar med grunderna och placerar behållaren mitt på sidan. Vi använder positionering av 50%, sedan negativa marginaler för att få objektet tillbaka hälften av dess bredd och höjd.

 html, kropp bredd: 100%; höjd: 100%; font-family: "Helvetica Neue", Helvetica, sans-serif; färg: # 444; -webkit-typsnitt-utjämning: antialiased;  #container position: fixed; bredd: 500px; höjd: 300px; topp: 50%; vänster: 50%; marginal-topp: -150px; marginal-vänster: -250px; text-align: center; 

Därefter placerar vi texten och ingångarna med hjälp av attributväljare för att rikta in e-postmeddelandet och skicka in inmatningar separat.

 h1 font-size: 90px;  p bredd: 80%; typsnittstorlek: 23px; linjehöjd: 1,3em; marginal: 1.1em auto; text-align: center;  #subscribe margin: 0 auto; text-align: center;  inmatning [typ = email] bredd: 90%; vaddering: 15px; marginal: 0 auto;  inmatning [typ = lämna in] position: absolute; marginal-vänster: -105px; marginal-topp: 5px; vaddering: 10px; bredd: 100px; höjd: 50px; 

---

Steg 3: Styling Texten

Styling av texten för den här sidan är ganska enkel. Vi vill att namnet ska kontrast med bakgrunden, så vi gör det vit. Texten är viktig, men vi vill att besökare ska komma ihåg namnet på vår produkt, så vi kommer inte göra det så uttalat. Twitter-länken är understruken, vilket indikerar att det är en länk.

Först huvudtexten:

 h1 font-size: 90px; font-weight: bold; färg: #fff; textskugga: 0 1px 4px # 000; marginal-topp: 20px;  p bredd: 80%; typsnittstorlek: 23px; linjehöjd: 1,3em; färg: #fff; marginal: 1.1em auto; text-align: center; textskugga: 0 0 2px rgba (0, 0, 0, 0,9); 

Då Twitter länken:

 p a färg: #fff; gränsbotten: 2px solid # 2da1ec; 

---

Steg 4: Styling the Background

Nu för den roliga delen: Ge objekten på vår sida det extra du ne sais quoi. Vi börjar med att skapa en fin gradientbakgrund. Om du är en Mac-användare kan du luta dig på GradientApp för att göra det hårda arbetet för dig. Alternativt, gå vidare till CSS3, tack! för att få en uppfattning om syntaxen.

 html, kropp bredd: 100%; höjd: 100%; font-family: "Helvetica Neue", Helvetica, sans-serif; färg: # 444; -webkit-typsnitt-utjämning: antialiased; bakgrund: # 000222; bakgrund: -moz-linjär gradient (topp, # 000222 0%, # 4b637c 100%); Bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0%, # 000222), färgstopp (100%, # 4b637c)); bakgrund: -webkit-linjär-gradient (topp, # 000222 0%, # 4b637c 100%); bakgrund: -o-linjär gradient (topp, # 000222 0%, # 4b637c 100%); bakgrund: -ms-linjär gradient (topp, # 000222 0%, # 4b637c 100%); bakgrund: linjär gradient (topp, # 000222 0%, # 4b637c 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 000222", endColorstr = "# 4b637c", GradientType = 0); 

---

Steg 5: Styling Prenumerationsformuläret

Prenumerationsformuläret är fokus på vår sida, eftersom vi vill att besökarna ska ta reda på när vår fantastiska produkt släpps. Vi vill att det ska vara fokus på sidan, efter namnet eller logotypen.

Vi börjar med att ställa in platshållaren (Mozilla och Webkit specifika stilar) och ställa in en teckensnittstorlek:

 :: - webkit-input-placeholder färg: rgba (255, 255, 255, 0.4);  :: - moz-input-placeholder färg: rgba (255, 255, 255, 0.4);  inmatning font-family: "Helvetica Neue", Helvetica, sans-serif; typsnittstorlek: 25px; 

Låt oss nu ge fältet och knappen lite färg och djup:

 input [typ = email] outline: none; bredd: 90%; vaddering: 15px; marginal: 0 auto; färg: #fff; gränsen: ingen; -webkit-gräns-radie: 6px; -moz-gränsen-radien: 6px; gränsstråle: 6px; bakgrund: rgba (0, 0, 0, 0,3); -webkit-box-skugga: inset 0 0 5px rgba (0, 0, 0, 0,9); -moz-box-skugga: inset 0 0 5px rgba (0, 0, 0, 0,9); -å-box-skugga: inmatning 0 0 5px rgba (0, 0, 0, 0,9); boxskugga: inset 0 0 5px rgba (0, 0, 0, 0,9);  inmatning [typ = lämna in] position: absolute; marginal-vänster: -105px; marginal-topp: 5px; typsnittstorlek: 25px; färg: # 222; textskugga: 0 1px 0 #fff; vaddering: 10px; bredd: 100px; höjd: 50px; gränsen: ingen; bakgrund: # f0f0f0; bakgrund: -moz-linjär-gradient (topp, # f0f0f0 0%, # c3d7ff 100%); bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0%, # f0f0f0), färgstopp (100%, # c3d7ff)); bakgrund: -webkit-linjär-gradient (topp, # f0f0f0 0%, # c3d7ff 100%); bakgrund: -o-linjär-gradient (topp, # f0f0f0 0%, # c3d7ff 100%); bakgrund: -ms-linjär gradient (topp, # f0f0f0 0%, # c3d7ff 100%); bakgrund: linjär gradient (topp, # f0f0f0 0%, # c3d7ff 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f0f0f0", endColorstr = "# c3d7ff", GradientType = 0); -webkit-box-skugga: 0 0 5px rgba (0, 0, 0, 1), inset 0 1px 0 rgba (255, 255, 255, 0,3); -moz-box-skugga: 0 0 5px rgba (0, 0, 0, 1), inset 0 1px 0 rgba (255, 255, 255, 0,3); -o-box-skugga: 0 0 5px rgba (0, 0, 0, 1), inset 0 1px 0 rgba (255, 255, 255, 0,3); boxskugga: 0 0 5px rgba (0, 0, 0, 1), inset 0 1px 0 rgba (255, 255, 255, 0,3); -webkit-gränsen-radien: 3px; -moz-gränsen-radien: 3px; gränsstråle: 3px; markör: pekare; 

Steg 6: Lägga till CSS-övergångar

Låt oss lägga till några fina CSS-övergångar för att hjälpa till att fånga besökarnas uppmärksamhet.

Först lägger vi till svängare och aktiva stater till Twitter-länken och inmatningarna:

 p a färg: #fff; gränsbotten: 2px solid # 2da1ec;  p a: svävar färg: # 2da1ec; gränsbotten: 2px solid #fff; 

 input [typ = email] outline: none; bredd: 90%; vaddering: 15px; marginal: 0 auto; färg: #fff; gränsen: ingen; -webkit-gräns-radie: 6px; -moz-gränsen-radien: 6px; gränsstråle: 6px; bakgrund: rgba (0, 0, 0, 0,3); -webkit-box-skugga: inset 0 0 5px rgba (0, 0, 0, 0,9); -moz-box-skugga: inset 0 0 5px rgba (0, 0, 0, 0,9); -å-box-skugga: inmatning 0 0 5px rgba (0, 0, 0, 0,9); boxskugga: inset 0 0 5px rgba (0, 0, 0, 0,9);  inmatning [typ = email]: sväva bakgrund: rgba (0, 0, 0, 0.5);  inmatning [typ = email]: fokus -webkit-box-skugga: inset 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0.2); -moz-box-skugga: inset 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0,2); -o-box-skugga: inset 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0,2); boxskugga: inset 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0,2); bakgrund: rgba (0, 0, 0, 0,6);  inmatning [typ = lämna in] position: absolute; marginal-vänster: -105px; marginal-topp: 5px; typsnittstorlek: 25px; färg: # 222; textskugga: 0 1px 0 #fff; vaddering: 10px; bredd: 100px; höjd: 50px; gränsen: ingen; bakgrund: # f0f0f0; bakgrund: -moz-linjär-gradient (topp, # f0f0f0 0%, # c3d7ff 100%); bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0%, # f0f0f0), färgstopp (100%, # c3d7ff)); bakgrund: -webkit-linjär-gradient (topp, # f0f0f0 0%, # c3d7ff 100%); bakgrund: -o-linjär-gradient (topp, # f0f0f0 0%, # c3d7ff 100%); bakgrund: -ms-linjär gradient (topp, # f0f0f0 0%, # c3d7ff 100%); bakgrund: linjär gradient (topp, # f0f0f0 0%, # c3d7ff 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f0f0f0", endColorstr = "# c3d7ff", GradientType = 0); -webkit-box-skugga: 0 0 5px rgba (0, 0, 0, 1), inset 0 1px 0 rgba (255, 255, 255, 0,3); -moz-box-skugga: 0 0 5px rgba (0, 0, 0, 1), inset 0 1px 0 rgba (255, 255, 255, 0,3); -o-box-skugga: 0 0 5px rgba (0, 0, 0, 1), inset 0 1px 0 rgba (255, 255, 255, 0,3); boxskugga: 0 0 5px rgba (0, 0, 0, 1), inset 0 1px 0 rgba (255, 255, 255, 0,3); -webkit-gränsen-radien: 3px; -moz-gränsen-radien: 3px; gränsstråle: 3px; markör: pekare;  inmatning [typ = skicka]: svep -webkit-box-skugga: 0 0 10px rgba (0, 0, 0, 0.9); -moz-box-skugga: 0 0 10px rgba (0, 0, 0, 0,9); -å-box-skugga: 0 0 10px rgba (0, 0, 0, 0,9); boxskugga: 0 0 10px rgba (0, 0, 0, 0,9); bredd: 125px; marginal-vänster: -130px;  inmatning [typ = inlämning]: aktiv bakgrund: # c3d7ff; bakgrund: -moz-linjär gradient (topp, # c3d7ff 0%, # f0f0f0 100%); bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0%, # c3d7ff), färgstopp (100%, # f0f0f0)); bakgrund: -webkit-linjär-gradient (topp, # c3d7ff 0%, # f0f0f0 100%); bakgrund: -o-linjär gradient (topp, # c3d7ff 0%, # f0f0f0 100%); bakgrund: -ms-linjär gradient (topp, # c3d7ff 0%, # f0f0f0 100%); bakgrund: linjär gradient (topp, # c3d7ff 0%, # f0f0f0 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# c3d7ff", endColorstr = "# f0f0f0", GradientType = 0); 

Sedan lägger vi till övergångsreglerna:

 p a färg: #fff; gränsbotten: 2px solid # 2da1ec; -webkit-övergång: alla .4s enkelhet; -moz-övergång: alla .4s enkelhet; -o-övergång: alla .4s enkelhet; övergång: alla .4s enkelhet; 

och

 input font-family: "Helvetica Neue", Helvetica, sans-serif; typsnittstorlek: 25px; -webkit-övergång: alla .4s enkelhet; -moz-övergång: alla .4s enkelhet; -o-övergång: alla .4s enkelhet; övergång: alla .4s enkelhet; 

---

Steg 7: CSS-animationer

Vi kan också lägga till några fina CSS3-animeringar för en extra effekt när sidan laddas. Det är lämpligt att använda CSS-animationer som en komplimang till din design; inte en integrerad del av den. Stöd för animationer är fortfarande gles och du bör vara försiktig för att komplicera din design för att det ska skullas.

Med det sagt är Dan Edens Animate.css ett riktigt användbart CSS animationsbibliotek. Du kan lägga till det som visas i originalet i början av handledningen eller importera det till ditt stilark om du föredrar:

 @import url (animate.css);

Det finns en mängd olika vackra animationer att välja mellan, men jag ska lägga till bounceInDown animering. Vi tillämpar det på vårt element (i detta fall behållaren) som så:

 #container position: fixed; bredd: 500px; höjd: 300px; topp: 50%; vänster: 50%; marginal-topp: -150px; marginal-vänster: -250px; text-align: center; -webkit-animationsnamn: bounceInDown; -webkit-animation-fill-mode: båda; -webkit-animation-duration: 1.5s; -webkit-animering-iteration-count: 1; -webkit-animation-timing-funktion: linjär; -moz-animation-namn: bounceInDown; -moz-animation-fill-mode: båda; -moz-animation-duration: 1.5s; -moz-animation-iteration-count: 1; -moz-animation-timing-funktion: linjär; animationsnamn: bounceInDown; animations-fill-mode: båda; animeringstid: 1,5s; animations-iteration-count: 1; animation-timing-funktion: linjär; 

Om du vill ändra animationen ändrar du bara -animering-namn till namnet på den animering du vill ha.

---

Steg 8: Att ta saker vidare

Det här är inte en responsiv design, långt ifrån det, men du kanske vill lägga till ett par mediefrågor längst ner på din css för att tillgodose mindre enheter. Tänk på att göra behållarelementet smalare för mindre skärmar och ändra bredden eller positioneringen av ingångarna.

---

För att tillåta att vår anmälningsblankett lägger till e-postadresser i en lista kan vi göra med att leda upp det till en e-posttjänst, till exempel MailChimp. Jag kommer inte att förklara det här i detalj, eftersom den här artikeln visar det perfekt.

Om du vill lägga till validering i formuläret kan du kolla in den här handledningen.

---

Slutsats

Att bygga en snabb teaser sida som denna är avgörande för publicitet innan en webbplats eller produktlansering. Det behöver inte vara komplext, som den här rena CSS-lösningen visar.

Jag hoppas att du lärde dig något av denna handledning, tack för att du läste!