Nye CSS3 grense teknikker - dummies

Borders har vært en del av CSS fra begynnelsen, men CSS3 legger til noen virkelig spennende nye muligheter. Moderne nettlesere støtter nå grenser laget av et bilde, samt avrundede hjørner og bokseskygger. Disse teknikkene lover å legge til spennende nye evner til designene dine.

Bildegrenser

CSS3 lar deg bruke et bilde for en elementgrense. Mekanismen er ganske kraftig fordi den oppdager kantene på et bilde og "skiver" den for å lage kantene og kantene av grensen fra kantene og hjørner av bildet.

Rammebildet er lagret som ramme. png i samme katalog som HTML-filen. Den har et gjennomsiktig senter. Bruk følgende kode for å legge til en bildegrense rundt alle elementene på siden:

h2 {border-width: 15px; border-image: url ("frame. png") 25% gjenta; -webkit-border-image: url ("frame. png") 25% gjenta; -moz-border-image: url ("frame. png") 25% gjenta;}

Slik legger du til et grensebilde:

1. Hent bildet ditt.

   Bildet skal allerede være utformet som en slags ramme. Vanligvis vil det være en form rundt kantene, med enten et solidfargesenter eller et gjennomsiktig senter.

2. Angi kantbredden.

   Du må angi kantbredden direkte. Rammen på rammebildet er skalert slik at den passer til hvilken størrelse du vil ha.

3. Beregn hvor mye av bildens grense du vil ha.

   Hvis du slipper av prosent-tegnet, beregnes verdien i piksler. Du kan legge til fire verdier hvis du foretrekker å bruke forskjellige mengder av det opprinnelige bildet for hver grense.

4. Angi hvilken oppførsel du vil ha.

   Det opprinnelige bildet er nesten aldri den samme størrelsen som elementet du ønsker å omgir, så du kan gi et tips for å forklare hvordan nettleseren skal håndtere elementer som er større enn originalen. De vanligste valgene er gjenta (gjenta det opprinnelige bildet) eller strekke (for å ta opp hele plassen). Med et enkelt bilde som rammen. png brukes i dette eksemplet, vil resultatene være de samme.

   

Slik legger du til avrundede hjørner

Eldre CSS var kjent for å være veldig rektangulært, slik at webdesignere prøvde å myke deres design ved å legge runde hjørner. Dette var en vanskelig effekt å oppnå. CSS3 forenkler i stor grad skapelsen av avrundede hjørner med grense-radiusregelen.

Det er ganske enkelt å få avrundede hjørner på de nettleserne som støtter taggen:

hjørner. html h1 {bredde: 60%; bakgrunnsfarge: # 000066; farge: # 9999ff; border: # 9999ff 3px spor; margin: auto; tekst-align: center; border-radius:. 5em;}

Round Corners Demo

Regelen fungerer ved å kutte en bue fra hvert hjørne av elementet.Buen har den angitte radiusen, så for skarpe hjørner vil du ha en liten radius. Du kan måle radius i noen av de vanlige målingene, men piksler (px) og tegnbredde (em) er de mest brukte.

Grensen er ikke synlig med mindre elementet har bakgrunnsfargen eller grensen definert. Vær oppmerksom på at det er variasjoner av hver tag for å støtte bestemte hjørner. Dette kan være nyttig hvis du ikke ønsker å bruke samme radius til alle fire hjørner av elementet ditt. De nyeste nettleserne støtter nå den generiske grenseradiusregelen.

Du kan hente et nummer fra tidligere generasjons nettlesere ved å bruke det leverandørspesifikke prefikset. Hvis nettleseren din ikke forstår grense-radiusregelen, vil den bare lage de vanlige kvadratiske hjørner.

Slik legger du til en bokseskygge

Boksskygger blir ofte lagt til elementer for å skape dybdebelysning.

Boksskyggeeffekten er ikke vanskelig å oppnå, men det gjøres normalt som en del av en klassedepartement, slik at den kan brukes på nytt på hele siden. Her er noen prøvekode:

boxShadow. html. skygge {box-shadow: 10px 10px 10px # 000000; høyde: 200px; bredde: 200px; polstring: 1em; grense: 1 px solid svart; border-radius: 5px; bakgrunnsfarge: #EEEEEE;}

Box Shadow Demo
Denne boksen har en skygge

Det er mye lettere å legge til en boks i CSS3 enn den en gang var. Her er trinnene:

1. Definer en klasse.

   Ofte vil du bruke de samme innstillingene til en rekke elementer på en side, så bokseskyggen blir ofte kombinert med andre elementer som bakgrunnsfarge og kantlinje i en CSS-klasse som kan gjenbrukes på hele siden.

2. Legg til boksskyggeregel.

   De nyeste nettleserne støtter standard boksskyggeregelen, men det kan også være lurt å inkludere nettleserprefikser for å imøtekomme eldre browses.

3. Angi forskyvningen.

   En skygge er vanligvis kompensert fra rektangelet den tilhører. De to første verdiene angir horisontal og vertikal offset. Mål ved hjelp av noen av de vanlige CSS-målingene (normalt piksler eller ems).

4. Fastslå uskarphet og spredningsavstander.

   Du kan endre skyggenes adferd ytterligere ved å angi hvor raskt skyggen går ut og hvor langt det sprer seg. Disse er valgfrie parametere.

5. Angi skyggefarge.

   Du kan lage skyggen hvilken som helst farge du ønsker. Svart og grått er vanlige, men du kan få interessante effekter ved å plukke andre farger.

Mange andre skyggeeffekter er mulige. Du kan legge til flere skygger, og du kan også bruke nøkkelordet for å lage en indre skygge slik at det ser ut som en del av siden er kuttet ut.