Nem oprettelse af bannere ved hjælp af css3. CSS-bannere - Opret bannere ved hjælp af ren CSS

Venner, hej alle sammen. I dag vil vi fortsætte med at skabe bannere i Google Web Designer i HTML5-format, med en 3D-effekt.

Og det er forståeligt, bannere oprettet i html5 og css3 vises på enhver skærm, både på computere, fjernsyn og mobile enheder. Det samme kan ikke siges om flash-bannere.

Derudover kan disse bannere nemt bruges, og banneret vil se godt ud på enhver skærm.

Og i betragtning af det faktum, at mobile enheder i stigende grad bruges til at se internetressourcer, er dette meget vigtigt.

Jeg har allerede beskrevet den vigtigste og dens placering på webstedet i den forrige artikel. Så i dag vil jeg være opmærksom på at skabe en 3D-effekt og cykliske (gentage) indstillinger. Vi vil også se på flere indstillinger for "begivenheder".

Det er ret svært at beskrive hele denne proces i detaljer, så jeg tilbyder dig en videotutorial. Dette vil gøre det meget lettere at mestre materialet. Download også arkivet med mit bannerprojekt som et visuelt eksempel.

Forbereder på at lave et banner med en 3D-effekt.

Det endelige udseende af banneret afhænger i sidste ende af forberedelsen. Google Web Designer-editoren giver dig mulighed for at skabe realistiske 3D-effekter, og alt dette vil blive skrevet i html-kode, du skal bare samle alt korrekt i den visuelle editor.

For at skabe en 3D-effekt af høj kvalitet skal du først klippe blanks i Photoshop, som senere skal sammenføjes i Google Web Designer.

Som et eksempel forberedte jeg følgende blanks:

Jeg lavede disse blanks i Photoshop, men der er mange lignende billeder på internettet. Du behøver ikke anstrenge dig, men tage færdige muligheder.

Bemærk: Hvis du er interesseret i processen med at oprette sådanne blanks, skriv om det i kommentarerne.

Det er også vigtigt at tænke på den overordnede bannersammensætning og script. Dette bestemmer, hvordan banneret vil blive opfattet som helhed.

Oprettelse af et 3D-objekt i Google Web Designer.

Så i analogi med den forrige artikel, start editoren og opret et nyt projekt.

3D-effekten indebærer et sammensat billede, det vil sige et billede bestående af flere stykker placeret i den ønskede projektion.

Disse flere billeder skal kombineres enten til en gruppe eller placeres i en DIV-blok. Og sådan og sådan vil være korrekt. Men det er mere bekvemt for mig at arbejde med DIV-siden.

Trin 1: Opret en DIV-blok.

Så for at oprette en DIV-blok skal du vælge i venstre panel "Tagging Tool (D)".

Sørg for at tildele et ID. Og juster størrelserne ved hjælp af sektionen "Ejendomme" i højre panel.

Nu skal du vælge blokken. For at gøre dette skal du vælge i venstre panel "udvælgelsesværktøj (V)" og dobbeltklik på venstre museknap på rammen af ​​DIV-blokken. Den skifter farve til rød.

Trin 2. Arrangering af billeder.

Og nu begynder den mest omhyggelige proces. Du skal eksponere alle elementerne i et enkelt billede.

Jeg har følgende ting til min rådighed:

- Overside.

— Side (består af tre separate dele).

Placer først bagsiden (bagsiden) af billedet og juster det til midten og øverste kant af banneret.

Tilføj forsiden på samme måde. Juster og skift langs Z-aksen.

Da sidebredden er 4px (pixels), flyttede jeg for- og bagsiden langs Z-aksen med 2px og -2px. Dette vil give et mellemrum mellem billederne.

Bemærk: se skærmbillederne for nøjagtige forskydningstal.

Tilføj derefter siden, alle delene separat. Brug værktøjerne for at lette placeringen "3D rotation af arbejdsområde" Og "Vægt". De vil hjælpe dig med at justere alle detaljer nøjagtigt.

