Hvordan lage en kant på den ene siden. Komplekse css-kantstrukturer

Noen leksjoner tidligere så vi på en skjematisk representasjon av en nettsideblokk, og snakket også kort om CSS-egenskapen border , som kan brukes til å sette grenser for et element. Denne gangen skal vi se på denne egenskapen mer detaljert ved hjelp av eksempler.

Grensen er plassert mellom margen og polstringen. Dette betyr at marginen er bak grense. Kanten kan settes på alle fire sider (som om den omslutter blokken i en ramme), eller på én, to eller tre sider. CSS lar deg kontrollere tykkelsen, fargen og stilen på kantlinjer. La oss studere dette mer detaljert.

Border-width: kantbredde

Border-width-egenskapen angir bredden på kantlinjen. Oftest er denne størrelsen angitt i piksler. Du kan angi samme eller forskjellige bredder for alle fire kantlinjene, for eksempel:

/* alle 4 kanter er 2px brede: */ border-width: 2px; /* øvre og nedre kantlinjer er 2px brede, venstre og høyre er 4px: */ border-width: 2px 4px; /* øvre kantlinje - 2px, venstre og høyre - 6px, bunn - 3px: */ border-width: 2px 6px 3px; /* øvre kantlinje - 2px, høyre - 3px, nederst - 4px, venstre - 5px: */ border-width: 2px 3px 4px 5px;

I tillegg er det nøkkelord for å indikere kantlinjebredde:

• tynn - kant 2px bred;
• medium - kant 4px bred;
• tykk - kant 6px bred.

Border-color: kantfarge

Border-color-egenskapen spesifiserer fargen for kantlinjene. Farger kan spesifiseres i et hvilket som helst CSS-format: nøkkelord, heksadesimal eller RGB - avhengig av hva som passer best for deg. Analogt med den forrige egenskapen kan du angi enten én farge for alle kantlinjer eller velge forskjellige farger for hver kant.

Kantfarge: #FFFF00;

Du kan også angi en gjennomsiktig farge ved å skrive:

Kantfarge: gjennomsiktig;

Border-stil: kantstil

Takket være egenskapen i border-stil kan du gjøre en vanlig kant om til en prikket, dobbel eller volumetrisk - det er mange forskjellige betydninger. For å gjøre dette, bruk følgende nøkkelord:

• solid - solid grense;
• prikkete - kant av prikker;
• stiplet - stiplet kantlinje;
• dobbel - dobbel kantlinje;
• spor - volumetrisk hakkgrense;
• ås - en voluminøs kant med en tykk kant (i hovedsak en inversjon av forrige stil);
• start - ekstrudert kant;
• innfelt - en innrykket kantlinje (i hovedsak en inversjon av forrige stil).

Som med egenskapene for kantlinjebredde og kantfarge, kan hver blokkkant utformes forskjellig - for eksempel kan du gjøre topp- og bunnkantene stiplede, og høyre og venstre kantlinjer doble. Her avhenger alt bare av fantasi.

Border-stil: doble prikker;

Merk: V forskjellige nettlesere utseende grensene kan være litt forskjellige.

Felles CSS-egenskapsgrense: 3 i 1

For å style en kant trenger du ikke bruke alle de tre egenskapene ovenfor etter tur. Det er nok å vite om den generelle universelle eiendomsgrensen CSS, ved hjelp av hvilken du vil skrive en stil mye raskere og spare plass. For å gjøre dette, skriv ned verdiene for alle tre egenskapene i tilfeldig rekkefølge:

Kantlinje: 2px stiplet #FF0000;

Grenser for enkeltpartier

Med hjelp tilleggsegenskaper kantlinje i CSS, kan du style hver blokkkant individuelt. Følgende egenskaper vil hjelpe deg med dette:

• border-top - stil for toppkanten;
• grense-høyre - for høyre grense;
• border-bottom - for bunnkanten;
• border-venstre - for venstre kant.

border-top: 2px solid #0000FF; border-bottom: 7px dobbel #000080;

Resultater

Nå som du vet hvordan du lager grenser for blokker, kan du øve på å lage dem. Det er mange måter å kortfattet beskrive en stil uten å ha for mange linjer i den. CSS-fil. Kunnskap om prinsippene for cascading style sheets spiller en viktig rolle her. La oss se på et eksempel.

La oss si at du vil lage en kantlinje for en div med tre solide grå kantlinjer og en stiplet grønn bunnkant. Du kan skrive denne stilen slik:

