HTML5 CSS3给网站设计带来出色效果


Posted in HTML / CSS onJuly 16, 2009

1. 圆角效果 

HTML5 CSS3给网站设计带来出色效果 

CSS3 新功能中最常用的一项是圆角效果,标准 HTML 方块对象是90度方角的,CSS3 可以帮你实现圆角。

1.moz-border-radius: 20px;

2.webkit-border-radius: 20px;

3.border-radius: 20px;

甚至单个角也可以实现圆角,不过 Mozilla 和 Webkit 的语法稍有不同。

1.moz-border-radius-topleft: 20px;

2.moz-border-radius-topright: 20px;

3.moz-border-radius-bottomleft: 10px;

4.moz-border-radius-bottomright: 10px;

5.webkit-border-top-rightright-radius: 20px;

6.webkit-border-top-left-radius: 20px;

7.webkit-border-bottom-left-radius: 10px;

8.webkit-border-bottom-rightright-radius: 10px;

所支持的浏览器:Firefox, Safari , Chrome

用例: Twitter.

2. 图形化边界 

HTML5 CSS3给网站设计带来出色效果 

顾名思义,图形化边界就是允许使用图片作为对象的边界,语法如下:

1.border: 5px solid #cccccc;

2.webkit-border-image: url(/images/border-image.png) 5 repeat;

3.moz-border-image: url(/images/border-image.png) 5 repeat;

4.border-image: url(/images/border-image.png) 5 repeat;

这里,border: 5px 设定了边界的宽度,然后,每个边界的图片定义告诉浏览器,使用图片的多大一部分来充当边界。边界图片还可以针对每一条边单独设置:

1.border-bottom-rightright-image

2.border-bottom-image

3.border-bottom-left-image

4.border-left-image

5.border-top-left-image

6.border-top-image

7.border-top-rightright-image

8.border-right-image

支持的浏览器: Firefox 3.1, Safari , Chrome.

用例: Blog.SpoonGraphics.

3. 块阴影与文字阴影 

HTML5 CSS3给网站设计带来出色效果 

阴影效果曾让 Web 设计师既爱又恨,现在,有了 CSS3,你不再需要 Photoshop,已经有网站在使用这个功能了,如 24 Ways website.

1webkit-box-shadow: 10px 10px 25px #ccc;

2moz-box-shadow: 10px 10px 25px #ccc;

3box-shadow: 10px 10px 25px #ccc;

前两个属性设置阴影的 X / Y 位移,这里分别是 10px,第3个属性定义阴影的虚化程度,最后一个设置阴影的颜色。文字阴影也可以这样设置:

text-shadow: 2px 2px 5px #ccc;

支持的浏览器:Firefox 3.1, Safari, Chrome (只支持 Box 阴影) ,Opera (只支持文字阴影).前3个数字表示红绿蓝三色的值,最后一个值代表透明度,另外,我们还可以使用 opacity 实现透明度(目前的灯箱效果多使用该技巧 - 译者)

用例: 24 Ways.

4. 使用 RGBA 实现透明效果 

HTML5 CSS3给网站设计带来出色效果 

目前,Web 设计中的透明效果主要靠 PNG 图片实现(但在 IE 浏览器支持得并不好 - 译者),在 CSS3,可以直接实现透明效果。

1.rgba(200, 54, 54, 0.5);

2.background: rgba(200, 54, 54, 0.5);

3.color: rgba(200, 54, 54, 0.5);

1.color: #000;

2.opacity: 0.5;

支持的浏览器: Firefox, Safari, Chrome, Opera (opacity) 以及 IE7 (opacity, with fixes).

用例: 24 Ways (RGBA).

5. 使用 @Font-Face 实现定制字体 

HTML5 CSS3给网站设计带来出色效果 

