- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
在现代浏览器中,效果是使用嵌入框阴影和滤镜创建的。
对于 IE8 - 选择了伪元素。
对于 IE7 - 我使用包含在条件注释中的特殊标签。
演示: ( http://jsfiddle.net/8M5Tt/68/ )
/**
* Button w/o images
*/
html {
font-size: 62.5%;
}
body {
font: normal 1em/1em Arial, Tahoma, Verdana, sans-serif;
}
/* layout */
.btn {
display: inline-block;
height: 28px;
border-width: 1px;
border-style: solid;
width: 170px;
box-sizing: content-box;
overflow: hidden;
position: relative;
z-index: 1;
}
.btn {
margin: 15px;
}
.btn.btn_small {
width: 130px;
}
/* ie7 */
.lt-ie8 .btn .before,
.lt-ie8 .btn .after {
position: absolute;
right: -1px;
left: -1px;
display: block;
height: 3px;
}
.lt-ie8 .btn .before {
top: -1px;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=0 );
}
.lt-ie8 .btn .after {
bottom: -1px;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#80000000',GradientType=0 );
}
/* /ie7 */
/* ie8 */
.ie8 .btn:before,
.ie8 .btn:after {
content: ' ';
z-index: 1;
position: absolute;
right: -1px;
left: -1px;
display: block;
height: 3px;
}
.ie8 .btn:before {
top: -1px;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=0 );
}
.ie8 .btn:after {
bottom: -1px;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#80000000',GradientType=0 );
}
/* /ie8 */
/* typo */
.btn {
/* 28 / 14 = 2.57142857 */
font: bold 14px/2 Arial, Helvetica, Tahoma, sans-serif;
text-transform: uppercase;
}
.btn:active {
line-height: 2.4em;
}
/* color */
.btn {
background-color: #00cccc;
color: #fff;
border-color: #00a8a8;
border-radius: 3px;
cursor: pointer;
box-shadow:
1px 1px 4px rgba(255, 255, 255, 0.5) inset,
-1px -1px 4px rgba(000, 000, 000, 0.5) inset;
}
.btn:hover {
background-color: #00ebeb;
}
.btn:active {
box-shadow:
-1px -1px 4px rgba(255, 255, 255, 0.5) inset,
1px 1px 4px rgba(000, 000, 000, 0.5) inset;
}
/* green */
.btn_green {
background-color: #009900;
border-color: #009600;
}
.btn_green:hover {
background-color: #00c200;
}
/* red */
.btn_red {
background-color: #e00000;
border-color: #c13d00;
}
.btn_red:hover {
background-color: #f00000;
}
<!--
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
-->
<!--[if lt IE 7]>
<div class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en">
<![endif]-->
<!--[if IE 7]>
<div class="no-js lt-ie9 lt-ie8 ie7" lang="en">
<![endif]-->
<!--[if IE 8]>
<div class="no-js lt-ie9 ie8" lang="en">
<![endif]-->
<!--[if gt IE 8]><!-->
<div class="no-js no-ie" lang="en">
<!--<![endif]-->
<button class="btn btn_green btn_small ">
Send
<!--[if IE 7]> <span class="before"> </span><span class="after"> </span> <![endif]-->
</button>
<button class="btn">
Buy
<!--[if IE 7]> <span class="before"> </span><span class="after"> </span> <![endif]-->
</button>
<button class="btn btn_green">
Activate
<!--[if IE 7]> <span class="before"> </span><span class="after"> </span> <![endif]-->
</button>
<button class="btn btn_red">
Delete
<!--[if IE 7]> <span class="before"> </span><span class="after"> </span> <![endif]-->
</button>
</div>
主要问题:为什么过滤器对 IE8 中的伪元素不起作用?
更新:
我猜想过滤器对 css 生成的内容不起作用,尽管这个 MSDN page 中没有提到它。 .
我在 IE8 中通过对条件元素应用过滤器解决了我在 IE7 中的问题,就像我在 IE7 中所做的那样。
最终演示:(http://jsfiddle.net/matmuchrapna/8M5Tt/73/)
/**
* Button w/o images
*/
html {
font-size: 62.5%;
}
body {
font: normal 1em/1em Arial, Tahoma, Verdana, sans-serif;
}
/* layout */
.btn {
display: inline-block;
height: 28px;
border-width: 1px;
border-style: solid;
width: 170px;
box-sizing: content-box;
overflow: hidden;
position: relative;
z-index: 1;
}
.btn {
margin: 15px;
}
.btn.btn_small {
width: 130px;
}
/* ie78 */
.lt-ie9 .btn .before,
.lt-ie9 .btn .after {
position: absolute;
right: -1px;
left: -1px;
display: block;
height: 3px;
}
.lt-ie9 .btn .before {
top: -1px;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=0 );
}
.lt-ie9 .btn .after {
bottom: -1px;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#80000000',GradientType=0 );
}
/* /ie78 */
/* typo */
.btn {
/* 28 / 14 = 2.57142857 */
font: bold 14px/2 Arial, Helvetica, Tahoma, sans-serif;
text-transform: uppercase;
}
.btn:active {
line-height: 2.4em;
}
/* color */
.btn {
background-color: #00cccc;
color: #fff;
border-color: #00a8a8;
border-radius: 3px;
cursor: pointer;
box-shadow:
1px 1px 4px rgba(255, 255, 255, 0.5) inset,
-1px -1px 4px rgba(000, 000, 000, 0.5) inset;
}
.btn:hover {
background-color: #00ebeb;
}
.btn:active {
box-shadow:
-1px -1px 4px rgba(255, 255, 255, 0.5) inset,
1px 1px 4px rgba(000, 000, 000, 0.5) inset;
}
/* green */
.btn_green {
background-color: #009900;
border-color: #009600;
}
.btn_green:hover {
background-color: #00c200;
}
/* red */
.btn_red {
background-color: #e00000;
border-color: #c13d00;
}
.btn_red:hover {
background-color: #f00000;
}
<!--
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
-->
<!--[if lt IE 7]>
<div class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en">
<![endif]-->
<!--[if IE 7]>
<div class="no-js lt-ie9 lt-ie8 ie7" lang="en">
<![endif]-->
<!--[if IE 8]>
<div class="no-js lt-ie9 ie8" lang="en">
<![endif]-->
<!--[if gt IE 8]><!-->
<div class="no-js no-ie" lang="en">
<!--<![endif]-->
<button class="btn btn_green btn_small ">
Send
<!--[if lte IE 8]> <span class="before"> </span><span class="after"> </span> <![endif]-->
</button>
<button class="btn">
Buy
<!--[if lte IE 8]> <span class="before"> </span><span class="after"> </span> <![endif]-->
</button>
<button class="btn btn_green">
Activate
<!--[if lte IE 8]> <span class="before"> </span><span class="after"> </span> <![endif]-->
</button>
<button class="btn btn_red">
Delete
<!--[if lte IE 8]> <span class="before"> </span><span class="after"> </span> <![endif]-->
</button>
</div>
更新 2:
我解决了我的问题,但主要问题仍未得到解答:
“Why don't filters work on pseudo elements in IE8?”
开始赏金。
更新 3:我创建了 testcase仅适用于 ie8 上的过滤器(以及 -ms-filter):
但是过滤器仍然不想在伪元素上工作。
更新 4:我想Scotts answer最接近真相。
最佳答案
问题是“为什么过滤器在 IE8 中对伪元素不起作用?”以下是我所能收集到的最接近确定的答案。来源于this page上的信息.
gradient
过滤器是一个“程序表面”(与 alphaimageloader
一起)。程序表面定义如下:
Procedural surfaces are colored surfaces that display between the content of an object and the object's background.
仔细阅读。它本质上是对象内容和对象背景之间的另一个“层”。你看到问题的答案了吗? :before
和 :after
创建了什么……是的! 内容。具体为MSDN notes :
The ::before and ::after pseudo-elements specify the location of content before and after an element in the document tree. The content attribute, in conjunction with these pseudo-elements, specifies what is inserted.
The generated content interacts with other boxes as if they were real elements inserted just inside their associated element.
现在,如果生成的是内容,那么它不是包含内容的“对象”,而是内容本身(它恰好有一些类似于可能包含内容的元素对象的行为)。
因此,没有“对象”包含“内容”(因为它是内容),过滤器
可以在其间放置程序由伪元素(即“假元素”)生成的内容的表面。 gradient
必须应用到 object,然后程序表面放置在它和内容之间。
关于html - 为什么伪元素上的滤镜渐变在 IE8 中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10403916/
我正在使用 Inkscape 0.91。我想使用 Filters -> ABC 的 Noise Transparency 效果,但此较高版本的 Inkscape 中不存在该效果。我在网上看到,在更高的
SVG 滤镜 可以给 SVG 图形的添加特殊效果 SVG 滤镜 SVG有很多的滤镜,但本教程只会展示其中的两三种,其他的需要你可以依葫芦画瓢的使用 我们只需要记住 SVG 能提供什么样的滤镜,然
前言 本文主要给大家介绍了关于ios图片压缩、滤镜、剪切及渲染的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 主要内容: 1、图片基础知识的介绍 2、图片压缩
我想使用 VP8 在我的应用程序中编码视频。我在我的应用程序中使用 RGB24 格式,但 VP8 DirectShow 过滤器只接受 YUV 格式 (http://www.webmproject.or
我想要一个带有白色外发光的黑色文本,以便在彩色 map 上可读。这就是我以前所做的: Harald's Repose Harald's Repose 我想避免重复文本元素,因
如果我使用 camanJS 在图像上应用滤镜,一切都很好,但是当我单击第二个滤镜时,它需要返回到原始图像并将其应用到该图像上,但目前它将第二个滤镜放在仍具有第一个滤镜的图像。 这是我的 html 部分
我有 3 个 System.Drawing.Bitmap 对象。 RGB 前景、RGB 背景和每像素蒙版图像一个字节,其中 0 表示采用背景像素,1 表示采用前景像素。这三个都是相同的维度。 我选择使
谁能确认 Android BlurMaskFilter方法基于高斯模糊(而不是平均模糊)?我真的很惊讶这里的文档并不明确。 最佳答案 引用代码here ,我可以假设它是基于高斯模糊方法。 我完全同意您
本质上,我正在尝试使用 SVG 和 CSS ( like this ) 创建一个渐变 alpha 蒙版,因为 mask 属性是 no longer on the standards跟踪我正在探索 fi
我正在使用CSSGram在我的网站上使图像具有类似 Instagram 的滤镜。下面是向图像添加滤镜的方法: 如何将这种效果添加到网页中的所有图像,而不是使用 在每个图像之前,以及许多图像
我有一组带有背景图像的元素,这些元素上有一个 SVG 滤镜,使背景图像变灰。我需要它,以便当您将鼠标悬停在该元素上时,该 SVG 滤镜会淡化为透明,因此原始彩色图像会在没有滤镜的情况下显示。不幸的是,
如何访问 OpenCV 扩展图像处理模块?我特别需要一个过滤器:fastGlobalSmootherFilter。 我已将 OpenCV 3.2.0 合并到我的 C++ 项目中。我正在寻找这种方法:
看看下面的 CodePen 演示:http://codepen.io/anon/pen/vLPGpZ 这是我的代码: body { position: absolute; top:
请建议我如何在 Android 相机的运行时应用照片效果/滤镜?无需使用 JNI 、 OpenGl 和 open CV 。我只需要通过 Java 代码应用效果。 最佳答案 步骤 1. 将帧从 NV21
我正在尝试沿着特定路径在 Opengl 中渲染点 Sprite 。我将 Sprite 定义为 2D 纹理,并将其设置为使用 GL_NEAREST 作为 mag/min 过滤器。我还定义了一个包含一些
我想实现这样的目标: 此图片来自this应用程序。 我的问题是,我应该依赖像 this 这样的东西吗? ,自己做,或者即使有其他一些我不知道的第三个库,也可以推荐。 我试图获得更多的意见,而不是实际的
我使用 Pixastic 来更改 Canvas 上图像的亮度和对比度等简单效果。 但是,我一直没能找到将这些效果一起应用的方法。例如。应用亮度然后在这个已经变亮的图像上应用对比度,而不是原始图像。 使
我在使用 Core image 时遇到了问题。我正在做的是从 UIImageView 获取图像,然后使用我在教程中找到的一些代码(我是核心图像的新手)但是我想在我尝试时将棕褐色图像放回同一个 UIIm
我这里有一张图片: 我想在网站 theverge.com 中复制 css 样式(见下图) 我将在我的博客(主页)中使用它,因为我正在尝试复制 theverge.com 网站的内容。这就像在半透明渐变和
我想使用聚光灯效果,但它似乎只在 Chrome 中有效,在 Firefox 中看起来“刚刚好”,但在 Safari 中无法定位 (x,y,z)。 (其他浏览器未测试) 我尝试了不同的滤镜和原始单位,虽
我是一名优秀的程序员,十分优秀!