Kantlinjer: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) |
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
||
| (37 mellanliggande sidversioner av samma användare visas inte) | |||
| Rad 1: | Rad 1: | ||
== Kantlinjer, eller <code>border</code> == | == Kantlinjer, eller <code>[[border]]</code> == | ||
Med hjälp av | Med hjälp av <code>[[border]]</code>-egenskaperna kan du styra hur kantlinjen kring en box ska se ut (om du utelämnar <code>[[border]]</code>-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. <code>[[border-top-color]]</code>, <code>[[border-bottom-color]]</code>, <code>[[border-left-color]]</code> och <code>[[border-right-color]]</code>. | ||
<div class="well well-meadow"> | |||
<code>outline</code>-egenskapen använder mestadels samma parametrar som <code>border</code>, så det mesta i denna sektion gäller för båda egenskaperna. | |||
</div> | |||
== 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 <code>[[border]]</code>. Med denna egenskap kan vi ange bredd, stil och färg i en och samma egenskapsangivelse. I grunden används den så här: | |||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
border: 4px solid black; | border: 4px solid black; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Ovanstående skulle skapa en kantlinje som är <code>4 px</code> bred, heldragen och svart. Vilket | Ovanstående skulle skapa en kantlinje som är <code>4 px</code> bred, heldragen och svart. Vilket är mycket kortare och snyggare än att behöva skriva: | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
border-width: 4px; | border-width: 4px; | ||
| Rad 14: | Rad 19: | ||
border-color: black; | border-color: black; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
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. | |||
Inparametrarna till <code>border</code> ser ut så här: | == <code>[[border]]</code>-egenskapen == | ||
Inparametrarna till <code>[[border]]</code> ser ut så här: | |||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
border: < | border: <stil> <bredd> <färg> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Man kan ange alla tre samtidigt eller om man vill kan man utelämna | 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. | |||
<codepen pen="rorOyq" tab="css,result" height="500"> | |||
Stilen kan anges | </codepen> | ||
Visar ingen kantlinje alls. | 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 <code>none</code> kommer ingen kantlinje att visas. | Liksom i fallet med <code>none</code> 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 <code>border-width</code> skulle bli. | 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 <code>border-width</code> 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. | 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. | En heldragen, solid linje. | ||
==== double ==== | |||
Två parallella, heldragna linjer. Sammanlagt fyller de upp den bredd som den beräknade <code>border-width</code> skulle bli. | Två parallella, heldragna linjer. Sammanlagt fyller de upp den bredd som den beräknade <code>border-width</code> 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. | 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. | 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". | 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". | Skapar en "3D-effekt" som gör att det ser ut som innehållet ligger en bit "längre ut". | ||
<code>border-radius</code> | === bredd === | ||
Bredden anges i vanliga [[Måttenheter_i_CSS|CSS-måttenheter]]. Dock så fungerar inte <code>%</code> med kantlinjer. | |||
Det är vanligt att använda sig av <code>px</code> här, då man oftast vill ha tunna linjer. | |||
Här är några exempel på hur man kan sätta bredd på kantlinjer. | |||
<codepen pen="gZjPOG" tab="css,result" height="350"> | |||
</codepen> | |||
=== färg === | |||
Anger vilken färg som ska användas för att rita ut kantlinjen. Anges såsom alla [[färg|webbfärger]]. | |||
Här är några exempel på hur man kan sätta olika färger på kantlinjer. | |||
<codepen pen="WLKQWJ" tab="css,result" height="300"> | |||
</codepen> | |||
== Rundade hörn, <code>border-radius</code> == | |||
<code>[[border-radius]]</code> 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. | |||
<code>[[border-radius]]</code> ä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. | 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. | 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 <code>1em</code> som avrundningsvärde, så kommer avrundningen att ha en radie på <code>1em</code>. Så här skulle det se ut: | |||
</ | <codepen pen="MZBKYR" tab="css,result" height="250"> | ||
</codepen> | |||
==== Att sätta varje hörn, var för sig | |||
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 <code>/</code>-tecken. Till exempel; <code>4em / 2em</code>, vilket skulle ge en x-radie på <code>4em</code> och en y-radie på <code>2em</code>. | |||
<codepen pen="YdjwNQ" tab="css,result" height="250"> | |||
</codepen> | |||
=== Att sätta varje hörn, var för sig === | |||
Följande skulle sätta det övre, vänstra hörnets avrundning till <code>1em</code>, högra topphörnet till <code>2em</code>, nedre bottenhörnet till <code>3em</code> och nedre vänsterhörnet till <code>4em</code>. | Följande skulle sätta det övre, vänstra hörnets avrundning till <code>1em</code>, högra topphörnet till <code>2em</code>, nedre bottenhörnet till <code>3em</code> och nedre vänsterhörnet till <code>4em</code>. | ||
< | <codepen pen="VqBevP" tab="css,result" height="250"> | ||
</codepen> | |||
</ | |||
== Nästa aktivitet == | == Nästa aktivitet == | ||
[[Layout]] | [[Layout]] | ||
[[Category:Webbutveckling]] | |||
Nuvarande version från 31 oktober 2020 kl. 13.13
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.
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.
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.
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.
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:
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.
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.