Jobber med ny styling for Borders i CSS3

I dette segmentet i CSS3-serien vil vi gjennomgå grenseegenskaper som kan implementeres i dag, inkludert kantfarge; border-radius, som definerer avrundede hjørner; og kantbilder som bruker forskjellige bilder og eiendomsregler, funksjoner og funksjoner.

Grensefarge

Ved å bruke CSS3 grensefargeegenskapen kan du tilordne en grense på X piksler, som i 8px i eksemplet nedenfor, så kan du bruke opptil X farger for den grenseregelen, hver fargegjengivelse med en pikselbredde. Og hvis du bruker en standardkant på 10 piksler, men bare bruker seks eller syv farger, blir den siste fargen brukt på den resterende kantbredden.

Å lage en farget kant med CSS3-koding oppnås faktisk ganske enkelt med følgende eksempel ved å bruke fargekoder for gradert grå skygge:

 .grense { 
 grense: 
 solid 8px # B9B9B9; 
 -moz-border-bottom-colours: # 555 # 666 # 777 # 888 # 999 #aaa #bbb #ccc; 
 -moz-border-top-colours: # 555 # 666 # 777 # 888 # 999 #aaa #bbb #ccc; 
 -moz-border-left-colours: # 555 # 666 # 777 # 888 # 999 #aaa #bbb #ccc; 
 -moz-border-right-colours: # 555 # 666 # 777 # 888 # 999 #aaa #bbb #ccc; 
 polstring: 5px 5px 5px 15px; 
 } 

Den resulterende grensefarge CSS3-koden vil gjengi en grå falming kantboks som omgir innholdsteksten. Støttet for øyeblikket bare av Mozilla Firefox på dette tidspunktet, vil det se slik ut når det brukes i følgende eksempel HTML:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam condimentum. Praesent euismod auctor dui.

 Figur A viser hvordan det vises i Firefox 6.0.2: 

Figur A

Border-radius

Å legge avrundede hjørner til en grense betyr å legge til en grense-radius-egenskap og er bare et spørsmål om å legge til linjen som definerer antall piksler for hvert hjørne som skal avrundes. Å legge den følgende kodelinjen til det forrige eksempelets grensestil resulterer i de avrundede hjørnene i figur B. Syntaks for plassering refererer til øverst til venstre, øverst til høyre, nede til høyre, nede til venstre:
 -moz-border-radius: 35px 35px 35px 35px; 

Border-radius implementeres bare i Mozilla Firefox på dette tidspunktet; Slik gjengis det i Firefox 6.0.2:

Figur B

Det neste eksemplet resulterer i en annerledes stil avrundet kant med denne koden:

 -moz-border-radius: 35px 0px 35px 0px; 

Slik ser ut finjusteringen ut i Firefox 6.0.2:

Figur C

Border-bilde

En alternativ grensefunksjon ved CSS3 er grense-bildegenskapen, som lar deg lage egendefinerte grenser og fleksible bokser rundt HTML-innhold. Denne egenskapen lar deg definere et bilde som skal brukes i stedet for den normale grensen til et element. Grense-bildegenskapen fungerer for øyeblikket i Safari, Firefox 3.1+ og Chrome når du bruker prefikset henholdsvis -moz- og -webkit- . Syntaksen for å bruke grense-bildegenskapen inneholder tre deler som vist nedenfor ved bruk av CSS3-regelen:

 border-image: url (borderimage.png) XY Type; 

Egenskapen spesifiserer (1) URL-en til bildet som skal brukes som kantlinje, (2) hvor bildet skal defineres i høyde og bredde (X tilsvarer skivehøyde, Y tilsvarer skivebredde), og (3) hvordan nettleseren vil bruke disse seksjonene på grensekantene til elementet; type kan spesifisere om grensen blir gjentatt, avrundet eller strukket. Alternativene for type = er gjenta eller runde eller strekke .

Den første delen av eiendomsregelen er en videreføring av den velkjente bakgrunnsbilderegenskapen og hvordan de har blitt brukt i årevis. For dette eksempelet vil jeg bruke bildet Bgimage.png som vises nedenfor, og er 148px X 148px.

Figur D

Den andre delen av reglene for grense-bildegenskapen kan ha opptil fire verdier som spesifiserer kantbredden og er spesifisert i den typiske rekkefølgen på topp, høyre, bunn, venstre og kan uttrykkes som piksler eller prosent, der piksler er referert til med% -symbolet og piksler er oppført alene uten "px" -indikasjon, som vist i eksemplene nedenfor:

 border-image: url (Bgimage.png) 48 48 48 48 runde; 

eller

 border-image: url (Bgimage.png) 30% 30% 30% 30% 30% runde; 

Begge resulterer i følgende som gjengitt i Firefox 6.0.2:

Figur E

Den tredje delen av grensebildingsregelen forteller nettleseren hvordan du skal håndtere den midtre delen av bildet ditt, eller rundt elementets fire kanter.

Gjenta vil flislegge bildet, strekke vil skalere bildet, og rund vil fungere på samme måte som gjenta ved at det skalerer, eller avrunder til elementets høyde og bredde, enten et lag eller definert div. Du kan definere opptil to verdier, hvorav den første er øverste og nedre kant, og den andre er for venstre og høyre kant. Eksemplet nedenfor inneholder en definert grensebredde, Mozilla og Chrome-prefikser og en tilbakevendende grensebilledregel.

 border-bredde: 48px; 
 -moz-border-image: url (Bgimage.png) 48 48 48 48 gjenta strekning; 
 -webkit-border-image: url (Bgimage.png) 48 48 48 48 gjenta strekning; 
 bakgrunnsbilde: url (Bgimage.png) 48 48 48 48 gjenta strekning; 
 bredde: 400 piksler; polstring: 5px 5px; høyde: arve; 
Som du kan fortelle, er kantbildet nå strukket til 48px på alle kanter, som vist i eksemplet i figur F.

Figur F

Det neste eksemplet vil demonstrere bruken av den runde regelen der bildet blir gjentatt og skalert (eller avrundet) til høyden og bredden på det definerte laget det er inne i. Jeg bruker bildet i figur G og følgende CSS3-kode:

Figur G

 border-bredde: 15px; 
 -moz-border-image: url (bgborder1.png) 43 43 runde; 
 -webkit-border-image: url (bgborder1.png) 43 43 runde; 
 bredde: 400 piksler; polstring: 10px 10px; høyde: arve; 
Resultatet er grensen i figur H (ved å bruke samme eksempel HTML som ovenfor), vist i Firefox 6.0.2:

Figur H

Det neste eksemplet vil demonstrere bruken av strekningsregelen ved å bruke bildet i figur I og CSS3-koden nedenfor:

Figur I

 border-bredde: 15px; 
 -moz-border-image: url (bgborder2.png) 35 35 strekning; 
 -webkit-border-image: url (bgborder2.png) 35 35 strekning; 
 bredde: 400 piksler; polstring: 10px 10px; høyde: arve; 
Den resulterende bildegrensen er vist i figur J som vist i Chrome 14.0.835:

Figur J

I fremtidige segmenter som dekker CSS3-serien, vil jeg gjennomgå boksskygge, 3D-tekst, overgang inkludert roll-over-effekter og andre funksjoner som kan brukes i dag i mange moderne nettlesere.

Også:

  • Se først på CSS3 webdesignelementer
  • CSS3 ressurs gjennomgang: CSS3.info
  • Arbeide med CSS3 Layout Module for flere kolonner
  • Arbeider med CSS3 bakgrunnsbilder

© Copyright 2020 | mobilegn.com