Til at begynde med foreslår jeg, at du stiller alle billederne op på den ene side, og derefter kopierer dem og placerer dem i en spejlprojektion på den anden side.

Det næste trin er at opstille det øverste venstre hjørne.

Nu den centrale del af siden.

Og nederste hjørne i venstre side.

Sørg for at justere alle sideelementer ved 90 0 langs Y-aksen.

Nu skal du kopiere det ønskede lag og indsætte det igen, omdøbe det og ændre placeringsparametrene, så vi får elementerne til højre side.

For at gøre dette skal du vælge et billede i det nederste panel - tryk på tastekombinationen CTRL + C (kopi) og indsæt duplikatet CTRL + V.

Lad os starte på samme måde som marksiden fra top til bund, men kun for den rigtige.

Øverst højre omslag.

Jeg lavede ikke den nederste del, da den ikke er synlig på billedet.

Det hårdeste arbejde er slut. Nu kan du begynde at opsætte animationen. Som en visuel demonstration, lad os rotere billedet.

Oprettelse af en rotationseffekt i Google Web Designer.

Det første trin er at forlade DIV-blokken, som indeholder alle billedelementerne. Det vil sige, at vi arbejdede inde i en blok med specifikke billeder, og nu skal vi arbejde med alle billeder samtidigt og administrere DIV-blokken.

For at begynde skal du klikke på knappen DIV i bundpanelet.

Så på tidshytten opretter du to nøglerammer ved at klikke på højre museknap. Det skal se sådan ud:

Placeringen af ​​den originale ramme på Y-skalaen er indstillet til -90 0 .

Vi sætter den første nøgleramme (den anden) på Y-skalaen til 0 0 .

Indstil den anden nøgleramme (tredje i træk) til 90 0 på Y-skalaen.

Du kan tjekke resultaterne. For at gøre dette skal du klikke på knappen Spil.

Sandt nok vil vores image kun lave én revolution. For at billedet skal rotere konstant eller lave flere omdrejninger, skal du konfigurere cykelparametrene.

Opsætning af cykling i Google Web Designer.

Programmet giver dig mulighed for at konfigurere flere cyklicitet (gentagelse) muligheder. På denne måde kan du opsætte en gentagelse for alle bannerelementer eller for hvert element separat.

Desuden kan cykliciteten begrænses af antallet af gentagelser eller gøres uendelig.

På det nederste panel, ud for hvert element, er der symboler "Castle", "Eye", "Reverse Arrow".

Så for at konfigurere cykliciteten skal du klikke på symbolet "Vend pil". Og vælg enten et begrænset antal gentagelser eller en uendelig mulighed.

Jeg valgte at gentage animationen i det uendelige. For i fremtiden vil jeg konfigurere "Begivenheder" så rotationen stopper, når musen holdes svævende, og fortsætter, efter at markøren er fjernet.

Stopper rotation, når du holder musen over banneret.

Først og fremmest sætter vi en genvej på den første nøgleramme (den anden i træk). For at gøre dette skal du højreklikke over rammen og vælge menupunktet "Tilføj genvej". Indtast navnet på genvejen, og tryk på Enter-tasten.

Og i næste trin vælger du som modtager « Side 1". Der vil ikke være andre muligheder der.

Og det sidste trin, vælg den genvej, du oprettede i den indledende fase.

Gem begivenheder og tjek. Bannerrotationen stopper, når du holder musen over rammen, hvor genvejen blev lavet.

Genoptagelse af rotation efter at have flyttet musemarkøren væk.

For at sikre, at rotationen fortsætter efter at have flyttet markøren til siden, skal du konfigurere en anden begivenhed.

Den er konfigureret på samme måde som den forrige, med kun to forskelle.

Begivenheden er valgt "Mus"— « museud".

Hændelse - tilbagetrækning af mus

Og som en handling "Tidslinje" — « togglePlay".

Handling - Fortsæt

Nu er vores banner med 3D-effekt klar. Og du kan komme med så mange forskellige effekter, som du vil.

Bare glem ikke at indstille en begivenhed til et museklik og åbning af et link. Banneret blev jo ikke skabt for skønhedens skyld.

