Raskt bygge en Swish Teaser Page med CSS3

I denne opplæringen lærer du hvordan du bygger en teaser side ved hjelp av bare CSS, ingen bilder eller til og med et Photoshop-design. Mange nettsteder og kommende apper får stor publisitet fra teaser-sider, så dette er et nyttig konsept for å legge til verktøykassen din. Bruk den til en app eller et nettsted som blir klar til å starte.

Trinn 1: HTML-merkingen

HTML-siden for teaser-siden er ganske enkel. Vi har bare en beholder med vår innledende tekst og innganger.

      Appen kommer snart.            app.
  Denne fantastiske applikasjonen vil forandre livet ditt. Abonner på å bli varslet når den er tilgjengelig, eller følg oss på Twitter.

Trinn 2: Plassering og liming av våre elementer

La oss gi vår side litt struktur. Vi starter med det grunnleggende, og plasserer beholderen midt på siden. Vi bruker posisjonering på 50%, deretter negative marginer for å bringe gjenstanden tilbake halvparten av bredden og høyden.

 html, kropp bredde: 100%; høyde: 100%; font-familie: "Helvetica Neue", Helvetica, sans-serif; farge: # 444; -webkit-font-utjevning: antialiased;  #container posisjon: fast; bredde: 500px; høyde: 300px; topp: 50%; venstre: 50%; margin-topp: -150px; margin-venstre: -250px; tekst-align: center;

Deretter plasserer vi teksten og inngangene, ved hjelp av attributtvelgerne for å målrette e-posten og sende inn innsendingene separat.

 h1 skriftstørrelse: 90px;  p bredde: 80%; skriftstørrelse: 23px; linjehøyde: 1,3em; margin: 1.1em auto; tekst-align: center;  #subscribe margin: 0 auto; tekst-align: center;  input [type = email] bredde: 90%; polstring: 15px; margin: 0 auto;  input [type = send] posisjon: absolutt; margin-left: -105px; margin-topp: 5px; polstring: 10px; bredde: 100px; høyde: 50px;

Trinn 3: Styling the Text

Styling av teksten for denne siden er ganske enkel. Vi vil at navnet skal kontrast med bakgrunnen, så vi gjør det hvit. Teksten er viktig, men vi vil at besøkende skal huske navnet på vårt produkt, så vi vil ikke gjøre det så uttalt. Twitter-lenken er understreket, noe som indikerer at det er en lenke.

Først hovedteksten:

 h1 skriftstørrelse: 90px; font-weight: bold; farge: #fff; tekstskygge: 0 1px 4px # 000; margin-topp: 20px;  p bredde: 80%; skriftstørrelse: 23px; linjehøyde: 1,3em; farge: #fff; margin: 1.1em auto; tekst-align: center; tekstskygge: 0 0 2px rgba (0, 0, 0, 0,9);

Så Twitter-linken:

 p a farge: #fff; grensebunn: 2px solid # 2da1ec;

Trinn 4: Styling the Background

Nå for den morsomme delen: Gi objektene på vår side det ekstra du ne sais quoi. Vi starter med å lage en fin gradientbakgrunn. Hvis du er en Mac-bruker, kan du lene deg på GradientApp for å gjøre det harde arbeidet for deg. Alternativt, gå videre til CSS3, vær så snill! for å få en ide om syntaxen.

 html, kropp bredde: 100%; høyde: 100%; font-familie: "Helvetica Neue", Helvetica, sans-serif; farge: # 444; -webkit-font-utjevning: antialiased; bakgrunn: # 000222; bakgrunn: -moz-lineær gradient (topp, # 000222 0%, # 4b637c 100%); bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, # 000222), fargestopp (100%, # 4b637c)); bakgrunn: -webkit-lineær-gradient (topp, # 000222 0%, # 4b637c 100%); Bakgrunn: -O-lineær gradient (topp, # 000222 0%, # 4b637c 100%); bakgrunn: -ms-lineær gradient (topp, # 000222 0%, # 4b637c 100%); bakgrunn: lineær gradient (topp, # 000222 0%, # 4b637c 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 000222", endColorstr = "# 4b637c", GradientType = 0);

Trinn 5: Styling Abonner-skjemaet

Abonnementsskjemaet er fokus på siden vår siden vi vil at besøkende skal finne ut når vårt fantastiske produkt er utgitt. Vi ønsker at det skal være fokus på siden, etter navnet eller logoen.

Vi starter med å stylere plassholderen (Mozilla og Webkit-spesifikke stiler), og angi en skriftstørrelse:

 :: - webkit-input-placeholder color: rgba (255, 255, 255, 0.4);  :: - moz-input-placeholder farge: rgba (255, 255, 255, 0.4);  input font-family: "Helvetica Neue", Helvetica, sans-serif; skriftstørrelse: 25px;

