仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1476|回复: 8
打印 上一主题 下一主题

[DIV+CSS] DIV教程之CSS实例教程:利用CSS3完成完成笔墨突变办法

[复制链接]
小女巫 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:15:06 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

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

在《CSS的将来:一些实验性CSS属性》中,我们提到了这个属性,相对Firefox只能用svg做mask,webkit则天真良多,图片和css3突变都可。最后注重到这类效果是在舜子的PJblog中:
  1. .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和背景突变:
  1. .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:49 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
小魔女 该用户已被删除
板凳
发表于 2015-1-26 22:49:58 | 只看该作者
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
小妖女 该用户已被删除
地板
发表于 2015-2-5 06:27:38 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
只想知道 该用户已被删除
5#
发表于 2015-2-11 08:04:24 | 只看该作者
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
6#
发表于 2015-3-2 01:24:47 | 只看该作者
俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。
谁可相欹 该用户已被删除
7#
发表于 2015-3-11 04:16:31 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
飘灵儿 该用户已被删除
8#
发表于 2015-3-17 22:10:19 | 只看该作者
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
分手快乐 该用户已被删除
9#
发表于 2015-3-25 08:39:13 | 只看该作者
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 13:18

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表