I første omgang kan denne proces virke kompliceret, men efter et par bannere vil du ikke tænke det længere.

Det var alt for mig i dag, venner. Jeg ønsker dig al succes, jeg ser frem til dine kommentarer og se dig i nye artikler og videotutorials.

Med venlig hilsen, Maxim Zaitsev.

Uden tvivl en af ​​de smarteste trends 2012 er udvikling på CCS3, HTML5. I dag tilbyder vi en stor og meget nyttig oversigt over eksempler " 20+: kreative og nyttige lektioner på CSS3″ tilbydes på SpeckyBoy. Alle eksempler er lavet på ren uden JavaScript, de præsenterede lektioner inkluderer demoer og færdiglavede CSS3-filer til download.

Vi er sikre på, at disse teknikker vil være nyttige for webudviklere!

css3 lektioner :

1. CSS3 fotogallerier, skydere, effekter med billeder

1.1.Slider på CSS3

Jeg kan ikke tro det, men denne skyder med forskellige effekter er lavet udelukkende i CSS3, meget imponerende.

1.2. Baggrund for en fuldskærms hjemmeside med en skydereffekt ved hjælp af CSS3

Webdesignere har eksperimenteret med forskellige baggrunde for et websted i lang tid, men indtil nu kunne meget lidt gøres med ren CSS, du skulle bruge JS. Nu giver CSS3 dig mulighed for at gøre med baggrunden på dit websted, som du ønsker - du kan have én baggrund med et stort fotografi af høj kvalitet, du kan ændre flere baggrunde med forskellige effekter, og med skalerbarheden af ​​baggrunden afhængigt af skærmparametrene. Generelt en fantastisk mulighed for kreative websteder.

1.3. Lightbox på CSS3

Med denne vejledning kan du lære, hvordan du opretter en lysboks med en række forskellige effekter ved hjælp af ren CSS.

1.4. Billedegenskaber i CSS3

Denne vejledning demonstrerer nye funktioner i CSS3 til billedegenskaber, såsom afrundede hjørner, skygger og andre effekter.

1.5. Animeret banner med CSS3

1.6 Indlæsningspanel i CSS3

1.7. 3D bånd med CSS3

Se demo eller download CSS3-kodefiler →

2. CSS3 menuer, navigation og knapper

2.1. Apple.com-menu i CSS3

Tutorial til at skabe den berømte Apple.com-menu i CSS3.

2.2. Animeret vandret menu med CSS3

En simpel vejledning, der viser, hvordan man laver en animeret menu i CSS3 med forskellige effekter.

2.3. Animeret lodret menu med CSS3

2.4. Animerede knapper med CSS3

Fantastisk vejledning med 7 eksempler på animerede kreative knapper.

2.5. Kreativ animeret menu med billeder ved hjælp af CSS3

I denne lektion er de 10 præsenterede eksempler simpelthen øjenåbnende. Sådanne komplekse kreative menuer plejede at blive oprettet udelukkende ved hjælp af JS. Imponerende!

2.6. Cirkelnavigationseffekt med CSS3

En usædvanlig effekt, når du svæver over et valgt navigationselement i form af en cirkel med et billede. Tage til efterretning!

2.7. Dropdown-menu i CSS3

Tutorial til at implementere en simpel rullemenu med underniveauer i CSS3.

2.8. CSS3-navigation med animerede overgange

3. Forskellige effekter på CSS3

3.1. Animeret værktøjstip i CSS3 uden jQuery

Lad os lave et reklamebanner ved hjælp af CSS3. I øjeblikket understøtter kun Firefox- og WebKit-browsere CSS3-animationer fuldt ud. Men det er nemt nok at få banneret til at fungere i andre browsere. Forvent dog ikke stor ydeevne overalt (især i IE 7 og ældre), når du eksperimenterer med de nyeste CSS-teknikker.

Bemærk: For at spare plads på siden er alle browserproducentens præfikser udeladt. Se koden i kilderne.

HTML-markering

