Rev. 2.73

=============================================================
키 | 코드(숫자)
=============================================================

←(백스패이스) = 8
TAB = 9
ENTER = 13
SHIFT = 16
CTRL = 17
ALT = 18
PAUSEBREAK = 19
CAPSLOOK = 20
한/영 = 21
한자 = 25
ESC = 27

스패이스 = 32
PAGEUP = 33
PAGEDN = 34
END = 35
HOME =36

←(중간) = 37
↑(중간) = 38
→(중간) = 39
↓(중간) = 40

0 = 48
1 = 49
2 = 50
3 = 51
4 = 52
5 = 53
6 = 54
7 = 55
8 = 56
9 = 57

INSERT = 45
DELETE = 46

A = 65
B = 66
C = 67
D = 68
E = 69
F = 70
G = 71
H = 72
I = 73
J = 74
K = 75
L = 76
M = 77
N = 78
O = 79
P = 80
Q = 81
R = 82
S = 83
T = 84
U = 85
V = 86
W = 87
X = 88
Y = 89
Z = 90

윈도우(왼쪽) = 91
윈도우(오른쪽) = 92
기능키 = 93

0(오른쪽) = 96
1(오른쪽) = 97
2(오른쪽) = 98
3(오른쪽) = 99
4(오른쪽) = 100
5(오른쪽) = 101
6(오른쪽) = 102
7(오른쪽) = 103
8(오른쪽) = 104
9(오른쪽) = 105
.(오른쪽) = 110
/(오른쪽) = 111
*(오른쪽) = 106
+(오른쪽) = 107
-(오른쪽) = 109
F1 = 112
F2 = 113
F3 = 114
F4 = 115
F5 = 116
F6 = 117
F7 = 118
F8 = 119
F9 = 120
F10 = 121
F11 = 122
F12 = 123
NUMLOCK = 144
SCROLLLOCK = 145
=(중간) = 187
-(중간) = 189
`(왼쪽콤마) = 192
(중간) = 220

출처 : Ssemi.net

Comments

<head>
<script type="text/javascript">
function init(direction) {
  if (direction > 270) {
          direction = 0;
      }
      else {
          direction += 30;
      }
      document.all.shadowText.style.filter = "shadow(color=#000000, direction=" + direction + ")";
      setTimeout("init(" + direction + ")", 100);
  }
</script >
<script type="text/javascript">
<!--

count = 0
function expandText(which, start, finish, step, speed) { 
      
      if (count!=1) {
          document.all(which).style.visibility = "visible" 
          if (start < finish) {      	   
              document.all(which).style.letterSpacing = start + "px";  
	      start = start + step; 
	      setTimeout("expandText('"+which+"',"+start+","+finish+","+step+","+speed+")",speed);
          }	       
         

      }
}
//-->
</script>
<style type="text/css">
  .example {
            width: 150; 
            height: 70;
            line-height:50pt;
            font-size: 40pt; 
            font-family: "Arial Black";
            color: #494910
           } 

  .subject {
           Filter: glow(color=#ffcc00) dropshadow(color=#BDBE92);
           line-height:25pt;
           width: 100%; 
           font-family: arial; 
           color: #503F2F
          }  
body {  font-family: "Tahoma", "굴림"; font-size: 9pt; line-height: 16pt; color: #2f6f75; text-decoration: none; text-align: justify}
</style>
</head>
<body  ONLOAD="init(20, 20, 1)">

Example 1

Text is spread

위의 텍스트에 마우스를 올려보세요. Glow filter랑 Dropshadow filer를 적용하고 자바스크립트로 expand효과를 주었습니다. 요런 css필터효과는 cgi에 적용하면 입력한 값에 따라 바로바로 적용할 수가 있어 꽤 괜찮은 효과를 냅니다. 익스4이상에서만 제대로 보이지만, 넷스4에서는 그냥 일반텍스트로 나타나므로 별 문제는 없는 듯. ^^; Example 2 shadow filter와 자바스크립트를 이용해서 그림자에다 에니메이션 효과를 주는 예 입니다. 일반 그래픽 프로그램으로는 이런 이미지 파일은 좀 만들기가 버겁지 않나 생각됩니다.

Animation Shadow

Filters 일반적으로 css 필터는 style="Filter:필터명(필터속성)"으로 정의하면 됩니다. 한번에 두세가지 필터를 동시에 적용할 수도 있고, 텍스트뿐만아니라 이미지에도 적용이 가능합니다. 백문이 불여일견.. --;; 자세한 활용예는 아래에서 직접 보시고, 이곳에 있는 필터들을 바탕으로 다양하게 응용해 보시기 바랍니다. 백견이 불여일행.. --;;

style="Filter: Blur(Add = 1, Direction = 225, Strength = 4)"
Blur

: style="Filter: DropShadow(color=#777777, offX=3, offY=3, positive=0)"
DropShadow

: style="Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)"
Alpha

style="Filter: shadow(color=#333333,direction=135)"
shadow

style="Filter: glow(color=#ffcc00,strength=5)"
Glow

style="Filter: Wave(Add=0, Freq=2, LightStrength=10, Phase=10, Strength=5)"
Wave

style="Filter: Gray()"
Gray

style="Filter: FlipV()"
FlipV

style="Filter: FlipH()"
FlipH

출처 : xpert.new21.net

Comments

Untitled-3123copy.gif
moveobj.js moveobj.js (2.2 KB)
skripte.js skripte.js (5.6 KB)
spacer.gif spacer.gif (807 Byte)
links.htm links.htm (13.1 KB)

예제보기 재미있죠? 응용은 당신의 몫입니다.

잘정리된 컬러코드 미리보기 추가로 컬러코드가 자동으로 클립보드에 복사되도록 수정 하였다.

Comments