CSS -forskyvning
Eksempel 01: Offset-UTLINE
For å bruke eiendoms-offset-egenskapen for å gi gjennomsiktig plass blant elementgrensen og dens disposisjon, må vi måtte opprette en "div" -seksjon på websiden. Vi startet denne koden med HTML -taggen og avsluttet den med HTML -lukkekoden. Innenfor Body -taggen har vi brukt "Div" -merket for å opprette en seksjon på HTML -websiden. Denne "div" -merket inneholder bare en enkel tre-ords overskrift eller setning og har blitt stengt med linjepausen lagt til av break line-taggen "
”.
Innenfor "head" -koden til denne HTML-koden, har vi tittelen denne websiden til "Offset- Outline" og bruker "Style" -koden for å style "Div" -delen på HTML-siden vår. Vi har lagt til 10 piksler marginer for "div" -delen sammen med 5-piksler solid crimson kant. Bakgrunnsfargen for denne "div" -del. Vi har også brukt egenskapen "Outline-offset" for å gi et gap på 15 piksler mellom “Div” -seksjonens grense og omrisset. La oss lagre denne koden og kjøre den med "Kjør" -menyen med Visual Studio Code.
Etter den vellykkede utførelsen av denne koden i Chrome -nettleseren, har vi utdataene under HTML -siden. Her er et klart gap mellom Crimson 5-piksler grensen til Div-taggen og dens 4-piksel stiplet fiolettfarget disposisjon. Du kan se at plassen ikke har noen farge.
Eksempel 02: Offsetposisjon
Her er ved bruk av forskyvningsposisjonsegenskapen til CSS for å spesifisere startposisjonen til et hvilket som helst element i HTML -websiden. La oss starte med bruken av HTML -åpning og lukkende tagger. Innenfor denne taggen har vi benyttet oss av kropps- og hodemerker. Body -taggen inneholder enkle 2 overskrifter i størrelse 2 med forskjellige titler først. Etter det har to "div" -merker blitt brukt. Den ytre “Div” -merket er spesifisert med ID “A” mens den indre “Div” -merket er spesifisert med ID “B” for differensiering i styling.
"Div" og kroppskoder er stengt her. Innenfor "head" -merket har vi brukt tittelkoden til tittelen denne HTML -websiden og stilkoden for å legge til litt styling til kroppen på websiden vår. Vi har brukt "#A" for å style den ytre "div" -merket ved å bruke ID -en "A". Forskyvningsposisjonen for denne "div" -delen er spesifisert med verdien "slektning". Bredde og høyde vil bli spesifisert som 200px med 5px solid crimson fargegrense rundt denne “div”. Posisjonen til den indre "div" -merket er satt til absolutt som er relatert til det tilstøtende elementet. Bredden og høyden for den indre "Div" -delen er satt til 75pixel med Crimson -grensen til 5px faststoff.
Topp- og venstre plass eller polstring er definert i forhold til den ytre delen for denne “Div”: Topp: 180px, og venstre: 7px. Koden vår er nå klar til å bli utført i nettleseren.
Bruken av den "relative" verdien for forskyvningsposisjonsegenskapen plasserer den ytre "div" -delen i forhold til de andre elementene på vår HTML-side. Mens bruken av "absolutt" posisjonsverdi sammen med å sette topp- og venstre polstring har plassert den indre "div" til midten av den ytre "div" -delen.
Eksempel 03: Offset-bane og offset-anker
La oss prøve å bruke Effses. Den samme tittelen er gitt til denne websiden. Innenfor kroppskoden har vi brukt tre-seksjoner for å lage forskjellige seksjoner på websiden etterfulgt av “div” -merker for å skille dem. Alle tre “div” -merker inneholder en enkelt tekst innen og har blitt spesifisert med tre forskjellige klasser: a, b og c. Hoveddelen av denne HTML -koden er stilkoden som inneholder mange CSS -egenskaper for å animere tre tagger. Alle tre “div” -merker inneholder eiendomsegenskapen for å bevege seg langs banen som er definert for den, slik at den ikke er så lineær bevegelse. Bredden og høyden på alle tre divelementene ville være henholdsvis 100 og 30 piksler. Animasjonen er satt til å flytte divelementer sammen med hastigheten på 3000 millisekunder uten å stoppe. Dermed brukes den uendelige attributtet. Her kommer seksjonselementet for styling. Bakgrunnsbildet ville være en lineær gradient og ville være 49 prosent gjennomsiktig fra toppen, 50 prosent svart fra venstre, høyre og midtre og 62 prosent gjennomsiktig fra bunnen. Hver seksjon vil også inneholde 2-piksel solid kant og 10 piksler marginer fra bunnen.
Offset-anker-egenskapen har blitt brukt til å spesifisere et punkt i "div" -elementet for å reise langs banen som er satt av bruken av "offset-path" -egenskapen i den viktigste "div" -stylingen. Dette betyr at poenget med et "div" -element ville bevege seg på den spesielle ikke-lineære banen på vår websideskjerm. De forskjellige bakgrunnsfargene for disse “div” -elementene, tekstfargen og tekstinnretting for disse elementene er satt. La oss lagre og kjøre denne koden for å se endringene.
Alle tre divelementene vil bevege seg langs den ikke-lineære ikke-rettede banen i tre forskjellige seksjoner som vist nedenfor. Disse tre elementene er merket som en, to og tre; Flytter fra venstre til høyre på skjermen.
Vi har oppdatert koden og brukt de forskjellige verdiene for offset-bane-egenskap innen styling av denne HTML-koden. Denne veien ville få divelementene våre til å bevege seg i en sikksakk-bevegelse. Vi har også oppdatert høyden og bredden på disse DIV -seksjonene til 40 piksler. Bevegelsesavstanden legges også til mens resten er uendret.
Utgangen fra denne oppdaterte koden viser oss tre små divelementer med sikksakk-bevegelse langs hver av seksjonene sine.
Konklusjon
Denne artikkelen handler om bruk av forskjellige forskyvningsegenskaper for å style og animere de forskjellige elementene i en HTML -webside. Vi har gitt eksempel ved bruk av forskyvningsegenskapen for å legge til plass mellom grensen og omrisset av et spesifikt element. Et annet eksempel brukes til å demonstrere bruken av eiendomsegenskapen for å plassere det spesifikke elementet i forhold til andre elementer i kroppen. Vi har også prøvd å animere og flytte HTML-elementene på nettleserskjermen på en spesifikk bane ved hjelp av offset-anker, og forskyvnings-baneegenskaper.