Kantlinjer

Från Webbling
Hoppa till: navigering, sök

Kantlinjer, eller border

Med hjälp av border-egenskaperna kan du styra hur kantlinjen kring en box ska se ut (om du utelämnar border-egenskaperna så blir boxen helt enkelt kantlös). Det finns ett tjog CSS-egenskaper som hanterar kantlinjer. Anledningen till att de är så många är bl.a. att man kan sätta kantlinje-egenskaper på alla fyra kanterna, dvs topp, botten, höger och vänster. Detta gör att det finns flera uppsättningar egenskaper som gör samma sak, bara det att varje egenskap är avsedd för en specifik kant, t.ex. border-top-color, border-bottom-color, border-left-color och border-right-color.

outline-egenskapen använder mestadels samma parametrar som border, så det mesta i denna sektion gäller för båda egenskaperna.

Samlingsegenskaper

För att kunna skriva kantlinjeegenskaperna på ett mer koncist vis finns det så kallade samlingsegenskaper, där man kan ange flera olika egenskaper med en enda egenskapsangivelse (många andra CSS-egenskaper har liknande samlingsvarianter).

Samlingsegenskapen för kantlinjer är border. Med denna egenskap kan vi ange bredd, stil och färg i en och samma egenskapsangivelse. I grunden används den så här:

border: 4px solid black;

Ovanstående skulle skapa en kantlinje som är 4 px bred, heldragen och svart. Vilket är mycket kortare och snyggare än att behöva skriva:

border-width: 4px;
border-style: solid;
border-color: black;

I exemplen på Webbling används samlingsegenskaper så ofta som möjligt. Detta då det är det vanligaste sättet att ange CSS-egenskaper. Det är bra att jobba på ett "riktigt" sätt redan ifrån början.

border-egenskapen

Inparametrarna till border ser ut så här:

border: <stil> <bredd> <färg>

Man kan ange alla tre samtidigt eller om man vill kan man utelämna någon eller några av dem. Lägg dock märke till att om man utelämnar ett värde, sätts det till dess defaultvärde.

stil

Med stilen anger man grunden för hur kantlinjen ska se ut. Här är några exempel på hur kantlinjer kan sättas.

See the Pen rorOyq by Patrik Grip-Jansson (@PGJ) on CodePen.

Stilen kan anges med något av följande värden:

none

Visar ingen kantlinje alls. Detta är default-värdet. Om man vill ha en kantlinje, måste man alltså sätta linjetypen till något annat än default-värdet.

hidden

Liksom i fallet med none kommer ingen kantlinje att visas.

dotted

Visar kantlinjen som en serie av runda prickar (det kan se lite olika ut i olika webbläsare). Radien på varje punkt kommer att vara hälften av den storlek som den beräknade border-width skulle bli.

dashed

Visar linjen som en serie av korta linjer. Standarden anger inte hur linjerna ska se ut, så det kan definitivt se olika ut i olika webbläsare.

solid

En heldragen, solid linje.

double

Två parallella, heldragna linjer. Sammanlagt fyller de upp den bredd som den beräknade border-width skulle bli.

groove

En linje som ser ut som den skulle frästs ur sidan, så att linjen ser ut att ligga "längre in" i sidan.

ridge

En linje som gör att det ser ut som linjen ligger lite "framför" sidan.

inset

Skapar en "3D-effekt" som gör att det ser ut som innehållet ligger en bit "längre in".

outset

Skapar en "3D-effekt" som gör att det ser ut som innehållet ligger en bit "längre ut".

bredd

Bredden anges i vanliga CSS-måttenheter. Dock så fungerar inte % med kantlinjer.

Det är vanligt att använda sig av px här, då man oftast vill ha tunna linjer.

Här är några exempel på hur man kan sätta bredd på kantlinjer.

See the Pen gZjPOG by Patrik Grip-Jansson (@PGJ) on CodePen.

färg

Anger vilken färg som ska användas för att rita ut kantlinjen. Anges såsom alla webbfärger.

Här är några exempel på hur man kan sätta olika färger på kantlinjer.

See the Pen WLKQWJ by Patrik Grip-Jansson (@PGJ) on CodePen.

Rundade hörn, border-radius

border-radius används för att ange att en kantlinje ska ha rundade hörn. När man sätter rundade hörn, blir även innehållets/utfyllnadens kanter avrundade. Hur denna avrundning går till kan skilja sig mellan olika webbläsare.

border-radius är en samlingsegenskap. Det finns även separata CSS-egenskaper som möjliggör att man sätter rundningen för varje hörn var för sig, men det är oftast bättre att använda samlingsegenskapen.

Vi ska titta på de vanligaste sätten att ange avrundningen på hörn.

Att sätta alla hörn samtidigt

Det enklaste sättet att ange hörnens avrundning är att sätta ett och samma värde för alla hörn.

När man anger värde för avrundningen, anger man vilken radie som avrundningen ska ha. Det vill säga om man sätter 1em som avrundningsvärde, så kommer avrundningen att ha en radie på 1em. Så här skulle det se ut:

See the Pen MZBKYR by Patrik Grip-Jansson (@PGJ) on CodePen.

Man kan även ange x- och y-radie, så att det är möjligt att skapa elliptiska avrundningar. För att åstadkomma detta anger man två radier åtskilda av ett /-tecken. Till exempel; 4em / 2em, vilket skulle ge en x-radie på 4em och en y-radie på 2em.

See the Pen YdjwNQ by Patrik Grip-Jansson (@PGJ) on CodePen.

Att sätta varje hörn, var för sig

Följande skulle sätta det övre, vänstra hörnets avrundning till 1em, högra topphörnet till 2em, nedre bottenhörnet till 3em och nedre vänsterhörnet till 4em.

See the Pen VqBevP by Patrik Grip-Jansson (@PGJ) on CodePen.

Nästa aktivitet

Layout