La oss nå gi felt og knapp litt farge og dybde:

 input [type = email] disposisjon: none; bredde: 90%; polstring: 15px; margin: 0 auto; farge: #fff; grense: ingen; -webkit-grense-radius: 6px; -moz-grense-radius: 6px; border-radius: 6px; bakgrunn: rgba (0, 0, 0, 0.3); -webkit-boks-skygge: innsett 0 0 5px rgba (0, 0, 0, 0,9); -moz-boks-skygge: innsett 0 0 5px rgba (0, 0, 0, 0,9); -o-boks-skygge: innsett 0 0 5px rgba (0, 0, 0, 0,9); boks-skygge: innsett 0 0 5px rgba (0, 0, 0, 0,9);  input [type = send] posisjon: absolutt; margin-left: -105px; margin-topp: 5px; skriftstørrelse: 25px; farge: # 222; tekstskygge: 0 1px 0 #fff; polstring: 10px; bredde: 100px; høyde: 50px; grense: ingen; bakgrunn: # f0f0f0; bakgrunn: -moz-lineær-gradient (topp, # f0f0f0 0%, # c3d7ff 100%); bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, # f0f0f0), fargestopp (100%, # c3d7ff)); bakgrunn: -webkit-lineær-gradient (topp, # f0f0f0 0%, # c3d7ff 100%); bakgrunn: -o-lineær-gradient (topp, # f0f0f0 0%, # c3d7ff 100%); bakgrunn: -ms-lineær-gradient (topp, # f0f0f0 0%, # c3d7ff 100%); bakgrunn: lineær gradient (topp, # f0f0f0 0%, # c3d7ff 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f0f0f0", endColorstr = "# c3d7ff", GradientType = 0); -webkit-boks-skygge: 0 0 5px rgba (0, 0, 0, 1), innsett 0 1px 0 rgba (255, 255, 255, 0.3); -moz-boks-skygge: 0 0 5px rgba (0, 0, 0, 1), innstikk 0 1px 0 rgba (255, 255, 255, 0.3); -o-boks-skygge: 0 0 5px rgba (0, 0, 0, 1), innsett 0 1px 0 rgba (255, 255, 255, 0.3); boksskygge: 0 0 5px rgba (0, 0, 0, 1), innstikk 0 1px 0 rgba (255, 255, 255, 0.3); -webkit-grense-radius: 3px; -moz-grense-radius: 3px; border-radius: 3px; markør: pointer;

Trinn 6: Legge til CSS-overganger

La oss legge til noen fine CSS-overganger for å få tak i besøkendees oppmerksomhet.

Først legger vi til svinger og aktive stater til Twitter-koblingen og -inngangene:

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

 input [type = email] disposisjon: none; bredde: 90%; polstring: 15px; margin: 0 auto; farge: #fff; grense: ingen; -webkit-grense-radius: 6px; -moz-grense-radius: 6px; border-radius: 6px; bakgrunn: rgba (0, 0, 0, 0.3); -webkit-boks-skygge: innsett 0 0 5px rgba (0, 0, 0, 0,9); -moz-boks-skygge: innsett 0 0 5px rgba (0, 0, 0, 0,9); -o-boks-skygge: innsett 0 0 5px rgba (0, 0, 0, 0,9); boks-skygge: innsett 0 0 5px rgba (0, 0, 0, 0,9);  input [type = email]: svever bakgrunn: rgba (0, 0, 0, 0.5);  input [type = email]: fokus -webkit-boks-skygge: innsett 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0.2); -moz-boks-skygge: innsett 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0.2); -o-boks-skygge: innsett 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0.2); boks-skygge: innsett 0 0 8px rgba (0, 0, 0, 1), 0 0 0 5px rgba (0, 0, 0, 0.2); bakgrunn: rgba (0, 0, 0, 0,6);  input [type = send] posisjon: absolutt; margin-left: -105px; margin-topp: 5px; skriftstørrelse: 25px; farge: # 222; tekstskygge: 0 1px 0 #fff; polstring: 10px; bredde: 100px; høyde: 50px; grense: ingen; bakgrunn: # f0f0f0; bakgrunn: -moz-lineær-gradient (topp, # f0f0f0 0%, # c3d7ff 100%); bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, # f0f0f0), fargestopp (100%, # c3d7ff)); bakgrunn: -webkit-lineær-gradient (topp, # f0f0f0 0%, # c3d7ff 100%); bakgrunn: -o-lineær-gradient (topp, # f0f0f0 0%, # c3d7ff 100%); bakgrunn: -ms-lineær-gradient (topp, # f0f0f0 0%, # c3d7ff 100%); bakgrunn: lineær gradient (topp, # f0f0f0 0%, # c3d7ff 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f0f0f0", endColorstr = "# c3d7ff", GradientType = 0); -webkit-boks-skygge: 0 0 5px rgba (0, 0, 0, 1), innsett 0 1px 0 rgba (255, 255, 255, 0.3); -moz-boks-skygge: 0 0 5px rgba (0, 0, 0, 1), innstikk 0 1px 0 rgba (255, 255, 255, 0.3); -o-boks-skygge: 0 0 5px rgba (0, 0, 0, 1), innsett 0 1px 0 rgba (255, 255, 255, 0.3); boksskygge: 0 0 5px rgba (0, 0, 0, 1), innstikk 0 1px 0 rgba (255, 255, 255, 0.3); -webkit-grense-radius: 3px; -moz-grense-radius: 3px; border-radius: 3px; markør: pointer;  input [type = submit]: svever -webkit-box-shadow: 0 0 10px rgba (0, 0, 0, 0.9); -moz-boks-skygge: 0 0 10px rgba (0, 0, 0, 0,9); -o-boks-skygge: 0 0 10px rgba (0, 0, 0, 0,9); boksskygge: 0 0 10px rgba (0, 0, 0, 0,9); bredde: 125px; margin-venstre: -130px;  input [type = submit]: aktiv bakgrunn: # c3d7ff; bakgrunn: -moz-lineær gradient (topp, # c3d7ff 0%, # f0f0f0 100%); bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, # c3d7ff), fargestopp (100%, # f0f0f0)); bakgrunn: -webkit-lineær-gradient (topp, # c3d7ff 0%, # f0f0f0 100%); bakgrunn: -o-lineær gradient (topp, # c3d7ff 0%, # f0f0f0 100%); bakgrunn: -ms-lineær gradient (topp, # c3d7ff 0%, # f0f0f0 100%); bakgrunn: lineær gradient (topp, # c3d7ff 0%, # f0f0f0 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# c3d7ff", endColorstr = "# f0f0f0", GradientType = 0);