Lad os først se på strukturen af ​​banneret i HTML. På dette stadium skal vi forestille os, hvordan animationen vil fungere:

For en dybere forståelse af opmærkningsstrukturen, lad os fokusere på båden:

Tre animationer forekommer med båden:

Båden glider til venstre. Gælder for en uordnet liste (gruppe).

Efterligning af en båd, der vugger på vandet. Gælder for en listepost (båd).

Fremkomsten af ​​et spørgsmålstegn. Gælder for et div-element (spørgsmålstegn).

Hvis du kigger på demosiden, kan du se, at animationen for listeelementet (båden) også påvirker div-elementet inde i det (spørgsmålstegn). Også den "glidende ud"-animation for en uordnet liste virker på listeelementet (båd og spørgsmålstegn).

Derfor kan vi konkludere, at børneelementer modtager animationer fra deres forældre ud over deres egne handlinger. Nu er der kun tilbage at liste forældre/barn-strukturerne.

CSS

Før du begynder at se på at lave animationer, skal du sikre bagudkompatibilitet med ældre browsere.

bagudkompatibilitet

Vi sikrer bagudkompatibilitet ved blot at style markeringen, som om CSS-animationer slet ikke eksisterede. Hvis nogen ser siden i en gammel browser, vil de se et almindeligt statisk billede og ikke et tomt mellemrum.

For eksempel: hvad hvis du bruger CSS? i lighed med den nedenfor, vil der være problemer:

/* FORKERT! */ @keyframe vores-fade-in-animation ( 0% (opacitet:0;) 100% (opacitet:1;) ) div ( opacitet: 0; /* Denne div er skjult som standard - ups! */ animation: vores -fade-in-animation 1s 1;)

Hvis browseren ikke understøtter animationer, vil div-elementet forblive usynligt for brugeren.

Og sådan sikrer vi bagudkompatibilitet med ældre browsere:

/* TRUE */ @keyframe vores-fade-in-animation ( 0% (opacitet:0;) 100% (opacitet:1;) ) div ( opacitet: 1; /* Denne div er som standard synlig */ animation: vores -fade-in-animation 1s 1;)

Nu vil div-elementet blive vist, selvom animationen ikke starter. Og i moderne browsere vil div'en først blive skjult under animationen.

Grundlaget

Nu ved vi, hvordan vi sikrer bagudkompatibilitet (hvilket hjælper med at undgå problemer, når du arbejder med rigtige projekter). Det er tid til at skabe grundlaget for vores CSS-kode.

Du skal huske 3 punkter:

Da banneret vil blive brugt på forskellige websteder, vi vil gøre alle vores CSS-vælgere specielle. De starter alle med identifikatoren #ad-1. På denne måde vil vi forsøge at undgå overlapning mellem vores kode og webstedskoden.

Vi ignorerer bevidst animationsforsinkelse i installationer. Hvis du bruger en animationsforsinkelse, når du indstiller stilarter med standardsynlighed for elementer, vil bannerstrukturen blive forstyrret af den pludselige forsvinden eller fremkomsten af ​​dele af billedet, efter at animationen er fuldført. Animationsforsinkelse simuleres af billedernes varighed og indstilling.

Når det er muligt Vi bruger én animation til flere elementer. På denne måde sparer vi tid og reducerer kodestørrelsen.

Så lad os skabe grundlaget for vores banner. Lad os indstille relativ positionering for det, så de indre elementer kan placeres korrekt. Vil også skjule alt uden for elementets omfang:

#ad-1 (bredde: 720px; højde: 300px; float: venstre; margin: 40px auto 0; baggrundsbillede: url(../images/ad-1/background.png); baggrundsposition: center; baggrund -repeat: no-repeat; overløb: skjult; position: relativ; box-shadow: 0px 0px 6px #000; )

Derefter sætter vi stile til tekst- og inputfelterne. Kald de relevante animationer. Du skal også sørge for, at indholdet har det højeste z-indeks for de bevægelige dele, så de ikke overlapper:

