×
Vytvárame riešenia

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
Žiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.
Viac informácií nájdete v sekcii O projekte.

Komentáre

Článok neobsahuje zatiaľ žiadne komentáre.

Pridať komentár

Meno (povinné)
Web
Správa (povinné)
Odoslať
Od najnovších