KOMPOOS.NL

css: font

home » css » text-effects » css-font.html

sitemap

voorbeeld van het CSS font

uitleg CSS font procedure

Het css-font hierboven is niet "moeders mooiste". Het font dient er voor om tekst en cijfers op het scherm te "zetten" die volkomen onleesbaar voor bots zijn. Toepassingen kunnen captcha's of email-adressen zijn. Het css font is beschikbaar in drie "groottes". Kies (voor de juiste grootte op jouw pagina) een stylesheet hieronder, en plaats die in de head sectie van jouw pagina. De tekst (letters) die je in de body van jouw pagina wilt laten "verschijnen" kan je copy/pasten uit de lijst lager op de pagina. De code-regel onder de letter, het cijfer, of de tekens, behoren bij-elkaar. Voor alle duidelijkheid: je hoeft niet de letter zélf te plaatsen. Alleen de html-code (die direct ónder de letter staat) moet je gebruiken.

stylesheet voor het css font (groot font)

<style type="text/css">
	.css{
		display:block;
		width:0.5em;
		height:1em;
		float:left;
		margin:0.1em;
		background:transparent}
	.css b{
		display:block;
		overflow:hidden;
		height:0.2em}
	.a,.z{width:0.5em}
	.b,.c,.d,.g,.l,.n,.q{width:0.1em}
	.t,.m,.o,.s{width:0.2em}
	.x,.k,.r,.p,v{width:0.3em}
	.u,.y{width:0.4em}
	.a,.r{background:#000}
	.z{background:transparent}
	.t{margin-right:0.1em}
	.d,.y,.t,.k,.x,.m,.o,.p,.q{border-right:0.1em solid #000}
	.d,.u,.x,.m,.s{border-left:0.1em solid #000}
	.c{border-right:0.4em solid #000;background:#bbb}
	.b{border-left:0.4em solid #000;background:#bbb}
	.g,.n,.s{border-right:0.2em solid #000}
	.v{
		border-right:0.1em solid #bbb;
		border-left:0.1em solid #bbb;
		background:#000}
	.l,.n,.o{border-left:0.2em solid #333}
	.clear_links{clear:left; height:1em}
</style>

stylesheet voor het css font (normaal font)

<style type="text/css">
	.css{
		display:block;
		width:0.375em;
		height:0.075em;
		float:left;
		margin:0.075em;
		background:transparent}
	.css b{
		display:block;
		overflow:hidden;
		height:0.15em}
	.a,.z{width:0.375em}
	.b,.c,.d,.g,.l,.n,.q{width:0.075em}
	.t,.m,.o,.s{width:0.15em}
	.x,.k,.r,.p,v{width:0.225em}
	.u,.y{width:0.3em}
	.a,.r{background:#000}
	.z{background:transparent}
	.t{margin-right:0.075em}
	.d,.y,.t,.k,.x,.m,.o,.p,.q{border-right:0.075em solid #000}
	.d,.u,.x,.m,.s{border-left:0.075em solid #000}
	.c{border-right:0.3em solid #000;background:#bbb}
	.b{border-left:0.3em solid #000;background:#bbb}
	.g,.n,.s{border-right:0.15em solid #000}
	.v{
		border-right:0.075em solid #bbb;
		border-left:0.07em solid #bbb;
		background:#000}
	.l,.n,.o{border-left:0.15em solid #333}
	.clear_links{clear:left; height:1em}
</style>

stylesheet voor het css font (klein font)

<style type="text/css">
	.css{
		display:block;
		width:0.25em;
		height:0.05em;
		float:left;
		margin:0.05em;
		background:transparent}
	.css b{
		display:block;
		overflow:hidden;
		height:0.1em}
	.a,.z{width:0.25em}
	.b,.c,.d,.g,.l,.n,.q{width:0.05em}
	.t,.m,.o,.s{width:0.1em}
	.x,.k,.r,.p,v{width:0.15em}
	.u,.y{width:0.2em}
	.a,.r{background:#000}
	.z{background:transparent}
	.t{margin-right:0.05em}
	.d,.y,.t,.k,.x,.m,.o,.p,.q{border-right:0.05em solid #000}
	.d,.u,.x,.m,.s{border-left:0.05em solid #000}
	.c{border-right:0.2em solid #000;background:#bbb}
	.b{border-left:0.2em solid #000;background:#bbb}
	.g,.n,.s{border-right:0.1em solid #000}
	.v{
		border-right:0.05em solid #bbb;
		border-left:0.05em solid #bbb;
		background:#000}
	.l,.n,.o{border-left:0.1em solid #333}
	.clear_links{clear:left; height:1em}
</style>

copy/paste de html code voor de font-letter

A
<b class="css"><b class="v"></b><b class="x"></b><b class="a"></b><b class="x"></b><b class="x"></b></b>
B
<b class="css"><b class="b"></b><b class="x"></b><b class="b"></b><b class="x"></b><b class="b"></b></b>
C
<b class="css"><b class="v"></b><b class="x"></b><b class="u"></b><b class="x"></b><b class="v"></b></b>
D
<b class="css"><b class="b"></b><b class="x"></b><b class="x"></b><b class="x"></b><b class="b"></b></b>
E
<b class="css"><b class="a"></b><b class="u"></b><b class="b"></b><b class="u"></b><b class="a"></b></b>
F
<b class="css"><b class="a"></b><b class="u"></b><b class="b"></b><b class="u"></b><b class="u"></b></b>
G
<b class="css"><b class="c"></b><b class="u"></b><b class="x"></b><b class="x"></b><b class="c"></b></b>
H
<b class="css"><b class="x"></b><b class="x"></b><b class="a"></b><b class="x"></b><b class="x"></b></b>
I
<b class="css"><b class="v"></b><b class="t"></b><b class="t"></b><b class="t"></b><b class="v"></b></b>
J
<b class="css"><b class="v"></b><b class="t"></b><b class="t"></b><b class="t"></b><b class="l"></b></b>
K
<b class="css"><b class="x"></b><b class="m"></b><b class="r"></b><b class="m"></b><b class="x"></b></b>
L
<b class="css"><b class="u"></b><b class="u"></b><b class="u"></b><b class="u"></b><b class="a"></b></b>
M
<b class="css"><b class="x"></b><b class="n"></b><b class="x"><b class="q"></b></b><b class="x"></b><b class="x"></b></b>
N
<b class="css"><b class="x"></b><b class="o"></b><b class="x"><b class="q"></b></b><b class="s"></b><b class="x"></b></b>
O
<b class="css"><b class="v"></b><b class="x"></b><b class="x"></b><b class="x"></b><b class="v"></b></b>
P
<b class="css"><b class="b"></b><b class="x"></b><b class="b"></b><b class="u"></b><b class="u"></b></b>
Q
<b class="css"><b class="v"></b><b class="x"></b><b class="x"><b class="q"></b></b><b class="m"></b><b class="c"></b></b>
R
<b class="css"><b class="b"></b><b class="x"></b><b class="b"></b><b class="x"></b><b class="x"></b></b>
S
<b class="css"><b class="c"></b><b class="u"></b><b class="v"></b><b class="y"></b><b class="b"></b></b>
T
<b class="css"><b class="a"></b><b class="t"></b><b class="t"></b><b class="t"></b><b class="t"></b></b>
U
<b class="css"><b class="x"></b><b class="x"></b><b class="x"></b><b class="x"></b><b class="v"></b></b>
V
<b class="css"><b class="x"></b><b class="x"></b><b class="x"></b><b class="v"></b><b class="t"></b></b>
W
<b class="css"><b class="x"></b><b class="x"></b><b class="x"><b class="q"></b></b><b class="n"></b><b class="x"></b></b>
X
<b class="css"><b class="x"></b><b class="x"></b><b class="v"></b><b class="x"></b><b class="x"></b></b>
Y
<b class="css"><b class="x"></b><b class="x"></b><b class="v"></b><b class="t"></b><b class="t"></b></b>
Z

<b class="css"><b class="a"></b><b class="p"></b><b class="t"></b><b class="q"></b><b class="a"></b></b>
@
<b class="css"><b class="v"></b><b class="x"></b><b class="s"><b class="q"></b></b><b class="x"><b class="q"></b></b><b class="v"></b></b>
.
<b class="css"><b class="z"></b><b class="z"></b><b class="z"></b><b class="g"></b><b class="g"></b></b>

0
<b class="css"><b class="c"></b><b class="s"></b><b class="x"><b class="q"></b></b><b class="o"></b><b class="b"></b></b>
1
<b class="css"><b class="g"></b><b class="t"></b><b class="t"></b><b class="t"></b><b class="v"></b></b>
2
<b class="css"><b class="b"></b><b class="y"></b><b class="v"></b><b class="u"></b><b class="a"></b></b>
3
<b class="css"><b class="b"></b><b class="y"></b><b class="b"></b><b class="y"></b><b class="b"></b></b>
4
<b class="css"><b class="d"></b><b class="d"></b><b class="a"></b><b class="t"></b><b class="t"></b></b>
5
<b class="css"><b class="a"></b><b class="u"></b><b class="b"></b><b class="y"></b><b class="b"></b></b>
6
<b class="css"><b class="v"></b><b class="u"></b><b class="b"></b><b class="x"></b><b class="v"></b></b>
7
<b class="css"><b class="a"></b><b class="k"></b><b class="t"></b><b class="t"></b><b class="t"></b></b>
8
<b class="css"><b class="v"></b><b class="x"></b><b class="v"></b><b class="x"></b><b class="v"></b></b>
9
<b class="css"><b class="v"></b><b class="x"></b><b class="c"></b><b class="y"></b><b class="v"></b></b>

Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.