#ad-1 #content ( width: 325px; float: right; margin: 40px; text-align: center; z-index: 4; position: relative; overflow: synlig; ) #ad-1 h2 ( font-family: "Alfa Slab One", kursiv; farve: #137dd5; font-size: 50px; line-height: 50px; text-shadow: 0px 0px 4px #fff; animation: delayed-fade-animation 7s 1 ease-in-out; /* Vises h2 med simuleret forsinkelse */ ) #ad-1 h3 ( font-family: "Boogaloo", cursive; color: #202224; font-size: 31px; line-height: 31px; text-shadow: 0px 0px 4px #fff; animation: delayed-fade-animation 10s 1 ease-in-out; /* Vises h3 med simuleret forsinkelse */ ) #ad-1 form ( margin: 30px 0 0 6px; position: relativ; animation: form-animation 12s 1 ease-in-out; /* Glid ud af formularen til indtastning af en e-mailadresse med simuleret forsinkelse */ ) #ad-1 #email (bredde: 158px; højde: 48px; float: venstre; polstring: 0 20px; font -størrelse: 16px; font-family: "Lucida Grande", sans-serif; farve: #fff; text-shadow: 1px 1px 0px #a2917d; border-top-venstre-radius: 5px; border-bottom-venstre-radius : 5px; border:1px solid #a2917d; disposition: ingen; box-shadow: -1px -1px 1px #fff; baggrundsfarve: #c7b29b; baggrundsbillede: lineær-gradient(bund, rgb(216.201.185) 0%, rgb(199.178.155) 100%); ) #ad-1 #email:focus (baggrundsbillede: linear-gradient(bund, rgb(199.178.155) 0%, rgb(199.178.155) 100%); ) #ad-1 #submit (højde: 50px; flydende: venstre ; cursor: pointer; padding: 0 20px; font-size: 20px; font-family: "Boogaloo", cursive; color: #137dd5; text-shadow: 1px 1px 0px #fff; border-top-right-radius: 5px ; border-bottom-right-radius: 5px; border:1px solid #bcc0c4; border-venstre: none; background-color: #fff; background-image: linear-gradient(bottom, rgb(245.247.249) 0%, rgb( 255.255.255) 100%); ) #ad-1 #submit:hover (baggrundsbillede: linear-gradient(bottom, rgb(255.255.255) 0%, rgb(255.255.255) 100%); )

Lad os nu indstille stilarterne for vandet og kalde den tilsvarende animation:

#ad-1 ul#water( /* Hvis du har brug for en anden animation til vand, kan du tilføje den her */ ) #ad-1 li#water-back ( width: 1200px; height: 84px; background-image: url( .. /images/ad-1/water-back.png); background-repeat: repeat-x; z-index: 1; position: absolut; bund: 10px; venstre: -20px; animation: water-back-animation 3s uendelig lethed-ind-ud; /* Efterligning af sprøjtende bølger */ ) #ad-1 li#vand-front (bredde: 1200px; højde: 158px; baggrundsbillede: url(../images/ad-1/ water-front .png); background-repeat: repeat-x; z-index: 3; position: absolut; bottom: -70px; left:-30px; animation: water-front-animation 2s uendelig lethed-in-out; /* Andet Simulerer sprøjtende bølger. Animationen kører lidt hurtigere for at skabe en perspektiveffekt. */ )

Lad os sætte stile for båden og dens elementer. Vi kalder også de tilsvarende animationer:

#ad-1 ul#boat (bredde: 249px; højde: 215px; z-indeks: 2; position: absolut; bund: 25px; venstre: 20px; overløb: synlig; animation: båd-i-animation 3s 1 ease-out ; /* Skub gruppen ind, når annoncen starter */ ) #ad-1 ul#boat li ( width: 249px; height: 215px; background-image: url(../images/ad-1/boat.png); position: absolut; bund: 0px; venstre: 0px; overløb: synlig; animation: bådanimation 2s uendelig lethed-in-out; /* Simuler båden, der gupper på vandet - svarende til den animation, der allerede er brugt på selve vandet. */ ) #ad-1 #question-mark (bredde: 24px; højde: 50px; baggrundsbillede: url(../images/ad-1/question-mark.png); position: absolut; højre: 34px; top: -30px; animation: delayed-fade-animation 4s 1 ease-in-out; /* Udton spørgsmålstegnet */ )

