zoukankan      html  css  js  c++  java

  • CSS TextShadow in Safari, Opera, Firefox and more

    from: http://maettig.com/code/css/text-shadow.html

    http://www.css3.info/preview/text-shadow/

    http://www.w3.org/Style/Examples/007/text-shadow

    http://www.ssi-developer.net/css/visual-filters.shtml

    效果显示:  http://www.dusystem.com/shizhenghuayuan.html 

    Multiple Shadows

    Safari 3 supported one shadow only. Only the first shadow was displayed. Safari 4 supports multiple shadows. Opera 9.5 supported at most six shadows. Later, this limitation was dropped. Please note that Opera painted the shadows in the wrong order. This was fixed in Opera 10.5.

    text-shadow: -1px -1px #666, 1px 1px #FFF;

    Text shadows were defined in 1997 and became applicable in 2009

    text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF;

    Text shadows were defined in 1997 and became applicable in 2009

    text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000;

    Text shadows were defined in 1997 and became applicable in 2009

    text-shadow: 1px 0 #F33, -1px 0 #33F;

    Text shadows were defined in 1997 and became applicable in 2009

    text-shadow: 2px 0 4px #600, -2px 0 4px #006;

    Text shadows were defined in 1997 and became applicable in 2009

    text-shadow: 0 6px 4px #33F, -3px -5px 4px #F00, 3px -5px 4px #0F0;

    Text shadows were defined in 1997 and became applicable in 2009

    text-shadow: 0 0 24px #C00, 0 0 4px #C00, 1px 1px 2px #333;

    Text shadows were defined in 1997 and became applicable in 2009

    Classical Shadows

    text-shadow: 1px 1px 2px #999;

    Text shadows were defined in 1997 and became applicable in 2009

    text-shadow: 2px 2px 3px #999;

    Text shadows were defined in 1997 and became applicable in 2009

    text-shadow: 0 0 8px #000;

    Text shadows were defined in 1997 and became applicable in 2009

    Glowing Borders

    text-shadow: 0 0 11px #0F0;

    Text shadows were defined in 1997 and became applicable in 2009

    text-shadow: 0 0 5px #FF0;

    Text shadows were defined in 1997 and became applicable in 2009

    text-shadow: 0 0 3px #F90;

    Text shadows were defined in 1997 and became applicable in 2009

    Unusual Effects

    text-shadow: 0 7px 11px #390;

    Text shadows were defined in 1997 and became applicable in 2009

    text-shadow: 0px -15px 0 #F00;

    Text shadows were defined in 1997 and became applicable in 2009

    text-shadow: 0 0 11px #FF6;

    Text shadows were defined in 1997 and became applicable in 2009

    text-shadow: 0 0 8px #000;

    Text shadows were defined in 1997 and became applicable in 2009

    Alpha Filter

    CSS Code Example:

    <span style="FILTER: Alpha(Opacity=80, FinishOpacity=70, Style=2); font-size:20pt;">Alpha Filter</span>

    Result:

    alpha-filter (2K)

    Possible Parameters:

    • Opacity 0 (fully transparent) - 100 (fully opaque)
    • Finishopacity 0 (fully transparent) - 100 (fully opaque)
    • Style shape characteristics of opacity gradient. 0 (uniform), 1 (linear), 2 (radial), 3 (rectangular)
    • startX X coordinate for opacity gradient to start
    • startY Y coordinate for opacity gradient to start
    • finishX X coordinate for opacity gradient to end
    • finishY Y coordinate for opacity gradient to end



    Blur Filter

    CSS Code Example:

    <span style="filter: blur(add=false, direction=135, strength=6); font-size:20pt;200px;">Blur Filter</span>

    Result:

    blur-filter (2K)

    Possible Parameters:

    • Add whether to add the original image to the motion-blurred image. True=added, False=not added.
    • Direction direction of the blur basically, in 45 degree increments from 0(top) clockwise to 315 (top left).
    • Strength in pixels how much the blur will extent. Default is 5.



    Glow Filter

    CSS Code Example:

    <span style="FILTER: Glow(Color=#ff0000, Strength=8); 200px;font-size:20pt;">Glow Filter</span>

    Result:

    glow-filter (3K)

    Possible Parameters:

    • Color colour for the shadow effect. Hex value.
    • strength intensity of the glow effect. 1 - 255. Gets away from "glow" at high values.



    Drop Shadow Filter

    CSS Code Example:

    <span style="FILTER: DropShadow(Color=#0066cc, OffX=5, OffY=-3, Positive=1);300px;font-size:20pt;">DropShadow Filter</span>

    Result:

    dropshadow-filter (2K)

    Possible Parameters:

    • Color colour for the drop shadow effect. Hex value.
    • offX number of pixels shadow is offset in x-axis
    • offY number of pixels shadow is offset in y-axis
    • positive non-zero value create drop shadow for any non-transparent pixel, false or zero value creates shadow for any transparent pixel in visual object.



    Shadow Filter

    CSS Code Example:

    <span style="FILTER: Shadow(Color=#00cc66, Direction=45);200px;font-size:20pt;">Shadow Filter</span>

    Result:

    shadow-filter (2K)

    Possible Parameters:

    • color colour of the shadow. Hex value.
    • direction directional offset of the shadow in 45 degree increments between 0 and 315 degrees.



    Wave Filter

    CSS Code Example:

    <span style="FILTER: Wave(Add=1, Freq=2, LightStrength=30, Phase=20, Strength=7); 200px;font-size:20pt;">Wave Effect</span>

    Result:

    wave-filter (2K)

    Possible Parameters:

    • add true (non-zero) adds waved effect to original, false (zero) does not.
    • freq number of waves in visual area.
    • lightstrength strength of light in wave effect from 0 - 100.
    • phase wavelength at which offset should start from 0 - 360.
    • strength intensity of wave effect.



    FlipV Filter

    CSS Code Example:

    <span style="FILTER: FlipV; 200px;font-size:20pt;">FlipV Filter</span>

    Result:

    flipv-filter (1K)



    FlipH Filter

    CSS Code Example:

    <span style="FILTER: FlipH; 200px;font-size:20pt;">FlipH Filter</span>

    Result:

    fliph-filter (1K)

    Possible Parameters:

    • n/a



    Chroma Filter

    CSS Code Example:

    <span style="FILTER: Chroma(Color=#9999cc); 200px;font-size:20pt;">Chroma Filter</span>

    Result:

    chroma-filter (1K)

    Possible Parameters:

    • Color Value of the color to be subject to chromakey transparency. Hex value.



    Grayscale Filter

    CSS Code Example:

    <span style="FILTER: Gray; 300px;font-size:20pt;">Grayscale Filter</span>

    Result: ?

    grayscale-filter (1K)

    Possible Parameters:

    • n/a



    Invert Filter

    CSS Code Example:

    <span style="FILTER: Invert; 300px;font-size:20pt;background:#eeeeee;">Invert Filter</span>

    Result:

    invert-filter (1K)

    Possible Parameters:

    • n/a



    Light Filter

    CSS Code Example:

    <span style="FILTER: Light; 200px;font-size:20pt;">Light Filter</span>

    Result:

    light-filter (1K)

    Possible Parameters:

    • n/a



    Mask Filter

    CSS Code Example:

    <span style="FILTER: Mask(Color=#9999cc; 200px;font-size:20pt;">Mask Filter</span>

    Result:

    mask-filter (1K)

    Possible Parameters:

    • color colour of the transparent regions. Hex value.



    X-Ray Filter

    CSS Code Example:

    <span style="FILTER: Xray; 200px;font-size:20pt;background:#eeeeee;">X-Ray Filter</span>

    Result:

    xray-filter (1K)

    Possible Parameters:
  • 相关阅读:
    Struts2的配置中：Could not find action or result 问题的解决方法
    Oracle 数据库 Record is locked by another user 问题解决办法
    设计模式六大原则（2）：里氏替换原则
    在PL/SQL中 自动复制转换StringBuffer的SQL
    反射setAccessible()方法
    对允许任意图片上传的发布内容模式的啊哈的想法
    如果你真的想做一件事，你一定会找到一个方法;如果你不想做一件事，你一定会找到一个借口.
    xaml 的 intellisense失效的解决办法
    Blog技术词汇之Rss篇 什么是Rss以及其定义[翻译]
    多个存储过程之间相互调用的原子性问题
  • 原文地址：https://www.cnblogs.com/geovindu/p/1857413.html
Copyright © 2011-2022 走看看