hurtigt opbygge et sus teaser side med css3,,,, i denne forelæsning, vil du lære at bygge en teaser side med css, ingen billeder eller endda en photoshop design.mange websteder og kommende apps få stor omtale i teaser sider, så det er et nyttigt koncept, at tilføje til din værktøjskasse.brug det til app eller websted, der er klar til affyring.,,,, trin 1: http: //avance, html til teaser side er ganske enkel.vi har bare en beholder med vores indledende tekst og input. <!doctype html > < head > <!- det basale... > < meta - charset = "utf - 8" > < meta - http equiv = "x-ua-compatible" indhold = "ie = kant, krom = 1 > < afsnit > app kommer snart. < /afsnit > <!- mobil - > < meta - navn = "viewport" indhold = "bredde = anordning bredde, oprindelige omfang = 1, maksimale omfang = 1 > <!- css - > < forbindelse rel = "stylesheet" href = "css /nulstillet. css" > < forbindelse rel = "stylesheet" href = "css /livfulde. css" > < forbindelse rel = "stylesheet" href = "css /styles. css" > < /head > <!- vigtigste html - > < krop > <!- begynde side indhold - > < div id = "containere" > < h1 > app. < /h1 > < p > denne fantastiske anvendelse vil ændre dit liv.støtte anmeldes, når det er til rådighed, eller følger os på < en href = "#" > twitter. < /a > < /p > < div id = "enig" > < input type = "e - mail" indikation af en art = "e - mail adresse" > < input type = "stille" værdi = "stille" > < /div > < /div > <!- ende side indhold - > < /organ > < /html >,, trin 2: placering og størrelse, vores elementer, lad os give vores side struktur.vi begynder med den grundlæggende holdning, og den beholder, i centrum af den side.vi bruger placeringen af 50%, så negative marginer for at bringe objekt halvdelen af dets bredde og højde, html organ (bredde: 100%, højde: 100%: helvetica font familie neue "helvetica, uden serif; farve:Ƽ - webkit skrifttype udjævning: antialiased;}}&#container (holdning: faste; bredde: 500px. højde: 300px; top: 50% tilbage: 50% margen top. - 150px; margen: - 250px; tekst tilpasse: center;}, vi holdning teksten og input ved hjælp af attributten selektorer til målet - og forelægge input særskilt., h1 (skriftstørrelse: 90px;} p (bredde: 80%; skriftstørrelsen: 23px; linje højde: 1.3em; margen: 1.1em auto; tekst tilpasse: center;}&#tegne {margen: 0 auto; tekst tilpasse: center;} bidrag [type = e - mail] (bredde: 90%; polstring: 15px; margen: 0 auto;} bidrag [type = indgive] {holdning: absolut; margen: - 105px; margen top: 5px; polstring: 10px; bredde: 100px. højde: 50px;}, trin 3: - den tekst, der kalder den tekst til denne side er ganske enkel.vi vil have navnet på kontrast til baggrunden, så vi får det hvide.det er en vigtig tekst, men vi vil have gæster til at huske navnet på vores produkt, så vi gør det ikke så udtalt.twitter - sammenhæng understreges, hvilket tyder på, at der er en forbindelse. for det første vigtigste tekst: h1 (skriftstørrelse: 90px; skrifttype vægt: dristigt, farve:&#fff; tekst skygge: 0 1px 4px� margen top: 20px;} p (bredde: 80%; skriftstørrelsen: 23px; linje højde: 1.3em; farve:&#fff; margen: 1.1em auto; tekst tilpasse: center; tekst skygge: 0 0 2px rgba (0, 0 0, 0, 9)}, twitter - link: p a (farve:&#fff; grænseoverskridende nederst: 2px fastda1ec;} trin 4: - baggrunden, nu kommer det sjove ved at give genstande på vores side, at ekstra je ne sais quoi.vi starter ved at skabe et godt sving baggrund.hvis du er en mac - bruger du kan læne sig op ad gradientapp gøre det hårde arbejde.alternativt, over til css3!to get some idea of the syntax., html, body { \twidth: 100%; \theight: 100%; \tfont-family: "Helvetica Neue", Helvetica, sans-serif; \tcolor: #444; \t-webkit-font-smoothing: antialiased; \tbackground: #000222; \tbackground: -moz-linear-gradient(top, #000222 0%, #4b637c 100%); \tbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000222), color-stop(100%,#4b637c)); \tbackground: -webkit-linear-gradient(top, #000222 0%,#4b637c 100%); \tbackground: -o-linear-gradient(top, #000222 0%,#4b637c 100%); \tbackground: -ms-linear-gradient(top, #000222 0%,#4b637c 100%); \tbackground: linear-gradient(top, #000222 0%,#4b637c 100%); \tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000222', endColorstr='#4b637c, gradienttype = 0)}, løntrin 5: - de tegne form, tegne form er fokus for vores side, idet vi ønsker besøgende for at finde ud af, hvornår vores fantastiske produkt er frigivet.vi ønsker, at det skal være fokus på denne side, efter navn eller identifikationslogo. starter vi med at stil den indikation af en art (mozilla og webkit specifikke stilarter), og fastsætte en skriftstørrelse::: - webkit input indikation af en art (farve: rgba (255 255 255 0, 4)}: - - input indikation af en art (farve: rgba (255 255 255 0, 4)} input (font familie: helvetica neue "helvetica, uden serif; skriftstørrelsen: 25px;}, lad os give området og knap noget farve og dybde:, input [type = e - mail] {oversigt: ingen. bredde: 90%; polstring: 15px; margen: 0 -, farve:&#fff; grænse: ingen. - webkit grænse radius: 6px; - moz grænse radius: 6px; grænseoverskridende radius: 6px; baggrund: rgba (0, 0 0, 0, 3); -bkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); \t\t-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); \t\t-o-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); \t\tbox-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); \t} \t \tinput[type=submit] { \t\tposition: absolute; \t\tmargin-left: -105px; \t\tmargin-top: 5px; \t\tfont-size: 25px; \t\tcolor: #222; \t\ttext-shadow: 0 1px 0 #fff; \t\tpadding: 10px; \t\twidth: 100px; \t\theight: 50px; \t\tborder: none; \t\tbackground: #f0f0f0; \t\tbackground: -moz-linear-gradient(top, #f0f0f0 0%, #c3d7ff 100%); \t\tbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#c3d7ff)); \t\tbackground: -webkit-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); \t\tbackground: -o-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); \t\tbackground: -ms-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); \t\tbackground: linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); \t\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#c3d7ff',GradientType=0 ); \t\t-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); \t\t-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); \t\t-o-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); \t\tbox-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); \t\t-webkit-border-radius: 3px; \t\t-moz-border-radius: 3px; \t\tborder-radius: 3px; markør: pointer.}, trin 6: forøgelse af css overgange, lad os tilføje nogle pæne css overgange til tag besøgende opmærksomhed. vi vil tilføje den og aktive stater twitter - forbindelsen og rå - og hjælpestoffer, p a (farve:&#fff; grænseoverskridende nederst: 2px fastda1ec;) p a: den (farve:da1ec; grænseoverskridende nederst: 2px fast&#fff;}, input [type = e - mail] {oversigt: ingen; bredde: 90%; polstring: 15px; margen: 0 -, farve:&#fff; grænse: ingen. - webkit grænse radius: 6px, - moz grænse radius: 6px; grænseoverskridende radius: 6px; baggrund: rgba (0, 0 0, 0, 3); - webkit rubrik skygge: * * * 0 0 5px rgba (0, 0 0, 0, 9); - moz rubrik skygge: * * * 0 0 5px rgba (0, 0 0, 0, 9); - o-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); \tbox-shadow: inset 0 0 5px rgba(0, 0, 0, 0.9); } input[type=email]:hover { \tbackground: rgba(0, 0, 0, 0.5); } input[type=email]:focus { \t-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2); \t-moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2); \t-o-box-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2); \tbox-shadow: inset 0 0 8px rgba(0, 0, 0, 1), 0 0 0 5px rgba(0, 0, 0, 0.2); \tbackground: rgba(0, 0, 0, 0.6); } input[type=submit] { \tposition: absolute; \tmargin-left: -105px; \tmargin-top: 5px; \tfont-size: 25px; \tcolor: #222; \ttext-shadow: 0 1px 0 #fff; \tpadding: 10px; \twidth: 100px; \theight: 50px; \tborder: none; \tbackground: #f0f0f0; \tbackground: -moz-linear-gradient(top, #f0f0f0 0%, #c3d7ff 100%); \tbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#c3d7ff)); \tbackground: -webkit-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); \tbackground: -o-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); \tbackground: -ms-linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); \tbackground: linear-gradient(top, #f0f0f0 0%,#c3d7ff 100%); \tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#c3d7ff',GradientType=0 ); \t-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); \t-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); \t-o-box-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); \tbox-shadow: 0 0 5px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); \t-webkit-border-radius: 3px; \t-moz-border-radius: 3px; \tborder-radius: 3px; \tcursor: pointer; } input[type=submit]:hover { \t-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); \t-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); \t-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); \tbox-shadow: 0 0 10px rgba(0, 0, 0, 0.9); \twidth: 125px; \tmargin-left: -130px; \t } input[type=submit]:active { \tbackground: #c3d7ff; \tbackground: -moz-linear-gradient(top,&#c3d7ff 0%,&#f0f0f0 100%); baggrund: - webkit hældning (lineær, venstre øverste, venstre bunden, farve, stop (0%,&#c3d7ff), farve, stop (100%,&#f0f0f0) baggrund: - webkit lineær gradient (top,&#c3d7ff 0%,&#f0f0f0 100%); baggrund: - o-linear-gradient (top,&#c3d7ff 0%,&#f0f0f0 100%); baggrund: - ms lineær gradient (top,&#c3d7ff 0%,&#f0f0f0 100%); baggrund: lineær gradient (top,&#c3d7ff 0%,&#f0f0f0 100%); progid filter: - dximagetransform. microsoft. hældning (startcolorstr =&#c3d7ff, endcolorstr =&#f0f0f0, gradienttype = 0)}, så vi kan tilføje overgangsbestemmelser: p en (farve:&#fff; grænseoverskridende nederst: 2px fastda1ec; - webkit overgang. 4s lette; - moz overgang: alle. 4s lette; - o-transitiom: alle. 4s lette; overgang. 4s lette;} og input (font familie: helvetica neue "helvetica, uden serif; skriftstørrelsen: 25px; - webkit overgang. 4s lette; - moz overgang. 4s lette; - o-transition: alle. 4s lette. uddannelse: alle. 4s lette;}, trin 7: css animeringer, kan vi også tilføje nogle pæne css3 tegnefilm for en ekstra effekt, når den side belastninger.det er tilrådeligt at anvende ccs tegnefilm som en kompliment for deres konstruktion ikke er en integrerende del af det.støtte til tegnefilm stadig er spredt, og du skal passe på med at over komplicerer dit design for at gøre det. det sagde dan eden er animate.css er et meget nyttigt css animation bibliotek.du kan tilføje det, som er anført i den oprindelige tekst i begyndelsen af den pædagogiske eller importerer det ind i din stylesheet, hvis du foretrækker:, @ import url (livfulde. css), er der en række smukke tegnefilm for at vælge fra, men jeg vil tilføje, bounceindown, animation.vi anvender det på vores del (i dette tilfælde beholder), som så:,&#container (holdning: faste; bredde: 500px. højde: 300px; top: 50% tilbage: 50% margen top. - 150px; margen: - 250px; tekst tilpasse: center; - webkit animation navn: bounceindown; - webkit animation fylde tilstand: både; - webkit animation varighed: 1.5s; - webkit animation iteration tæller: 1 - webkit animation timing funktion: lineær; - - animation navn: bounceindown; - - animation fylde tilstand: begge - - animation varighed: 1.5s; - - animation iteration tæller: 1 - - animation timing funktion: lineær; animation navn: bounceindown; animation fylde tilstand: begge animation -varighed: 1.5s; animation iteration tæller: 1; animation timing funktion: lineær;}, hvis du ønsker at ændre animation, du bare skifte - animation navn, at navnet på den informationskampagne, du ville kunne lide.,, trin 8: at gå videre med sagen, det er ikke en lydhør design, langt fra men du kunne have lyst til at tilføje et par medier forespørgsler til bunden af din forskning, for at tage højde for mindre enheder.tænke over det, beholder element snævrere for mindre skærme, og at ændre den bredde eller placering af råmaterialer,.,,, at vores signup form at tilføje, e - mail - adresser på en liste, kan vi gøre med ledninger det op til en e - mail - nyhedsbrev service, sådan som mailchimp.jeg vil ikke forklare det i detaljer, eftersom denne artikel viser det. hvis du vil tilføje valideringen til form, kan du tjekke denne forelæsning.,,,, konklusion, at bygge en hurtig teaser side som denne er af afgørende betydning for omtale, før et websted eller lanceringen.det behøver ikke være kompliceret, som det rene css løsning viser., jeg håber, du har lært noget fra denne forelæsning, tak for det!,
