发新话题
打印

精通 CSS 滤镜(三)

精通 CSS 滤镜(三)


1、Alpha 滤镜2 t  m5 K/ G1 a. p: ~7 j
) S# o  e4 F' M  ]- K. J

: k1 L! T2 m" w8 | 语法:{FILTER:ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,* t( a- }- [" R  s; ?
startx=startx,starty=starty,finishx=finishx,finishy=finishy)}  
# |) c3 X$ }1 d: y
% e' }. t0 p7 z6 y4 e) C "Alpha"属性是把一个目标元素与背景混合。设计者可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标,可以指定点、线、面的透明度。他们的参数含义分别如下:+ d  R! s. q9 S  k! C- ^
“opacity"代表透明度水准。默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。”finishopacity"是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。“style" 参数指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表放射状、3代表长方形。”STARTX“和”STARTY“代表渐变透明效果的开始X和Y坐标。”FINISHX“和”FINISHY“代表渐变透明效果结束X和Y 的坐标。  
5 ^) T- N" |, F$ O; U! s' a, z' w8 h" P/ m" M5 ^' {
效果如下:  
) Q4 z& V5 p7 k: {! l
( ?/ j2 R2 h- G
5 A6 @% S: A6 B3 ]& z6 B1 B( W
. Y* B% X/ w0 T3 i" p
: r: u* s" O+ L+ g. J, F
3 V6 ?5 L/ z! \3 A' ?$ z( Q# \9 V0 R' C/ \

# }8 i) X0 H, Y9 B7 k' f/ i. b% h: k! _% t- S
8 w% @1 t) f7 R" H+ q% g

; H, f( w4 Z0 ^% G; o$ l1 g
& l; p- W6 D- t: `  Y& j# j7 k: ]0 H0 T; d$ D2 |% A

3 {# e6 h& ~/ }3 k" `; x! t  O8 r2 t2 U

* ~5 ]! ?0 L, E) m$ A) u" _4 M" G/ o, J  j, w7 V

6 B) C9 S- c: S5 }4 V% ?" ]6 O1 F( ]. m- C9 x

8 m9 P# V( F7 b. J4 z0 s: Q) `* E4 ]/ |! G5 S/ L6 {1 r3 u  V$ i
8 [% q7 ]- f& Z' R0 {; A2 g5 b! q. T