Lad os nu skabe stile til skyerne. For dem vil vi bruge animation med effekten af ​​endeløs bevægelse. Illustrationen demonstrerer essensen af ​​ideen:

Og her er CSS-koden:

#ad-1 #clouds (position: absolut; top: 0px; z-indeks: 0; animation: cloud-animation 30s uendelig lineær; /* Rul skyerne til venstre, nulstil og gentag */ ) #ad-1 # cloud-group -1 ( width:720px; position: absolute; left:0px; ) #ad-1 #cloud-group-2 ( width: 720px; position: absolute; left: 720px; ) #ad-1 .cloud- 1 (bredde: 172px; højde: 121px; baggrundsbillede: url(../images/ad-1/cloud-1.png); position: absolut; top: 10px; venstre: 40px; ) #ad-1 . cloud-2 ( bredde: 121px; højde: 75px; baggrundsbillede: url(../images/ad-1/cloud-2.png); position: absolut; top: -25px; venstre: 300px; ) #ad -1 . cloud-3 (bredde: 132px; højde: 105px; baggrundsbillede: url(../images/ad-1/cloud-3.png); position: absolut; top: -5px; venstre: 530px; )

Animationer

Påmindelse: Fra dette tidspunkt er intet faktisk animeret. Hvis du ser på vores banner nu, vil du se et statisk billede. Det er her animationerne oprettes og kaldes i koden ovenfor.

Lad os nu puste liv i vores smukke statiske billede:

/* Simuleret forsinkelsesanimation bruges til at vise flere elementer. Forsinkelsessimuleringen udføres ved at starte processen med 80 % af animationen fortsættende (og ikke umiddelbart). På denne måde kan du simulere enhver forsinkelse: */ @keyframes delayed-fade-animation ( 0% (opacitet: 0;) 80% (opacitet: 0;) 100% (opacitet: 1;) ) /* Animation til visning af en formular med en e-mailadresse og en knap. Imitation af forsinkelse bruges også */ @keyframes form-animation ( 0% (opacitet: 0; højre: -400px;) 90% (opacitet: 0; højre: -400px;) 95% (opacitet: 0,5; højre: 20px;) ;) 100% (opacitet: 1; højre: 0px;) ) /* Denne animation bruges til at få båden væk fra skærmen i begyndelsen af ​​videoen: */ @keyframes boat-in-animation ( 0% (venstre: -200px;) 100% (venstre : 20px;) ) /* Animation til skyer. Den første gruppe skyer begynder at bevæge sig fra midten, og den anden - til højre på skærmen. Den første gruppe fjernes langsomt fra skærmen, og den anden vises til højre. Når den venstre gruppe er fuldstændig skjult, vender skyerne meget hurtigt tilbage til deres oprindelige position: */ @keyframes cloud-animation ( 0% (venstre: 0px;) 99,9999% (venstre: -720px;) 100% (venstre: 0px; ) ) / * De sidste tre animationer er næsten ens - forskellen ligger i placeringen af ​​elementerne. De simulerer sprøjt af havbølger: */ @keyframes båd-animation ( 0% (nederst: 0px; venstre: 0px;) 25% (nederst: -2px; venstre: -2px;) 70% (nederst: 2px; venstre : - 4px;) 100% (nederst: -1px; venstre: 0px;) ) @keyframes water-back-animation ( 0% (nederst: 10px; venstre: -20px;) 25% (nederst: 8px; venstre: - 22px; ) 70% (nederst: 12px; venstre: -24px;) 100% (nederst: 9px; venstre: -20px;) ) @keyframes water-front-animation (0% (nederst: -70px; venstre: -30px) ;) 25% (nederst: -68px; venstre: -32px;) 70% (nederst: -72px; venstre: -34px;) 100% (nederst: -69px; venstre: -30px;) )