Div ( kantlinje-høyre: 8px dobbel #FF0000; kantlinje-venstre: 8px dobbel #FF0000; kantlinje-bunn: 8px dobbel #FF0000; kantlinje-øverst: 4px prikket #FDD201; )

Men dette er et for langt innlegg. Alt dette kan skrives kort:

Div ( kantlinje: 8px dobbel #FF0000; kantlinje øverst: 4px stiplet #FDD201; )

Som nevnt ovenfor vil vi her bruke egenskapene CSS kaskade. Vi skriver først stilen for alle fire sidene av rammen, og spesifiserer deretter stilen separat for bunnkanten, og overskriver derved delvis den forrige stilen. Det er veldig viktig å følge denne sekvensen av linjer.

Minioppgave

Prøv å lage en kantlinje for div med dimensjoner på 200x200 piksler. Stilene for rammen skal være slik:

• Gjør topp- og bunnkantene solide fast, gi dem samme farge og en bredde på 5 piksler.
• Lag den venstre kantlinjen stiplet, 3 piksler bred, velg en annen farge enn den forrige.
• Gjør høyre kant dobbel dobbelt, 7 piksler bred, annen farge fra de to foregående.

Til slutt skal arbeidet ditt se slik ut (bortsett fra fargen du velger):

Resultat av oppgaven (se i Chrome)

Vlad Merzhevich

MED bruker CSS Du kan legge til en kantlinje til et element på flere måter. I utgangspunktet brukes selvfølgelig grenseegenskapen, som den mest universelle, samt omriss og, overraskende nok, boksskygge , hvis hovedoppgave er å skape en skygge. Deretter vil vi vurdere disse metodene og deres forskjeller seg imellom.

skissere eiendom

Den enkleste egenskapen for å lage rammer. Den har de samme parameterne som border , men skiller seg betydelig ut i noen detaljer:

• kontur vises rundt elementet (kanten inni);
• omrisset påvirker ikke dimensjonene til elementet (kanten legges til bredden og høyden på elementet);
• kontur kan bare settes rundt hele elementet, men ikke på individuelle sider (kanten kan brukes for hvilken som helst side eller alle samtidig);
• outline påvirkes ikke av filetradiusen spesifisert av border-radius-egenskapen (kanten påvirkes).

Spørsmålet oppstår - i hvilke tilfeller er disposisjon nødvendig, når dens rolle, til tross for de listede forskjellene, er fullstendig overtatt av grensen? Det er ikke mange situasjoner, men de oppstår:

• lage komplekse flerfargede rammer;
• legge til en ramme til et element når musepekeren svever over det;
• skjule grensen som nettleseren automatisk legger til noen elementer når den mottar fokus;
• for outline kan du angi avstanden fra kanten av elementet til rammen ved å bruke egenskapen outline-offset for å lage en .

Flerfargede rammer

Du må forstå at omrisset på ingen måte erstatter kant og lett kan eksistere sammen med det, som vist i eksempel 1.

Eksempel 1: Opprette en ramme

I i dette eksemplet en svart ramme er lagt rundt elementet, som er atskilt fra bakgrunnen med en hvit kant (fig. 1).

Ris. 1. Ramme rundt elementet

Ramme ved bruk: hover

Når du legger til en ramme via border, øker bredden på elementet, noe som er ganske merkbart når du kombinerer border og :hover-pseudoklassen. Det er to måter å "vinne" dette på. Det enkleste er å erstatte border med outline , som, som vi vet, ikke påvirker størrelsen på elementet (eksempel 2).

Eksempel 2: Frame on Hover

kontur er ikke alltid egnet, om ikke annet fordi avrunding av hjørner ikke påvirker det. Den andre metoden er egnet her - legg til en usynlig ramme eller en ramme som matcher bakgrunnsfargen, og endre deretter parameterne når du svever (eksempel 3). Da vil ingen forskyvning av elementet skje, siden rammen i utgangspunktet allerede eksisterer. Men vi husker alltid at bredden på elementet er summen av verdiene av bredde, kant til venstre og kant til høyre. Situasjonen er lik med høyde.

Eksempel 3: Frame on Hover

Kant rundt skjemafelt

I noen nettlesere (Chrome, Safari, siste versjoner Opera) vises en liten farget ramme rundt skjemafeltene når de får fokus (fig. 2). For å fjerne den, legg til verdien none til outline-egenskapen i stilene, som vist i eksempel 4.

Ris. 2. Ramme rundt margene

Eksempel 4. Fjerning av rammen

Rammer via box-shadow

Selv om egenskapen box-shadow er ment å legge til en skygge rundt et element, kan den også brukes til å lage grenser som ikke kan opprettes ved hjelp av kantlinje eller kontur . Dette er alt takket være det faktum at antallet skygger kan være ubegrenset, hvis parametere er oppført atskilt med kommaer.

For å få en ramme, bør de tre første parameterne settes til null, de er ansvarlige for skyggens posisjon og dens uskarphet. Den fjerde parameteren i i dette tilfellet er ansvarlig for tykkelsen på kanten, og den femte setter fargen på kanten. For den andre rammen er den fjerde parameteren lik summen av tykkelsene til de to rammene.

Eksempel 4 viser hvordan du legger til to rammer og en kantlinje til høyre ved å bruke en enkelt boks-skygge-egenskap.

Eksempel 4: Bruke box-shadow

Resultatet av dette eksemplet er vist i fig. 3.

Ris. 3. Rammer opprettet av egenskapen box-shadow

Den generiske kantegenskapen lar deg stille inn tykkelsen, stilen og fargen på kanten rundt et element samtidig. Verdiene kan være i hvilken som helst rekkefølge, atskilt med et mellomrom, vil nettleseren selv bestemme hvilken av dem som tilsvarer den ønskede egenskapen. For å angi en kantlinje bare på visse sider av et element, bruk egenskapene border-top , border-bottom , border-venstre , kantlinje-høyre.

kort informasjon

Betegnelser

	Beskrivelse	Eksempel
<тип>	Indikerer typen av verdien.	<размер>
A && B	Verdiene må skrives ut i den angitte rekkefølgen.	<размер> && <цвет>
A | B	Indikerer at du bare trenger å velge én verdi fra de foreslåtte (A eller B).	normal | small-caps
A || B	Hver verdi kan brukes uavhengig eller sammen med andre i hvilken som helst rekkefølge.	bredde || telle
	Grupper verdier.	[ beskjære || kryss ]
*	Gjenta null eller flere ganger.	[,<время>]*
+	Gjenta en eller flere ganger.	<число>+
?	Den angitte typen, ordet eller gruppen er valgfri.	innfelt?
(A, B)	Gjenta minst A, men ikke mer enn B ganger.	<радиус>{1,4}
#	Gjenta én eller flere ganger atskilt med komma.	<время>#

×

Verdier

Kantbreddeverdien bestemmer tykkelsen på kanten. Flere verdier i kantstil er gitt for å kontrollere utseendet. Navnene deres og resultatet av handlingen er presentert i fig. 1.

Figur 1. Rammestiler

border-color setter fargen på kantlinjen, verdien kan være i hvilket som helst format tillatt av CSS.

Eksempel

Dette eksemplet legger til en dobbel kant rundt blokken. Resultatet er vist i fig. 2.

Ris. 2. Bruk av grenseegenskapen

Objektmodell

En gjenstand.style.border

Merk

Nettleser Internet Explorer opp til den sjette versjonen inkludert, med en kanttykkelse på 1 px, vises den stiplet som stiplet . Med en tykkelse på 2px og høyere fungerer den stiplede verdien riktig. Denne feilen er fikset i IE7, men bare for alle 1px-kanter. Hvis en av blokkkantene har en tykkelse på 2px eller høyere, blir den stiplede verdien i IE7 til stiplet .

Kantstilen kan variere litt mellom nettlesere når du bruker groove , ridge , inset , eller outset verdier.

Spesifikasjon

Hver spesifikasjon går gjennom flere stadier av godkjenning.

• Anbefaling - Spesifikasjonen er godkjent av W3C og anbefales som standard.
• Kandidatanbefaling ( Mulig anbefaling ) - gruppen ansvarlig for standarden er fornøyd med at den oppfyller sine mål, men krever hjelp fra utviklingsmiljøet for å implementere standarden.
• Foreslått anbefaling Foreslått anbefaling) - på dette stadiet sendes dokumentet til W3C Advisory Council for endelig godkjenning.
• Arbeidsutkast - En mer moden versjon av et utkast som har blitt diskutert og endret for gjennomgang av fellesskapet.
• Redaktørens utkast ( Redaksjonelt utkast) - et utkast til standarden etter endringer ble gjort av prosjektredaktørene.
• Utkast ( Utkast til spesifikasjon) - det første utkastet til standarden.

×

CSS-grense Et element er en eller flere linjer som omgir elementets innhold og dets utfylling. Grensen er spesifisert ved å bruke stenografikantegenskapen. Rammestilen er satt med tre egenskaper: stil, farge Og bredde.

Dekorere rammer og grenser til HTML-elementer ved hjelp av CSS-egenskaper

1. Border-stil

Som standard tegnes alltid grenser på toppen av elementets bakgrunn, med bakgrunnen som strekker seg til ytterkanten av elementet. Rammestilen bestemmer visningen uten denne egenskapen, rammer vil ikke være synlige i det hele tatt. For et element kan du angi en kantlinje for alle sider samtidig ved å bruke egenskapen border-style, eller for hver side separat ved å bruke de kvalifiserende egenskapene i border-top-stil osv. Ikke arvet.

border-stil (border-top-style, border-right-style, border-bottom-style, border-venstre-style)
Verdier:
ingen	Standardverdien betyr ingen ramme. Fjerner også grensen til et element fra en gruppe elementer med en angitt verdi av denne eiendommen.
skjult	Tilsvarer ingen.
prikkete	prikkete
stiplet	stiplet
fast	fast
dobbelt	dobbelt
spor	spor
ås	ås
innfelt	innfelt
utgangspunktet	utgangspunktet
{1,4}	Viser fire forskjellige stiler for et elements kantlinje på en gang, bare for kantlinje-egenskapen: (kant-stil: solid prikkete ingen prikkete;)
første
arve

Syntaks

P (border-stil: solid;) p (border-top-style: solid;)

2. Rammefarge kantfarge

Egenskapen setter fargen på rammene på alle sider samtidig. Ved å bruke de klargjørende egenskapene kan du angi en annen farge for kanten på hver side av elementet. Hvis ingen farge er spesifisert for rammen, vil den være den samme som fargen på elementets tekst. Hvis elementet ikke har noen tekst, vil kantfargen være den samme som det overordnede elementets tekstfarge. Ikke arvet.

grensefarge (kant-topp-farge, kant-høyre-farge, kant-bunn-farge, kant-venstre-farge)
Verdier:
gjennomsiktig	Angir den gjennomsiktige fargen for kantlinjen. Samtidig forblir bredden på rammen. Kan brukes til å endre kantfarge når du holder musen over et element for å unngå at elementet forskyves.
farge	Fargen på rammene settes ved å bruke verdiene til eiendommen. (kantfarge: #cacd58;)
{1,4}	Viser fire forskjellige farger for et elements kantlinjer samtidig, bare for egenskapen kantfarge: (kantfarge: #cacd58 #5faf8a #b9cea5 #aab238;)
første	Setter egenskapsverdien til standardverdien.
arve	Arver egenskapsverdien fra det overordnede elementet.

Syntaks

P (kantfarge: #cacd58;)

3. Kantbredde

Rammebredden angis ved bruk av lengdeenheter eller nøkkelord. Hvis kantlinje-egenskapen er satt til ingen og elementets kantlinje er satt til en viss bredde, er kantbredden i dette tilfellet satt til null. Ikke arvet.

Syntaks

P (kantbredde: 2px;)

4. Sette en ramme med én egenskap

Border-egenskapen lar deg kombinere følgende egenskaper: border-width , border-style , border-color , for eksempel:

Div (bredde: 100px; høyde: 100px; kantlinje: 2px solid grå;)

I dette tilfellet vil de spesifiserte egenskapene brukes på alle grensene til elementet samtidig. Hvis noen verdi ikke er spesifisert, vil standardverdien ta dens plass.

5. Sette en ramme for en kant av et element

I tilfelle det er nødvendig å stille inn annen stil grenser for et element, kan du bruke stenografinotasjonen for den tilsvarende grensen.
Egenskapene som er oppført nedenfor kombinerer følgende egenskaper til én enkelt erklæring: kantlinjebredde , kantlinjestil og kantfarge . Listen over egenskaper er spesifisert i en gitt rekkefølge, mens en eller to verdier kan hoppes over, i så fall vil verdiene deres ta på standardverdiene.

Stilen til den øverste kantlinjen angis ved å bruke egenskapen border-top, bottom-border-bottom, venstre-kant-venstre og høyre-kant-høyre.

Syntaks

P (border-top: 2px solid grå;)

6. Ekstern konturkontur

Egenskapen spesifiserer en ytre kant rundt elementer (dvs. utenfor den normale grensen). Hovedformålet med denne egenskapen er å fremheve et element. I motsetning til grenseegenskapen, påvirker ikke bruk av denne egenskapen størrelsen eller plasseringen av elementet, fordi omrisset vises på toppen av elementblokken, som igjen kan føre til overlapping marginer element og nærområder.

Dessuten omgir den ytre konturen, i motsetning til elementets ramme, elementet på alle sider, og rammer det helt inn.

Den ytre omrisset er alltid rektangulær og følger ikke grensen til blokken som kantradius er spesifisert for.

Outline-egenskapen lar deg kombinere følgende egenskaper: outline-color , outline-style , outline-width . Hvis noen verdi ikke er spesifisert, vil standardverdien ta dens plass.

Div ( bredde: 100px; høyde: 100px; disposisjon: #cacd58 solid 2px; )

6.1. konturstil

Utseendet til den ytre konturlinjen er satt på samme måte som stilen til elementets ramme. Ikke arvet.

Syntaks

P (konturstil: rygg;)

6.2. Ytre konturfarge konturfarge

Fargen på den ytre konturen kan kun angis når angi verdi konturstil. Ikke arvet.

Syntaks

P ( konturstil: rygg; konturfarge: sølv; )

6.3. Ytre konturtykkelse konturbredde

Tykkelsen på den ytre konturlinjen settes på samme måte som tykkelsen på elementets ramme. Ikke arvet.

Syntaks

P ( konturstil: prikket; konturbredde: 5 px; )

Jeg er sikker på at du allerede er kjent med egenskapen border css. Vil du lære noe nytt du ikke visste fra før om css border? Vel, ikke bare vil du lære, men du vil også se flere nye ting du aldri visste før!

Ikke bare kan CSS3 brukes til å lage avrundede hjørner, men ren CSS-kode kan også brukes til å lage komplekse former. Tidligere kunne du bruke bakgrunnsbilde for å skape utseendet til avrundede hjørner. Takket være nye teknikker for bruk av border, kan vi gjøre dette med ren CSS-kode.

Grunnleggende om bruk av css border

Du er sikkert allerede kjent med standarden bruker grensen egenskaper:

Kant: 1px helt svart;

Koden ovenfor vil sende ut en 1px kant som vil være svart. Enkelt og greit. Du kan også utvide syntaksen litt:

Kantbredde: tykk; border-stil: solid; kantfarge: svart;

Som et tillegg kan du bruke spesifikke verdier for grensebredde-egenskapen, tre søkeord: tynn, middels, tykk.

Men å bruke den utvidede syntaksen er ikke alltid praktisk. La oss se på et eksempel når du trenger å endre fargen på en blokkramme når du holder musen. I dette tilfellet er det mye enklere å bruke stenografisyntaksen:

Box ( kantlinje: 1px solid rød; ) .box:hover ( kantlinje: 1px solid grønn; )

En mer elegant og enklere måte å gjøre dette på er:

Box ( kantlinje: 1px solid rød; ) .box:hover ( kantfarge: grønn; )

Som du kan se, er den avanserte teknikken også nyttig når vi bare endrer noen egenskaper: bredde, stil, farge og andre.

Grense-radius

Grense-radius– Dette er den «gyldne» egenskapen til CSS3 – den første, mest vanlige egenskapen som har blitt praktisk og nyttig. Med unntak av IE8 og versjoner nedenfor, viser alle nettlesere avrundede hjørner ved å bruke dette.

Selv om det er nødvendig å bruke spesielle prefikser for Webkit og Mozilla for at stylingen skal være riktig.

Webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;

I dag kan vi fjerne de spesielle prefiksene og bruke standard kantradiusform.

Et annet privilegium er at vi kan bruke spesielle betydninger for hver side av blokken:

Border-top-venstre-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 30px; kant-nederst-venstre-radius: 0;

I koden ovenfor kan å sette kant-øverste-høyre-radius og kant-nederst-venstre-radius til "null" oppnå noen fantastiske former. Selv om elementet kan arve noen egenskaper som må tilbakestilles.

I likhet med marg og polstring kan vi komprimere syntaksen:

/* øverst til venstre, øverst til høyre, nederst til høyre, nederst til venstre */ border-radius: 20px 0 30px 0;

Som et eksempel på bruk av egenskapen border-radius, vil jeg vise deg en "sitron" som designere ofte bruker når de designer nettsteder:

Sitron ( bredde: 200px; høyde: 200px; bakgrunn: #F5F240; kantlinje: 1px solid #F0D900; kantradius: 10px 150px 30px 150px; )

La oss gå utover det grunnleggende

Mange designere har all kunnskapen inne css-områder grenseeiendommer slutter her. Men det er noen andre kule ting du kan bruke til å lage fantastiske ting!

Komplekse css-kantstrukturer

Det er mange teknikker for å lage design ved hjelp av komplekse kantstrukturer. La oss for eksempel se på følgende...

Border-stil

Vi bruker alltid mest kjente egenskaper solid, stiplet og prikkete. Men det er et par andre egenskaper i grensestil: rille og rygg.

Border: 20px groove #e3e3e3;

Eller i utvidet syntaks:

Kantfarge: #e3e3e3; kantbredde: 20px; border-stil: groove;

Selv om disse egenskapene er nyttige, er de ikke grunnlaget for å lage komplekse rammer.

Disposisjon

Den mest populære kreasjonsteknikken dobbel ramme- bruk av disposisjonseiendommen.

Boks ( kantlinje: 5px solid #292929; disposisjon: 5px solid #e3e3e3; )

Denne metoden fungerer utmerket, selv om den begrenser oss til bare to rammer. Noen ganger må du lage en gradientkant som består av mange lag... hvordan da?

Pseudo-elementer

Når disposisjonsteknikken ikke er tilstrekkelig, er et alternativt middel å bruke pseudoelementene:før og:etter. Med denne kan du legge til flere rammer til et element:

Boks ( bredde: 200px; høyde: 200px; bakgrunn: #e3e3e3; posisjon: relativ; kantlinje: 10px solid grønn; ) /* Lag to bokser med samme bredde på beholderen */ .box:after, .box:before ( innhold: ""; posisjon: absolutt venstre: 0;

Det ser ikke veldig elegant ut, men i det minste, det fungerer. Det er litt vanskelig å finne ut sekvensen av farger innenfor rammene... men du kan forstå.

Box-Shadow

En interessant "barns måte" å skape en lignende effekt på er å bruke CSS3 box-shadow-egenskapen:

Boks ( kantlinje: 5px helrød; boksskygge: 0 0 0 5px grønn, 0 0 0 10px gul, 0 0 0 15px oransje; )

I dette tilfellet var vi smartere og brukte en dedikert box-shadow-eiendom. Ved å endre x, y, uskarphet parametere til null, kan vi bruke forskjellige farger for å lage flere rammer.

Men det er et problem: i eldre nettlesere som ikke forstår box-shadow-egenskapen, vil bare én 5px rød ramme være synlig.

"Huske! Nettstedets design skal se ut på tvers av nettlesere, det vil si den samme i alle nettlesere. Inkludert eldre versjoner."

Endre vinkler

I tillegg til den som brukes enkel betydning border-radius, kan vi spesifisere to separate - ved å skille dem gjennom / vil vi indikere horisontal og vertikal radius.

For eksempel:

Kantradius: 50px / 100px; /* horisontal radius, vertikal radius */

... dette tilsvarer:

Border-top-venstre-radius: 50px 100px; border-top-right-radius: 50px 100px; kantlinje-nederst-høyre-radius: 50px 100px; kantlinje-nederst-venstre-radius: 50px 100px;

Denne teknikken er egnet for å lage unike blokkformer. Slik lager du for eksempel en innpakket papireffekt:

Boks (bredde: 200px; høyde: 200px; bakgrunn: #666; kant-top-venstre-radius: 15em 1em; kantlinje-nederst-høyre-radius: 15em 1em;)

CSS-skjemaer ved hjelp av kantlinje

Denne teknikken viser hvordan du kan lage CSS-skjemaer, mens du bruker elementer med null dimensjoner høyde og bredde. Overrasket? La oss se på et eksempel...

For de neste eksemplene vil vi bruke følgende markering:

...og følgende grunnleggende stil:

Boks (bredde: 200px; høyde: 200px; bakgrunn: svart; )

Mest vanlig eksempel bruker CSS former - skaper en flytende pil. Hemmeligheten til denne pilen ligger i å lage en kant med en annen farge for hver side. Sett deretter bredde- og høydeattributtene til 0.

Tilordne til div blokk pil klasse:

Pil ( bredde: 0; høyde: 0; kant-øverst: 100 piksler fast rød; kant-høyre: 100 piksler ensfarget grønn; kant-bunn: 100 piksler helt blå; kant-venstre: 100 px fast gul; )

For å demonstrere bruker vi først den utvidede syntaksen. Deretter kan vi fjerne ekstrakoden ved å bruke stenografisyntaksen:

Pil ( bredde: 0; høyde: 0; kantlinje: 100 px solid; kantfarge: rød grønn blå gul; )

Interessant, ikke sant? Nå skal vi installere gjennomsiktige farger på alle sider unntatt den blå siden.

Pil ( bredde: 0; høyde: 0; kantlinje: 100 px solid; kant-bunn-farge: blå; )

Det ble kjempebra! Men dette motsier semantisk layout , lag en .arrow div, bare for å legge til en pil på siden. Til dette formålet kan vi bruke pseudo-elementer, som er det vi skal gjøre nå.

Lag en taleboble

For å lage en taleboble trenger vi en liten bit ren CSS kode og en div-blokk.

Snakkeboble ( posisjon: relativ; bakgrunnsfarge: #292929; bredde: 200px; høyde: 150px; linjehøyde: 150px; /* vertikalt midtstilt */ farge: hvit; tekstjustering: senter; )

Snakkeboble:etter ( innhold: ""; )

På dette stadiet vil vi lage pilen vi laget før, legge den til elementet og alt som gjenstår er å plassere den:

Snakkeboble:etter ( innhold: ""; posisjon: absolutt; bredde: 0; høyde: 0; kantlinje: 10px solid; kantfarge: rød grønn blå gul; )

Hvis vi vil at pilen skal peke nedover, må vi sette alle grenser til transparente bortsett fra den øverste.

Snakkeboble:etter ( innhold: ""; posisjon: absolutt; bredde: 0; høyde: 0; kantlinje: 10px solid; kant-topp-farge: rød; )

Når vi lager dette CSS-form, kan vi ikke spesifikt angi størrelsen på pilen. I stedet kan vi angi egenskapen border-width, som vil tilordne en størrelse til pilen. Vi vil også sette posisjonen til pilen nederst i midten. Følgelig bruker vi verdiene øverst og venstre for dette.

Snakkeboble:etter ( innhold: ""; posisjon: absolutt; bredde: 0; høyde: 0; kantlinje: 15px solid; kant-top-farge: rød; topp: 100 %; venstre: 50 %; )

I tillegg trenger vi bare å gi den samme farge som blokken. Husk at når du plasserer, må du ta hensyn til størrelsen på de andre kantene, som er usynlige (15px). Vi vil også gi blokken avrunding i hjørnene.

Snakkeboble ( /* … andre stiler */ kant-radius: 10px; ) .tale-boble:etter ( innhold: ""; posisjon: absolutt; bredde: 0; høyde: 0; kantlinje: 15 piksler fast; border-top -farge: #292929 topp: 100% margin-venstre: /* juster for kantbredde */ )

Ikke verst, hva? Ved å bruke flere CSS-klasser og grensetriks kan du lage noe slikt.

/* Bruk av talebobler: Bruk klassene .speech-bubble og .speech-bubble-DIRECTION som vist nedenfor

*/ .taleboble ( posisjon: relativ; bakgrunnsfarge: #292929; bredde: 200px; høyde: 150px; linjehøyde: 150px; /* vertikalt midtstilt */ farge: hvit; tekstjustering: senter; kant- radius: 10px; font-family: sans-serif; ) .speech-bubble:after ( innhold: ""; posisjon: absolutt; bredde: 0; kant: 15px solid; ) /* Plasser pilen */ .speech-bubble-top:after ( border-bottom-color: #292929; left: 50%; bottom: 100%; margin-left: -15px; ) .speech-bubble-right:after ( border-venstre-color : #292929; venstre: 100%; margin-top: -15px; ; ) .speech-bubble-left:after ( kant-høyre-farge: #292929; topp: 50%; høyre: 100%; margin-top: -15px; )

Bonus! Vertikal sentrering innenfor blokken

For én tekstlinje kan du bruke linjehøyde. Men hvis du har to eller flere linjer tekst... Den beste løsningen vil sette display-egenskapen til tabell, og legge all teksten i et avsnitt. Slik ser det ut på html-oppmerking: