×
Creating solutions

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;
}
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>
Obrázok: Aplikovanie 8-bitového efektu.
Aplikovanie 8-bitového efektu.
Obrázok: Bez 8-bitového efektu.
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.


CSS,HTML,transition,background-color,background,8 bit
No part of this article may be reproduced without mention of the author and URL to this website.
For more information, see the About section.

Comments

Article has no comments.

Add a comment

Name (required)
Website
Message (required)
Submit
From latest