Konklusion

I denne lektion lærte vi flere nøglebegreber:

1. Arvingselementer modtager deres forældres animationer ud over deres egne animationer.
2. Når du opretter et banner, bør du stræbe efter at bruge en unik identifikator for at undgå overlappende kode med et eksisterende CSS-projekt.
3. Elementernes placering og stil bør vælges, som om animation ikke var tilgængelig for at sikre bagudkompatibilitet.
4. Hvis det er muligt, bør du bruge én animation til flere elementer.

Takket være udviklingen af ​​webteknologier og moderne browsere kan vi skabe mange effekter uden at bruge Javascript. Dette har gjort livet meget lettere for webudviklere. For nu kan vi skabe effekter ved hjælp af ren CSS uden at bruge Javascript. Derfor vil jeg i denne artikel fortælle dig om, hvorvidt det er muligt at lave bannere ved hjælp af ren CSS, hvad dette kræver, samt fordele og ulemper ved denne tilgang.

CSS3 giver en bred vifte af muligheder, du skal bare bruge dem korrekt. Som et eksempel vil jeg gerne give links til mine tidligere værker "Characters in Pure CSS":

Først vil jeg give eksempler på mine CSS-bannere. Du har måske allerede set dem på webstedet, men du vidste ikke engang, hvad og hvordan de blev oprettet.

Om demoen: Hvert eksempel (banner) har en varighed i sekunder i bunden, samt en "Opdater"-knap, som begynder at vise banneret fra begyndelsen.

Banner #1 — "Individuel træning i hjemmesideopbygning":

Jeg oprettede dette banner i omkring 2 dage. Hvorfor så længe? Fordi det tog lidt tid at tilpasse banneret (for at gøre det gummi) ved genberegning af koordinaterne. I øjeblikket afhænger dens størrelse af bredden af ​​den overordnede blok (som indeholder selve CSS-banneret).

Jeg oprettede dette banner på bogstaveligt talt 2-2,5 timer. Det eneste, der bremsede oprettelsesprocessen her, var valget af ikoner. For de skulle udvælges tæt på bannerets tema.

Dette banner strækker sig også afhængigt af bredden af ​​den blokcontainer, hvori den er placeret. Det tog cirka 1,5 time at oprette.

Disse bannere ser meget flotte ud, men er det virkelig så enkelt? Lad os se på fordele og ulemper ved denne metode til at skabe bannere.

Fordele og ulemper ved CSS-bannere:

Hvordan opretter man et CSS-banner?

1 idé

Først skal du vide præcis, hvilken animation banneret skal have (hvad, hvor og hvorfra det skal flyttes, og hvor det skal vises). Du kan tage et A4-ark og tegne, hvor hvert element vil bevæge sig, og hvad der skal stå på banneret.

Du kan jo ikke begynde at oprette et banner, hvis du ikke ved, hvad det skal være, og hvordan det fungerer.

2 HTML-struktur

Det næste trin er at oprette HTML-markering, så elementer kan flyttes (og animeres til dem). Det vil sige, at du ikke kan gøre alt med ét billede, der vil bevæge sig ud til højre eller venstre, og så er animationen færdig.

Typisk er der én fælles blok, hvor alle de andre er placeret. Og i denne generelle blok kan vi styre elementerne, som vi har brug for.

3 CSS-animation

Det sidste trin er at lave animationer til blokkene, samt skrive stile til dem, fordi nogle dele af animationen er skjult som standard.

For at lave dit eget banner skal du have et godt kendskab til det grundlæggende i CSS og HTML.

Lær grundlæggende CSS-animation med denne tutorial - .

Konklusion

Alle moderne browsere understøtter CSS3-egenskaber, hvilket betyder, at bannere vil blive vist korrekt i sådanne browsere. Men ved hjælp af JS plugins kan du oprette CSS-bannere til ældre browsere. Ved at lære det grundlæggende i CSS-animation, vil du forstå banneroprettelsesprocessen og vil snart skabe dit første rene CSS-banner! 😉