Deretter legger vi til overgangsreglene:

 p a farge: #fff; grensebunn: 2px solid # 2da1ec; -webkit-overgang: alle .4s enkelhet; -moz-overgang: alle .4s enkelhet; -Overgang: alle .4s enkelhet; overgang: alle .4s enkelhet;

 input font-family: "Helvetica Neue", Helvetica, sans-serif; skriftstørrelse: 25px; -webkit-overgang: alle .4s enkelhet; -moz-overgang: alle .4s enkelhet; -Overgang: alle .4s enkelhet; overgang: alle .4s enkelhet;

Trinn 7: CSS Animasjoner

Vi kan også legge til noen fine CSS3 animasjoner for en ekstra effekt når siden lastes. Det anbefales at du bruker CSS-animasjoner som et kompliment til designet ditt. ikke en integrert del av den. Støtte for animasjoner er fortsatt sparsom, og du bør være skeptisk til å overkomplisere designet for det.

Når det er sagt, er Dan Eden's Animate.css et veldig nyttig CSS animasjonsbibliotek. Du kan legge til det som vist i originaldokumentet i begynnelsen av opplæringen, eller importere det til stilarket, hvis du foretrekker det:

 @import url (animate.css);

Det er en rekke vakre animasjoner å velge mellom, men jeg skal legge til bounceInDown animasjon. Vi bruker den til vårt element (i dette tilfellet beholderen) som slik:

 #container posisjon: fast; bredde: 500px; høyde: 300px; topp: 50%; venstre: 50%; margin-topp: -150px; margin-venstre: -250px; tekst-align: center; -webkit-animasjon-navn: bounceInDown; -webkit-animasjon-fyll-modus: begge; -webkit-animasjon-varighet: 1.5s; -webkit-animasjon-iterasjon-telling: 1; -webkit-animasjon-timing-funksjon: lineær; -moz-animasjon-navn: bounceInDown; -moz-animasjon-fyll-modus: begge deler; -moz-animasjon-varighet: 1,5s; -moz-animasjon-iterasjon-telling: 1; -moz-animasjon-timing-funksjon: lineær; animasjonsnavn: bounceInDown; animasjons-fyll-modus: begge deler; animasjon-varighet: 1,5s; animasjon-iterasjon-telling: 1; animasjon-timing-funksjon: lineær;

Hvis du vil endre animasjonen, endrer du bare -animasjon-navn til navnet på animasjonen du vil ha.

Trinn 8: Ta ting videre

Dette er ikke en responsiv design, langt fra det, men du vil kanskje legge til et par medieforespørsler til bunnen av css for å ta vare på mindre enheter. Tenk på å gjøre beholderelementet smalere for mindre skjermer, og endre bredden eller posisjoneringen av inngangene.

For å tillate at vårt påmeldingsskjema legger til e-postadresser på en liste, kan vi gjøre med ledningen til en e-posttjeneste, for eksempel MailChimp. Jeg kommer ikke til å forklare dette i detalj, siden denne artikkelen demonstrerer det perfekt.

Hvis du vil legge til validering i skjemaet, kan du sjekke ut denne opplæringen.

Konklusjon

Å bygge en rask teaser side som denne er viktig for publisitet før en nettside eller produktlansering. Det trenger ikke å være komplisert, som denne rene CSS-løsningen viser.

Jeg håper du har lært noe fra denne opplæringen, takk for å lese!

Webdesign