CSS effekter: avrundede hjørner av elementer

Syntax av Cascading Style Sheets er utformet så enkelt at muligheten for å få de mest uventede design er tilgjengelig selv langt fra programmering og utvikling av menneskelige sider. Kanskje det faktum at barn leke med klosser forbli i alles minne, bruker mangesidig erfaring i HTML, er lett CSS.

Imidlertid er dagens programmerings fortsatt svært langt fra å presentere konstruksjoner av virkeligheten. Inntil nå et hvilket som helst område (okkupert hva man ønsker blokkelementet) i hvilken som helst av dens betydning og den formelle tilsetting av en rektangulær form, som er dannet innenfor det ønskede kurveforløp linje.

Inntil nå, noen sirkel, avrunding radius, hvor en buet rett og så videre. P. Beskriver kompliserte matematiske ligninger eller svært små kuber, trapeser, trekanter eller andre flate elementer som er gjenkjennelig for øyet som et punkt på linjen.

Klassisk rett design

Det er ikke overraskende at fremgangen innen programmering og informasjonsteknologi legalisert rektangulær design. Innovative ideer kastet ikke bort tid på en avrundet form, men ikke glem å presentere til disposisjon for utbygger nok funksjoner og HTML-koder regler, CSS og relaterte programmeringsspråk.

Ethvert element brukt på siden er et rektangulært område, i hvilket det er tilordnet flere deler, hvorav i hvert tilfelle bør brukes bare behøves av hensyn krossbrauzernosti Krav markeringsfunksjonene bestemt innhold tilgjengelig spesifikke konstruksjoner.

Generelle regler for CSS

Cascading Style Sheets tilby å beskrive elementene som følger:

• Konstruksjon: verdi.

I dette tilfellet, eiendom - kan bestemt navn og verdien være enten et navn eller en liste over navn eller verdier.

Når det gjelder blokkelementer og behovet for å gjøre via CSS avrundede hjørner, er det fornuftig å bruke border-radius eiendommen og dens verdi i formatet "38px" eller "8 piksler 16px 24px 38px".

Hvis verdien gitt av et enkelt tall, vil det bli satt de for alle vinkler. Record alle fire verdier er:

• første nummer - til det øvre venstre hjørnet;
• den andre - til den øvre høyre;
• den tredje - til nedre høyre;
• siste - til nedre venstre.

Dele noen av reglene

Konsepter grensen, bilde og bakgrunn kan brukes sammen. Dette er normal, og nevnte regler ikke forstyrrer hverandre, danner den samlede sammensetning. Det viktigste - å ta hensyn til det faktum at navnet på hver av dem representerer, og hvordan den brukes.

Før gjennomføringen av dette, eller at element, er det viktig å gjennomføre noen eksperimenter og tester arbeid på flere nettlesere. Orientering til råd, anbefalinger, eksempler på tredjeparts eller CSS syntaks, avrundede hjørner, og så videre. N. Er sjelden bedre enn sine egne fersk praksis.

Det er viktig å forstå at grensen, bilde, i form av design vinkler - samme type konsept. Tegning kan presenteres ikke i png-format. Han skal utryddes av nettleseren, i henhold til regler fastsatt i CSS. Avrundede hjørner - omsorg utvikler, uavhengig av rett kildematerialet.

Funksjoner HTML, CSS fra nettlesere

Velkommen stil opptak engros - for alle nettlesere på en gang. Uansett klassiske eksempler på temaet "CSS: avrundede hjørner" tilbud om å skrive så:

bakgrunn: # FF7F00; / * Bakgrunn * /

kant: 1 px #CCCCCC fast stoff; / * Border * /

-moz-border-radius: 10px; / * CSS avrundede hjørner for Mozilla Firefox * /

-webkit-border-radius: 10px; / * ... for Safari og Chrome * /

-khtml-border-radius: 10px; / * ... Konquerer * /

border-radius: 10px; / * CSS avrundede hjørner for alle * / og så videre. N.

Men i de fleste tilfeller er det nok å spesifisere den siste regelen. Redundans bør bare brukes når det er et reelt behov.

Klassisk og flott tabell

Til tross for mange kontroverser støtte bordet (tr, td) og muligheten til å bruke div koder og span ( «praktfull" layout), objektiv praksis favoriserte alternativet rimelig nødvendig.

I divs har noen verdighet i de andre bordene. Hvis de ikke utfyller hverandre, og bare konkurrere, ville spørsmålet har raskt fordampet i en versjon som kombinerer de beste aspektene av tabeller og divs.

De fleste av nettstedene opprettet ved hjelp av CMS (content management system), og i disponering av utbygger kommer ikke bare et bredt spekter av "gigantiske" datasett av hundrevis av mapper, objekter, men også bord.

Tag [div | span], som sådan, ikke skiller seg ut, men det eneste som kommer nøyaktig på den fullstendige nåde av utbygger - en CSS-stilark. Og noen CMS skiller klart koden, en del av det fra utviklerens kreativitet og sine egne stiler av ekstra stil, og i tilfelle av endringer (f.eks css - avrunding i hjørnene av bordet), kan du alltid gjenopprette innstillingene og standardstiler.

Kurver og vinkler som ikke omfattes av syntaks

Du kan strengt følge alle reglene for HTML, CSS, men å ha et resultat, er de ikke gitt. Innkopiering av elementene til hverandre, er det mulig å oppnå en hvilken som helst region av en hvilken som helst konfigurasjon. Ved hjelp av PHP-utvikling på serveren, kan du sende til den besøkendes nettleser og noen stil filer til å feste dem riktig Javascript-kode i kroppen av HTML-fil eller en separat js-fil.

Enhver krets variant kan en hvilken som helst form for egenskapen element er CSS-regler! Avrundede hjørner - bare spesielle og reelle muligheter er mye bredere. I dette tilfellet, programmering dine egne objekter, kan du ikke ta hensyn til egenskapene til enkelte nettlesere, må du bare bruke koder og struktur av hypertekst språk, som oppfattes av alle, uten unntak nettlesere.

Ved hjelp av ideen om objektorientert programmering, kan du designe utseendet på et hjørne eller en kurve er åpenbart ikke forutsett av noen leser former. I dette tilfelle er det ikke nødvendig at dette vil være den hjørne av området, som var opprinnelig en rektangulær form. Det er viktig at komponentene i kurven beskrevet i form av CSS-regler, kombinert i en enkelt visuell Javaobjektkode og til rett tid på rett sted leseren, gjenspeiler seg i riktig form.

Denne teknologien ikke forstyrrer slike objekter til å realisere seg selv i en tre-dimensjonal planet eller vise animasjon.