+ o) w* ~3 s/ O) o$ [* C' ]$ Y/ N& F
; \9 _2 l; L7 H

2 V/ f1 [, D. B# }2、Blur 滤镜  
! f8 D; W6 V0 `, U0 Z; }1 ?% Y4 F; Z! W+ P! H8 a
语法:对于HTML:{ilter:blur(add=add,direction=direction,strength=strength)}
9 Q: _8 j; R6 R  U, o 对于Script语言: [oblurfilter=] object.filters.blur: i- M- X2 w! U/ L4 O2 |
用手指在一幅尚未干透的油画上迅速划过时,画面就会变得模糊。”Blur"就是产生同样的模糊效果。; }" v( F/ F- @4 J- z! v
“ADD”参数是一个布尔判断“TRUE(默认)”或者“FALSE”。它指定图片是否被改变成印象派的模糊效果。模糊效果是按顺时针的方向进行的,“DIRECTION”参数用来设置模糊的方向。其中0度代表垂直向上,然后每45度为一个单位。它的默认值是向左的270度。“STRENGTH“值只能使用整数来指定,她代表有多少像素的宽度将受到模糊影响。默认是5个。对于网页上的字体,如果设置他的模糊”ADD=1“,那么这些字体的效果会非常好看的。如下:
; n+ [' a0 }& Z+ ]- J9 ^filter:blur(add=ture,direction=135,strength=10)  8 h  @* y+ Y+ j5 P$ E. c
' {$ O) j3 o. P3 h
4 y# q5 M3 c. w

5 a6 d/ B  }7 X! \% \! x我向你飞,雨温柔地缀!  
0 ]* j7 C( b, C1 w0 W2 _4 Q( z: t# d3 K
( Q3 Q- _% n' T4 v* a( E

) N6 @! E$ {' \9 n; k, d! K: p
/ r6 [4 s& ^( J# L  D" L5 `
  t" V; }7 x/ ~0 j2 {$ G
" ]1 p, k' H& i; y; d  M1 S5 P( M8 j3 X9 J3 U

) F) e3 v, k8 M5 {, U. G8 u. p0 c
  s4 G$ c, j- Y# e
* _, N  m) i/ f3 k1 s# A& `7 q4 g0 Y" l. `: i0 _( j& G* s
9 [! Y0 O& C- O6 W& G
0 A; |" S; W; ~1 E7 |% Z$ ~
' J6 Q) X* A( Q# D% Q* E& N
( U8 o! W: m0 K6 k7 X& k: E

( b5 q3 L6 `/ A. k2 j, z: Q1 d: K: V1 F/ @9 ]
; @# V7 Y0 F! }, B

4 w6 B; X8 f9 ?# G$ {# y* O" H4 {& g# ?
7 W& M2 d5 R2 ]6 @: Q

- O$ z7 P& }$ ^8 T" b8 X0 s. C/ a8 G/ b0 {/ o3 W0 k
9 G5 m; V/ g, |. ]
2 M1 A; f! p, |$ D
3、FlipH, FlipV 滤镜  0 b7 B$ U) F* z$ J
& G$ X+ S, u4 X- D) ?, R
语法:{filter:filph} ,{filter:filpv} 分别是水平反转和垂直反转,具体如下:
5 z" x2 k1 Y2 n" ^, o5 R  5 j# p3 A# ?9 J2 Y- X% H: x; \

: A8 P: T4 @9 Q6 c& o" m  f
( v% u( n# ]5 U" d$ ?4 H. M- W
, r4 |9 ^9 N8 V. S; ~( e* H. [. Z; h$ }4 N5 j9 }7 x
! x' E( X- {1 z% Z8 f$ y3 Z
7 l! `9 [! g7 e! T3 q

" Q+ \1 A4 |; X/ \% D: Y+ \1 [9 a; K4 i4 e8 w9 \% a1 M+ A
0 H. y7 p5 i4 w! H* D: j! B
. g, @! i% h* ?% o5 C9 @3 A* a4 E& v4 ~: z
# m- w; ]0 S5 T: H
8 W+ U* d7 r  s/ c; C

: L: L6 p# |! N: n  M& s8 F2 q/ w* V. \# u9 H* }4 \

2 j: Q4 t  o' O: U0 _6 q/ K
" s0 d  `, O0 t+ K$ O! H8 p) ~0 X" n" ]# q5 N
& z; T: W# S" r; f) P
) j! A" g, o. n4 T& y
. w3 h5 m( |9 o( u

: L5 G3 A; m6 h" d# ~
8 v6 ^( L/ I& L* r9 R. [& A7 [, y+ |7 v/ q

& g3 Y+ W, {) I$ H8 x+ _
9 ^% g. M9 U% d3 O5 Q4、Chroma 滤镜  
( k$ G" m5 t2 e: ]
" K$ \3 z& y5 Z+ j5 @+ I& z( K语法:{filter:chroma(color=color)}
3 b  a8 j9 ~& ~' g% A0 O8 o 使用”Chroma"属性可以设置一个对象中指定的颜色为透明色,参数COLOR即要透明的颜色。下面是兰色文字,然后用Chroma 滤镜过滤掉兰色,就成了下面的样子。
% Z2 j0 h; x6 Nfilter:chroma(color=blue)  
8 S4 W, N9 v5 W$ d  c6 Z# C; X) Q/ v+ [4 A( d

. ?2 M) ]: K5 k/ ]9 j
8 L) b% f6 b( c* q滴水檐坊  
1 K$ w0 ^: J3 z9 F2 U0 i- W6 P2 Z, {" \* w! ]* h- B- b
5、DropShadow 滤镜  8 E; X  `; I  w  A
7 E, w9 U0 I' D  k$ H; ]1 T& _" D
语法:{filter:dropshadow(color=color,offx=ofx,offy=offy,positive=positive)}  
8 m  _+ t/ k5 G' f5 q: m6 S  |: ]
“DropShaow"顾名思义就是添加对象的阴影效果。其工作原理是建立一个偏移量,加上较深。"Color"代表投射阴影的颜色,"offx"和"offy"分别是X方向和Y方向阴影的饿偏移量。"Positive"参数是一个布尔值,如果为“TRUE(非0)”,那么就为任何的非透明像素建立可见的投影。如果为“FASLE(0)”,那么就为透明的像素部分建立透明效果  ( J9 c* R1 l  ]
- K( ]) ~" ?( X
! f  b& L2 n. k' i5 ~

7 Q; D' a5 ?, w1 U7 |
( F# [- @$ i6 P& X1 _0 L$ J( z3 L5 q# x+ @' m0 f7 Y7 A

. Y9 Z) M$ i9 H# Q
( X9 e% f, f6 R, S3 ~* e, {
, K3 Z2 C9 j+ G" ]
6 `) ]$ c/ Q- q5 L3 d0 ]
! l$ E0 `# O0 e) {' t- W0 S' c1 J# @: E+ W5 `
6 j7 Z( p# d: Q9 ^

( A  \5 Q3 j8 l7 k
. |% x. N) ^) z  {3 g* t8 a8 b6 T$ g& `

0 j* q& v% [( Q$ e* e7 y# M9 Z2 R+ Q' {. e2 t. _
正常文字% b/ a2 U* F9 H& W  i0 P' |
) H8 E- o" t7 c% z/ z2 F
dropshadow(color=gray,offx=5,offy=5.positive=0)后的文字
% }1 _- v- K( _- W2 e: B, {- @
! Q- B* |; n7 n- i" l9 z5 u6、Glow 滤镜  
2 `3 m' _1 ?* _0 Y5 l6 g5 u7 F+ }! M5 v' t1 f9 x6 R2 O) `7 ]
语法:{filter:glow(color=color,strength)}
" e9 z' F: ?* \, b/ r1 I2 b当对一个对象使用"glow"属性后,这个对象的边缘就会产生类似发光的效果。“COLOR”是指定发光的颜色,“STRENGTH”则是强度的表现,可以从1到255之间的任何整数来指定这个力度。
$ I* l/ z8 q5 N+ qfilter:glow(color=red,strength=10) 后的效果  
. Z. t6 N/ h7 r5 e: d& n
5 N+ m3 o! d$ Q, D* g3 k* ~1 i0 i- U" x0 n% V1 a7 i
1 h7 Q+ L) R  e; ?. J, V* h
滴水檐茶坊   
9 p/ |& Z7 y6 K, L8 o! o
# O" S7 Y% o; {+ x: Xfilter:glow(color=#ffff00,strength=5) 后的效果  3 u; [% A4 e& y. I

" g! C& I5 \+ E: q/ O4 d) D3 d! h. l

# Q9 T" K  N5 W. w' P! h滴水檐茶坊   
6 b. H( H4 F3 O; K  h1 z7 L
7 U7 m$ i% ]) M% L/ I. }1 F8 M  O- t7 \8 W" I" W2 `- Q
6 e8 A: ~* L7 w1 O) o
好象可以把PhotoShop踹到一边了,是吗?



点击图标进入精品网摘收藏 欢迎大家加入网络收藏夹

TOP

发新话题