小编Mic*_*any的帖子

使用chrome/safari影响其他元素的CSS3转换

我有一个问题,我的css3转换正在影响页面上的其他元素,甚至导致它们闪烁.我看到另一篇关于此的帖子,但他们没有解决这个问题.

http://scosha.mybigcommerce.com/w107b/当您滚动浏览导航时,您会看到动画css3转换.它在firefox中工作正常,没有闪烁但是使用chrome和safari,效果非常明显,你可以在下拉菜单项和页脚文本中看到它.

flicker css3 css-transitions css-transforms

mfd*_*ath

2012 10-13

12
推荐指数

3
解决办法

1万
查看次数

为什么+ 180deg和-180deg的色调旋转不会产生原始颜色？

通过阅读HSL/HSV色彩理论,我得到的印象是色调分量是一个循环属性,每360度重复一次,并且可以独立于饱和度和亮度/值进行更改.如果我错了,请纠正我,但这些陈述逻辑上遵循先前的定义:

旋转色调360度产生相同的颜色
将色调旋转180度两次产生原始颜色
将色调旋转180度,然后旋转-180度,得到原始颜色

但是,只有选项1是正确的.旋转色调4次+90度会产生与原始颜色甚至不相似的颜色.

此外,使用-webkit-filter和SVG

<filter><feColorMatrix in="SourceGraphic" type="hueRotate" values="..." /></filter>

Run Code Online (Sandbox Code Playgroud)

不要为相同的旋转产生相同的结果.另一方面,SVG过滤器生成的颜色在浏览器中是一致的.

是否存在色调旋转的"隐藏"属性,使操作不相关？

webkit过滤器和SVG的示例可以在这里找到:http://jsfiddle.net/maros_urbanec/ARsjb/5/

graphics hsl svg colors svg-filters

Mar*_*nec

2013 10-13

12
推荐指数

2
解决办法

2999
查看次数

在SVG中绘制带有阴影的圆圈会剪切边缘

我试图在SVG中绘制一个带阴影的简单圆,但由于某种原因,顶部和左边被剪裁.这在Chrome和Safari中都会发生.

在此输入图像描述

我正在使用我在w3schools教程SVG Drop Shadows中找到的代码,修改为使用圆圈代替.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="2" dy="2" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="1" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <circle r="30" cx="50" cy="50" style="stroke:gray; fill:aliceblue; stroke-width:3px" filter="url(#f1)" />
</svg>

Run Code Online (Sandbox Code Playgroud)

我尝试移动圆圈,增加SVG容器的大小等,但得到了相同的结果.我还尝试使用Google搜索各种Drophadow教程,并始终修改示例代码以使用圆圈.每次都有相同的结果.

那么如何在SVG中绘制带有阴影的简单圆圈？

svg svg-filters

Yon*_*ony

2013 03-12

11
推荐指数

1
解决办法

8813
查看次数

CSS中的泛色和灯光颜色定义是什么？

非常酷,我才意识到有一些所谓的flood-color和lighting-color在CSS.有谁知道什么是flood-color和lighting-color和他们做什么？

这究竟是什么意思？:

'flood-color'属性指示用于泛洪当前过滤器原语子区域的颜色.关键字currentColor和ICC颜色的指定方式与"fill"和"stroke"属性的规范相同.

'lighting-color'属性定义了滤镜图元'feDiffuseLighting'和'feSpecularLighting'的光源颜色.

我们如何应用这些所谓的SVG效果？我已经尝试将灯光颜色设置为红色,但似乎没有任何效果.

html css css3 svg-filters

Pac*_*ier

2013 03-13

10
推荐指数

1
解决办法

7989
查看次数

在Visual Studio 11中复制一行代码的快捷方式

有没有办法在新的Visual Studio 11中使用键盘快捷键复制一行代码？
我在之前的版本中设置了一个小宏,但根据这篇文章,宏已停止使用.

我可以使用任何解决方法吗？

keyboard-shortcuts visual-studio visual-studio-2012

Sca*_*nth

2012 04-28

10
推荐指数

2
解决办法

1万
查看次数

如何让div自动设置自己的宽度？

如何设置DIV的宽度与float:left设置时的宽度相似,但是没有设置浮动？width:auto似乎没有(铬).

我想尝试以下类似的工作......

.center
{
    margin-left: auto;
    margin-right: auto;
    width: auto;
}

Run Code Online (Sandbox Code Playgroud)

css

Jus*_*808

2011 04-19

9
推荐指数

3
解决办法

6万
查看次数

