仓酷云

标题: DIV教程之CSS实例教程:利用CSS3完成完成笔墨突变办法 [打印本页]

作者: 小女巫 时间: 2015-1-15 23:15
标题: DIV教程之CSS实例教程:利用CSS3完成完成笔墨突变办法
使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
破洛洛文章简介：我们有宣布过CSS笔墨突变效果，可是实在那并非地道的基于CSS的突变，它必要一张半通明突变的png图片。明天我们将先容两种利用CSS3完成完成笔墨的办法。
之前，我们有宣布过CSS笔墨突变效果，可是实在那并非地道的基于CSS的突变，它必要一张半通明突变的png图片。明天我们将先容两种利用CSS3完成完成笔墨的办法。嗯，只要webkit扫瞄器撑持，请临时忽视别的扫瞄器。
1.-webkit-mask

在《CSS的将来：一些实验性CSS属性》中，我们提到了这个属性，相对Firefox只能用svg做mask，webkit则天真良多，图片和css3突变都可。最后注重到这类效果是在舜子的PJblog中：

.textGradient1{-webkit-mask:-webkit-gradient(linear,0%0%,0%100%,from(rgba(222,187,71,0.8)),to(rgba(36,142,36,0.2)));}

复制代码

不敷：这个办法是使用蒙板的通明度来完成的，而蒙板的色彩其实不能用于突变中，从例子中能够看到设置的突变色被忽视了，有效的只是alpha值。那末这里的突变要依附字体的色彩——也就是说，只撑持单色突变。
2.-webkit-background-clip:text

严厉来讲，这个办法必要几个属性组合，包含color/-webkit-text-fill-color和背景突变：

.textGradient2{background:-webkit-gradient(linear,0%0%,0%100%,from(#DEBB47),to(#248F24));color:transparent;/*-webkit-text-fill-color:transparent;*/-webkit-background-clip:text;}

复制代码

要点：

color/-webkit-text-fill-color的目标是一样的，就是让笔墨通明，由于别的扫瞄器不撑持上面的属性值，以是这里倡议接纳后者，color属性会让笔墨在别的扫瞄器中通明失落。
-webkit-background-clip属性的text值是webkit独占的，gecko、opera和IE9固然也撑持这个属性，可是其实不撑持text值，这是关头地点。
到如今人人应当能看到这个办法的道理是将笔墨挖空，从而显露背景致。以是背景致在这里是关头，而背景致的突变可使用任何色彩，以是，这个办法撑持真实的黑色突变。

这里是一个复杂的在线演示，预览效果：

固然，分离-webkit-text-stroke属性，你能够创立更酷的CSS突变效果。
固然，假如你有别的扫瞄器中完成纯CSS突变的办法，接待分享:)
</p>
搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。

作者: 柔情似水 时间: 2015-1-17 20:54
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 小魔女 时间: 2015-1-26 22:49
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

作者: 小妖女 时间: 2015-2-5 06:27
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

作者: 只想知道 时间: 2015-2-11 08:04
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

作者: 仓酷云 时间: 2015-3-2 01:24
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

作者: 谁可相欹 时间: 2015-3-11 04:16
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

作者: 飘灵儿 时间: 2015-3-17 22:10
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

作者: 分手快乐 时间: 2015-3-25 08:39
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

欢迎光临仓酷云 (http://www.ckuyun.com/)