Tipy a triky - vraciame sa k 8-bitom

Tí čo sa vo svojom detstve stretli s osem bitovými počítačmi si určite spomenú na farebné pásy, ktoré veľmi často demonštrovali farebnú paletu a možnosti počítača. Nedávno som sa pri práci s Dojo a špeciálnym farebným vykresľovaním dgridu stretol s náhodným efektom, ktorý sa mi tak zapáčil, že ak ho nedám do projektu História počítačov (pripravujem novú verziu aj s novými článkami), tak ho budem prezentovať aspoň v tomto článku.

Základom celého efektu je obrázok na pozadí. V sekcii CSS sú zapísané všetky základné farby no z hľadiska dosiahnutia rovnakého efektu je v príklade demonštrovaných len 10 farieb. Obrovskou výhodou predstaveného riešenia je fakt, že nie sú použité zápisy jazyka CSS3.

Príklad: Zápis do elementu <style>.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
div {
line-height: 24px;
padding: 2px 4px 2px 4px;
margin : 2px;
color : #efecff;
}
 
.transition-effect {
background: url("effect.png") #fff repeat-x;
}
 
.color-1 {
background-color: #ffffff;
}
 
.color-2 {
background-color: #c0c0c0;
}
 
.color-3 {
background-color: #808080;
}
 
.color-4 {
background-color: #000000;
}
 
.color-5 {
background-color: #ff0000;
}
 
.color-6 {
background-color: #800000;
}
 
.color-7 {
background-color: #ffff00;
}
 
.color-8 {
background-color: #808000;
}
 
.color-9 {
background-color: #00ff00;
}
 
.color-10 {
background-color: #008000;
}
 
.color-11 {
background-color: #00ffff;
}
 
.color-12 {
background-color: #008080;
}
 
.color-13 {
background-color: #0000ff;
}
 
.color-14 {
background-color: #000080;
}
 
.color-15 {
background-color: #ff00ff;
}
 
.color-16 {
background-color: #800080;
}
div {
	line-height: 24px;
	padding: 2px 4px 2px 4px;
	margin : 2px;
	color : #efecff;
}

.transition-effect {
	background: url("effect.png") #fff repeat-x;
}

.color-1 {
	background-color: #ffffff;
}

.color-2 {
	background-color: #c0c0c0;
}

.color-3 {
	background-color: #808080;
}

.color-4 {
	background-color: #000000;
}

.color-5 {
	background-color: #ff0000;
}

.color-6 {
	background-color: #800000;
}

.color-7 {
	background-color: #ffff00;
}

.color-8 {
	background-color: #808000;
}

.color-9 {
	background-color: #00ff00;
}

.color-10 {
	background-color: #008000;
}

.color-11 {
	background-color: #00ffff;
}

.color-12 {
	background-color: #008080;
}

.color-13 {
	background-color: #0000ff;
}

.color-14 {
	background-color: #000080;
}

.color-15 {
	background-color: #ff00ff;
}

.color-16 {
	background-color: #800080;
}

Príklad: Zápis do elementu <body>.

1
2
3
4
5
6
7
8
9
10
<div class="color-3 transition-effect">Line 3</div>
<div class="color-4 transition-effect">Line 4</div>
<div class="color-5 transition-effect">Line 5</div>
<div class="color-6 transition-effect">Line 6</div>
<div class="color-8 transition-effect">Line 8</div>
<div class="color-10 transition-effect">Line 10</div>
<div class="color-12 transition-effect">Line 12</div>
<div class="color-13 transition-effect">Line 13</div>
<div class="color-14 transition-effect">Line 14</div>
<div class="color-16 transition-effect">Line 16</div>
<div class="color-3 transition-effect">Line 3</div>
<div class="color-4 transition-effect">Line 4</div>
<div class="color-5 transition-effect">Line 5</div>
<div class="color-6 transition-effect">Line 6</div>
<div class="color-8 transition-effect">Line 8</div>
<div class="color-10 transition-effect">Line 10</div>
<div class="color-12 transition-effect">Line 12</div>
<div class="color-13 transition-effect">Line 13</div>
<div class="color-14 transition-effect">Line 14</div>
<div class="color-16 transition-effect">Line 16</div>

Obrázok: Aplikovanie 8-bitového efektu.

Obrázok: Bez 8-bitového efektu.

Obrázok s názvom effect.png je uložený ako príloha.

Záver

Verím, že sa vám tento jednoduchý efekt páči rovnako ako mne. Ak poznáte ďalšie zaujímavé riešenia pripomínajúce staré časy, podeľte sa o ne prostredníctvom komentára.

Tipy a triky - vraciame sa k 8-bitom

Záver

Komentáre

Pridať komentár