Kantlinjer - Versionshistorik

PGJ den 31 oktober 2020 kl. 13.13

2020-10-31T13:13:50Z

← Äldre version		Versionen från 31 oktober 2020 kl. 13.13
Rad 10:		Rad 10:

	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:		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:
	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	border: 4px solid black;		border: 4px solid black;
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~
	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:		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:
	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	border-width: 4px;		border-width: 4px;
Rad 22:		Rad 19:
	border-color: black;		border-color: black;
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~
	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.		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.

	== <code>[[border]]</code>-egenskapen ==		== <code>[[border]]</code>-egenskapen ==
	Inparametrarna till <code>[[border]]</code> ser ut så här:		Inparametrarna till <code>[[border]]</code> ser ut så här:
	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	border: <stil> <bredd> <färg>		border: <stil> <bredd> <färg>
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~
	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.		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 ===		=== stil ===

PGJ: /* stil */

2019-01-13T14:32:48Z

stil

← Äldre version		Versionen från 13 januari 2019 kl. 14.32
Rad 35:		Rad 35:
	=== stil ===		=== 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.		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="~~450~~">		<codepen pen="rorOyq" tab="css,result" height="500">
	</codepen>		</codepen>

PGJ: /* färg */

2019-01-12T20:09:07Z

färg

← Äldre version		Versionen från 12 januari 2019 kl. 20.09
Rad 74:		Rad 74:

	Här är några exempel på hur man kan sätta olika färger på kantlinjer.		Här är några exempel på hur man kan sätta olika färger på kantlinjer.
	<codepen pen="WLKQWJ" tab="css,result" height="~~250~~">		<codepen pen="WLKQWJ" tab="css,result" height="300">
	</codepen>		</codepen>

PGJ: /* bredd */

2019-01-12T20:08:54Z

bredd

← Äldre version		Versionen från 12 januari 2019 kl. 20.08
Rad 67:		Rad 67:

	Här är några exempel på hur man kan sätta bredd på kantlinjer.		Här är några exempel på hur man kan sätta bredd på kantlinjer.
	<codepen pen="gZjPOG" tab="css,result" height="~~250~~">		<codepen pen="gZjPOG" tab="css,result" height="350">
	</codepen>		</codepen>

PGJ: /* border-egenskapen */

2019-01-12T20:08:21Z

border-egenskapen

← Äldre version		Versionen från 12 januari 2019 kl. 20.08
Rad 35:		Rad 35:
	=== stil ===		=== 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.		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="~~350~~">		<codepen pen="rorOyq" tab="css,result" height="450">
	</codepen>		</codepen>

PGJ: /* stil */

2019-01-12T20:08:06Z

stil

← Äldre version		Versionen från 12 januari 2019 kl. 20.08
Rad 35:		Rad 35:
	=== stil ===		=== 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.		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="~~250~~">		<codepen pen="rorOyq" tab="css,result" height="350">
	</codepen>		</codepen>

PGJ: /* border-egenskapen */

2019-01-11T21:47:49Z

border-egenskapen

← Äldre version		Versionen från 11 januari 2019 kl. 21.47
Rad 27:		Rad 27:
	== <code>[[border]]</code>-egenskapen ==		== <code>[[border]]</code>-egenskapen ==
	Inparametrarna till <code>[[border]]</code> ser ut så här:		Inparametrarna till <code>[[border]]</code> ser ut så här:
			<div class="well well-cyanide-light">
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	border: <stil> <bredd> <färg>		border: <stil> <bredd> <färg>
	</syntaxhighlight>		</syntaxhighlight>
			</div>
	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.		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 ===		=== stil ===

PGJ: /* Samlingsegenskaper */

2019-01-11T21:47:20Z

Samlingsegenskaper

← Äldre version		Versionen från 11 januari 2019 kl. 21.47
Rad 10:		Rad 10:

	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:		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:
			<div class="well well-cyanide-light">
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	border: 4px solid black;		border: 4px solid black;
	</syntaxhighlight>		</syntaxhighlight>
			</div>
	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:		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:
			<div class="well well-cyanide-light">
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	border-width: 4px;		border-width: 4px;
Rad 19:		Rad 22:
	border-color: black;		border-color: black;
	</syntaxhighlight>		</syntaxhighlight>
			</div>
	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.		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.

PGJ: /* Att sätta alla hörn samtidigt */

2019-01-08T20:22:17Z

Att sätta alla hörn samtidigt

← Äldre version		Versionen från 8 januari 2019 kl. 20.22
Rad 85:		Rad 85:

	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>.		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 pen="YdjwNQ" tab="css,result" height="250">
	</codepen>		</codepen>

PGJ: /* Att sätta alla hörn samtidigt */

2019-01-08T20:21:59Z

Att sätta alla hörn samtidigt

← Äldre version		Versionen från 8 januari 2019 kl. 20.21
Rad 84:		Rad 84:
	</codepen>		</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 <code>/</code>-tecken. Till exempel; <code>~~8px~~ / ~~10px~~</code>, vilket skulle ge en x-radie på <code>~~8px~~</code> och en y-radie på <code>~~10px~~</code>.		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="~~MZBKYR~~" tab="css,result" height="250">		<codepen pen="YdjwNQ" tab="css,result" height="250">
	</codepen>		</codepen>


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