CSS Half Circle

Cascading Style Sheet spiller en viktig rolle i utformingen av og legger til effekter på HTML -innholdet. Sammen med HTML -tagger er CSS en viktig tag for å lage en hvilken som helst webside enten statisk eller dynamisk. Dessuten er alle tilpassede nettsteder vi ser på internett utviklet ved å bruke HTML og byggesteinen CSS. Denne stylingen kan være av forskjellige typer enten inline, intern eller ekstern. Men i denne artikkelen vil vi følge den interne stylingen. En halvsirkel vil bli opprettet og vil bli designet ved å følge HTML-stykket og CSS-koder. Brukeren må være klar over det grunnleggende om HTML -åpnings- og lukkekoder, og også CSS -erklæringen etter klasser og IDS. Med det blir det lettere å forstå opprettelsen av en sirkel.

Implementering av halv sirkel

En enkel implementeringssekvens av HTML- og CSS-tagger brukes sammen med grensen-radius-egenskapen til CSS. Åpne tekstredigereren og bruk følgende kode for å tegne en halv sirkel på en webside. For implementering av en halv sirkel i HTML og CSS, har vi brukt interne CSS som er erklært inne i taggen med åpnings- og lukkekodene. Start med HTML -kodene, åpne hodemerket. Så i det første trinnet har vi gitt tittelen til siden. Dette tittelnavnet vises på toppen av fanen i nettleseren på utførelsestidspunktet. Etter å ha stengt tittelkoden, vil vi erklære stilkoden. Først vil vi erklære margin og polstring av formen.

Forskjell b/w margin og polstring

Margin er plassen rundt gjenstanden du vil lage. Denne egenskapen brukes til objektjustering på siden, enten for å bevege seg på venstre eller høyre osv. Det er et gjennomsiktig område som ikke har noen bakgrunnsfarge. En margin omgir formen fra alle 4 sider.

Polstring er den delen som er til stede mellom det opprettede objektet og innholdet inne i objektet. Dette innholdet kan være en form, tekst osv. Padding -egenskapen spesifiserer hvordan et objekt ser ut i beholderen. Denne beholderen inneholder også en bakgrunnsfarge. Å øke eller redusere størrelsen på polstring påvirker størrelsen på innholdet inne i det.

Så her inne i stilkoden har vi erklært både margin og polstring som 0. Dette betyr at vi vil bruke justeringskodene manuelt ved å erklære formenes høyde og bredde. Det er nødvendig å erklære disse egenskapene som 0 i stedet for å eliminere dem fra koden fordi den regnes som auto hvis ikke erklært som null.

*
Margin: 0;
Polstring: 0;

Den tredje egenskapen relatert til form er bakgrunnsfargen hvit. Dette er standardfargen. Hvis du ikke nevner det, vil det alltid være hvitt. Deretter vil vi bruke stylingen av DIV. Div er en beholder som skal inneholde noen elementer inne i den. Det har ingen effekt på oppsettet eller innholdet før vi gir noen stil til det. Her har vi brukt mye effekt for DIV -beholderen. Alle effektene av formen brukes på DIV -beholderen for justeringene. Containerens plassering blir tatt som absolutt.

De to grunnleggende egenskapene til formen er plasseringen og retningen på formen. For å justere formen, vil vi bruke topp- og venstre attributter. 'Topp' vil avgjøre avstanden til formen fra øverste kant på websiden. Den venstre delen viser avstanden til formen fra venstre kant på siden. Begge egenskapene er tatt i prosent.

Topp: 20%;
Venstre: 10%;

Transform -funksjonen er en kraftig egenskap som brukes til å rotere, skjev, bøye eller oversette objektet. En av de mest brukte funksjonene er funksjonen 'Translate' som brukes til å flytte objektet fra det ene stedet til det andre. Når vi skaper en halv sirkel, har vi brukt to verdier for forskyvning fra venstre og topp i prosent. Vi har tatt begge verdiene med det negative tegnet for justeringen.

Transform: Oversatt (-50%, -50%)

Nå vil vi bruke noen effekter på formen som skaper en egenskap som høyden og bredden. Begge egenskapene er tatt i piksler.

Høyde: 100px;
Bredde: 200px;

Hva er grensen-radius-eiendommen, og hvorfor brukes den?

Grensradius er ryggraden i å skape en sirkel, eller en halvsirkel i HTML. Denne egenskapen spiller en viktig rolle for å runde hjørnene på kantene på grensen til et objekt. Å leke med grensen og vri dem mot sentrum gjør en perfekt sirkel. Parametrene kan være av 4 verdier. Grense-radius-egenskapen brukes til å gi verdien av grensens radius. De 4 verdiene er lengden, prosentvise, innledende og arveegenskaper.

Disse 4 verdiene er spesifisert i en spesifikk rekkefølge for å danne en radius av en grense:

• Øverst til venstre
• Øverst til høyre
• Nede til høyre
• Nede til venstre

Grensradius kan inneholde alle disse verdiene eller den tilpassede ved å fjerne en verdi. Hvis verdien av nederst til venstre fjernes, vil verdien være verdien av toppen av formen.

Border-Radius: 150px 150px 0 0;

For å lage en halv sirkel har vi tatt 2 verdier som 150px, og de to andre er erklært som null. Hvis vi tar alle verdiene som 150 eller noe annet antall nærmere det, vil den resulterende formen være en full sirkel eller en oval. Etter den justeringen av radius, har vi tildelt fargen til den røde formen. Nå vil vi også lukke stildelen og hodeseksjonen.

Inne i kroppsdelen av koden erklærer vi en div, bare åpningen og avsluttende kodene for div brukes her. All styling er erklært i stildelen av CSS.

Nå lagrer vi koden i tekstredigereren. Forsikre deg om at filen som er dannet må lagres med navnet som har en utvidelse av HTML. For eksempel prøve.HTML er filen, som vi jobber.

For å utføre tekstfilen, åpner du filen ved å velge alternativet 'Open-With' og velge hvilken som helst nettleser du ønsker. Ved å gjøre dette vil filikonet erstattes med nettleserikonet.

Du vil se at en halv sirkel er dannet med rød farge og de samme justeringene utføres som vi hadde erklært.

Konklusjon

En implementering av en halv sirkel i CSS gjennomføres ved å gi en kort introduksjon til HTML og CSS. En enkel tekstredigerer og en nettleser er ansvarlig for utførelsen av HTML- og CSS -koder i filen. Vi har brukt intern CSS for dette formålet. Videre er en viktig CSS-egenskap som er grense-radius-eiendom også definert her. Ved å følge denne funksjonen er en sirkel dannet, vi trenger bare å tilpasse noen verdier av den. Alle effektene er erklært i CSS -delen, kroppsdelen inneholder bare DIV -beholderen.