Web 设计中有几种字体是比较安全的,如 Arial,Helvetica, Verdana, Georgia, Comic Sans (中文的,一般来说宋体是唯一安全的 - 译者),现在,使用 CSS3 的 @font-face 可以自己指定字体,不过因为牵扯到版权问题,实际能用的字体也是有限的 (另外,体积庞大的中文字体也是一个不好解决的问题 - 译者)。

语法如下:

@font-face {

font-family:'Anivers';

src: url('/images/Anivers.otf') format('opentype');

}

支持的浏览器: Firefox 3.1, Safari, Opera 10 and IE7 (需要一番周折,如果你不怕麻烦,可以在 IE 实现这个功能,请参考: make font-face work in IE )

用例: TapTapTap.

虽然 CSS3 尚在开发中,上面提到的这些功能已经可以在部分浏览器中使用了,尤其是 Safari。不幸的是,Safari 并非主流浏览器。

Firefox 目前拥有大量用户基础,另外,即将推出的 Firefox 3.1 支持不少 CSS3 效果,因为 Firefox 用户的升级积极性很高,因此,会有不少用户可以提前体验 CSS3 的新功能。

Google Chrome 今年刚刚发布,它基于 Webkit 引擎,因此和 Safari 很相似,因为 Safari 主要用于 Mac 市场,Chrome 可以正好弥补 Windows 市场的空缺。

根据统计数据,2008 年11月止,44.2% 的用户使用 Firefox, 3.1% 使用 Chrome, 2.7% 使用 Safari,意味着 CSS3 的部分功能已经可以支持近半 Internet 用户,而在 Web 设计圈子,这个比例可能更高,大约有 73.6% (Blog.SpoonGraphics 提供的数据)

6. 负面因素

上面讲述的这些 CSS3 功能会给你的网站带来出色的效果,但仍有一些负面的因素必须考虑:

1.Internet Explorer: 46% 的 Internet 无法看到这些效果,因此不要将这些东西用于重要的设计。同时保证,在这些效果不起作用的地方,有替代设计可用。

2.CSS 验证问题: 这些 CSS3 功能并非最终版本,目前不同的浏览器使用不同标签实现这些功能,可能为你的 Style Sheet 带来验证上的问题。

3.臃肿代码: 因为不同浏览器要使用不同定义语法,最终将导致你的 CSS 代码十分臃肿。

4.不当的使用: 对这些效果的不当使用,可能带来一些不良后果,阴影效果尤其如此。

HTML / CSS 相关文章推荐
css3实现信纸/同学录效果的示例代码
Dec 11 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 HTML / CSS
浅析HTML5:'data-'属性的作用
Jan 23 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 HTML / CSS
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
Apr 22 HTML / CSS
CSS3实现列表无限滚动/轮播效果
Jun 23 HTML / CSS
css3 选择器
May 11 HTML / CSS
CSS3 圆角效果
Jul 15 #HTML / CSS
CSS3 完美实现圆角效果
Jul 13 #HTML / CSS
CSS3 box-sizing属性
Apr 17 #HTML / CSS
CSS3伪类选择器:nth-child()
Apr 02 #HTML / CSS
CSS3教程:新增加的结构伪类
Apr 02 #HTML / CSS
CSS3五个技巧给你的网站带来出色的效果
Apr 02 #HTML / CSS
CSS3教程:边框属性border的极致应用
Apr 02 #HTML / CSS
You might like
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
php查询及多条件查询
2017/02/26 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
文本加密解密
2006/06/23 Javascript
初学JavaScript第二章
2008/09/30 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
Python 条件判断的缩写方法
2008/09/06 Python
python访问纯真IP数据库的代码
2011/05/19 Python
Python线程的两种编程方式
2015/04/14 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
python 以16进制打印输出的方法
2018/07/09 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
python添加菜单图文讲解
2019/06/04 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
什么是python的id函数
2020/06/11 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
西班牙手机之家:Phone House
2018/10/18 全球购物
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
服装设计师职业生涯规划范文
2014/02/28 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书