intml svg in html - 如何优雅地降级？

请参阅下面的代码 - 我试图在我的网站中包含内联svg.我遵循一个巧妙的建议,使用svg开关元素,以便它在旧浏览器上优雅地降级.想法是支持svg的浏览器使用switch块中的第一个元素; 那些不会忽略所有svg标签的东西,只是显示埋在开关块的第二个元素(即foreignobject标签)中的img.

它工作得很好......除了我的svg(乐谱)必然包含文本元素,它们被旧版浏览器渲染(以及外部对象).

具有讽刺意味的是,使用条件注释很容易在IE8及以下版本中处理此问题.

对于其他较旧的浏览器,我在foreignobject中有一个javascript解决方法,它重新定义了svg文本的类.它有效...但感觉就像一个真正的黑客.

有没有更好的方法来做到这一点(更好的JavaScript,一个CSS解决方案,另一种方式做svg文本...)？

无论如何这里是代码的骨干:

<html>
<head>

<!-- this deals with elements using the svgtext class in old IE browsers -->
<!--[if lte IE 8]>
<style type="text/css">
.svgtext { display: none; }
</style>
<![endif]-->
<style type="text/css">
.donotdisplay { display: none; }
</style>

</head>
<body>

<svg ...>
<switch>
<g>
<!-- the svg goes here -->
<text class="svgtext">this gets rendered unless I deal with it</text>
</g>
<foreignObject ...>
<script type="text/javascript">
window.onload=function(){
  var inputs=document.getElementsByTagName('text');
  for(i=0;i<inputs.length;i++){
    inputs[i].className='donotdisplay';
  } …

Run Code Online (Sandbox Code Playgroud)

html javascript svg

Chr*_*haw

2012 05-06

9
推荐指数

1
解决办法

1993
查看次数

Mobile Safari灰度过滤器增加了模糊效果

我用这些过滤器去饱和图像:

img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(1);
}

Run Code Online (Sandbox Code Playgroud)

尽管过滤器似乎在Mobile Safari上对图像进行像素化,但效果很好.我不知道为什么会这样.是否有保密的秘密方法？或者我必须忍受这个浏览器的缺点吗？作为一个例子,这里有一些并列的截图,取自iOS模拟器:

使用灰度滤镜

没有过滤器

mobile-safari css3 svg-filters

Jez*_*mas

2013 03-12

9
推荐指数

1
解决办法

1786
查看次数

如何使用CSS或SVG创建鳄鱼(或锯齿)边框？

鳄鱼可能不是正确的词; 我欢迎对标题进行更正.

我希望容器能够像下图中那样有鳄鱼边框.

鳄鱼头衔

如果所讨论的元素具有可靠的背景,则border-image可以使用伪元素欺骗或CSS3 .然而,在这种情况下,容器的内容是非重复图案.

或者,图像本身可以具有边界.但是,由于图像扩展的方式(用于显示图像的动画),这是不可能的.

我能想到的唯一选择是SVG.

svg css3

Gaj*_*jus

2013 10-28

8
推荐指数

1
解决办法

3713
查看次数

如何在SVG中制作插入阴影

我需要制作一个带有插入阴影的盒子,就像CSS3插入盒子阴影一样.到目前为止我发现的是一个带有feGaussianBlur的过滤器,但问题是它还在盒子外面添加了一个阴影,这是我不想要的.这是我到目前为止的代码:

<svg>
    <defs>
        <filter id="drop-shadow">
            <feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="5" />
            <feGaussianBlur in="SourceAlpha" result="blur2" stdDeviation="10" />
            <feGaussianBlur in="SourceAlpha" result="blur3" stdDeviation="15" />
            <feMerge>
                <feMergeNode in="blur" mode="normal"/>
                <feMergeNode in="blur2" mode="normal"/>
                <feMergeNode in="blur3" mode="normal"/>
                <feMergeNode in="SourceGraphic" mode="normal"/>
            </feMerge>
        </filter>
    </defs>
    <rect x="10" y="10" width="100" height="100"
    stroke="black" stroke-width="4" fill="transparent" filter="url(#drop-shadow)"/>
</svg>

Run Code Online (Sandbox Code Playgroud)

我做了一个演示,还将此代码与所需的CSS制作结果进行了比较.滤镜不仅适用于矩形,也适用于梯形和更复杂的多边形.

我已经尝试过使用radialGradient,但由于这会使渐变呈圆形,所以这也不好.

svg css3 svg-filters

Joe*_*e50

2013 12-26

8
推荐指数

2
解决办法

1万
查看次数