脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > css3 >

CSS3属性使网站设计增强同时不消弱可用性

  发布时间：2009-08-29 19:32:53   作者：佚名   我要评论
下面将带你一同学习5个不同的CSS3属性，如果从现在起你就开始尝试在你的网站中使用它们，那你将让你的网站实现既设计增强又不会消弱可用性。
层叠样式表(css)是Web设计的一种语言，CSS的下一代版本CSS3已经蓄势待发。你是否可望开始使用它们却又不知从何下手呢？虽然还有一些新属性没有得到官方的确认，但是一些浏览器已经开始支持来自CSS3得新特性了。
　　但问题是——许多浏览器支持了，唯独最主要的Internet Explorer浏览器仍不支持！
　　很多人尤其是中国的前端er们会觉得既然IE不支持，那就先不关心CSS3。其实不应这样的，CSS3现在能为我们带来什么好处呢？至少现在我们就能使用那些CSS3的新特性来进行设计增强。

设计增强是指在不影响网站可用性的基础上，使用一些高级样式来提升网站的视觉效果。

其实对于如何区分设计增强与不影响可用性的区别还是有一定的困难的:

  • 设计增强的例子：使用border-radius属性为盒模型添加圆角，让网站更富有吸引力。不过，即使圆角属性不被浏览器支持，它也不会影响网站的正常使用。
  • 设计消弱可用性的例子：在某个元素上面层叠了一个使用了RGBA颜色值背景的元素，上面的元素使用半透明效果，很显然这两个元素都是必须让用户看到的。很显然，有一部分使用旧浏览器的用户想要看到下面的元素内容是很困难的，这种设计就降低了可用性。

　　下面脚本之家将带你一同学习5个不同的CSS3属性，如果从现在起你就开始尝试在你的网站中使用它们，那你将让你的网站实现既设计增强又不会消弱可用性。

　　以下是在应用CSS3设计增强之前的普通效果:
css3-新特性

1.透明颜色

目前支持的浏览器:Apple Safari 4, Firefox 3.0.5+, Google Chrome 1+

RGBA允许你控制某个特性填充颜色的不透明度，无论是文本、背景、边框还是背景颜色。

设置颜色透明度的时候，你需要使用RGB颜色值，不可以再使用十六进制值，而那个”A”则代表透明度，你可以设置从0(透明)到1(不透明)之间的数值。

1
rgba(0-255,0-255,0-255,0-1)

你还可以单独使用RGB值:

1
2
3
4
5
6
7
8
.topbox {
    color: rgb(235,235,235);
    color: rgba(255,255,255,0.75);
    background-color: rgb(153,153,153);
    background-color: rgba(0,0,0,0.5);
    border-color: rgb(235,235,235);
    border-color: rgba(255,255,255,0.65);
}

有个好消息就是至少你可以使用CSS滤镜单独针对IE浏览器设置背景颜色。
IE条件注释-背景色透明
点击图片查看清晰大图
注:由于Wordpress不能显示以上代码，所以将其弄成图片，所以你需要自行写以上代码了哦。

css3-教程

2.圆角

目前支持的浏览器:Apple Safari 3+, Firefox 1+, Google Chrome 1+

边框半径用于设置和模型每个角的曲率，仿佛有一对与特定的角落虚圆半径(r):

1
border-radius: r;

虽然border-radius是未来CSS3的一部分，不过现在无论Mozilla(Firefox)和Webkit(Safari和Chrome)都已经有了自己的圆角版本。

1
2
3
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

你也可以单独设置某个角的半径:

CSS3

Mozilla

WebKit

border-top-right-radius

-moz-border-radius-topright

-webkit-border-top-right-radius

border-bottom-right-radius

-moz-border-radius-bottomright

-webkit-border-bottom-right-radius

border-bottom-left-radius

-moz-border-radius-bottomleft

-webkit-border-bottom-left-radius

border-top-left-radius

-moz-border-radius-topleft

-webkit-border-top-left-radius

border-radius

-moz-border-radius

-webkit-border-radius

css3-教程

3.文字阴影

目前支持的浏览器:Apple Safari 3+, Firefox 3.0.5+, Google Chrome 1+

为文本添加阴影效果，控制阴影左/右和上/下的偏移，还可以设置阴影的颜色。

1
text-shadow: x y blur color;

你可以结合透明颜色值来设置文字阴影的明暗:

1
text-shadow: -2px 2px 10px rgba(0,0,0,.5);

你还可以让文字有多个阴影，每个阴影属性使用逗号分隔:

1
2
text-shadow:   0 0 10px rgba(0,255,0,.5), -10px 5px 4px rgba(0,0,255,.45),
15px -4px 3px rgba(255,0,0,.75);

css3-实例

4.盒阴影

目前支持的浏览器:Apple Safari 4+, Firefox 3+, Google Chrome 1+

为某个和元素添加阴影的CSS3属性声明格式与文本阴影相同:

1
box-shadow: x y blur color;

和文本阴影一样，Mozilla 和 Webkit 也有他们自己的盒阴影规则:

1
2
3
-webkit-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);
box-shadow: 0 0 10px rgb(0,0,0);

你也可以为某个盒元素添加多个阴影，仍然是使用逗号分隔。

1
2
3
4
5
6
-webkit-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),
15px -20px 20px rgba(255,0,0,.75);
-moz-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),
15px -20px 20px rgba(255,0,0,.75);
box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),
15px -20px 20px rgba(255,0,0,.75);

css3-实例教程

5.多背景图

目前支持的浏览器:Apple Safari 1.3+, Google Chrome 1+

为某个单一元素添加多个背景图的话仅需要为不同的背景图声明之间添加都好来分隔开。当然，你还要为其它浏览器准备一张完整的图片。

1
2
3
4
5
background-image: url(astro-127531.png);
background-image: url(astro-127531.png),url(Hubble-112993.png);
background-repeat: no-repeat;
background-position: bottom left;
background-position: bottom left, top right;

css3-实例教程

“买五送一”-旋转任何元素

目前支持的浏览器:Apple Safari 4+, Firefox 3.5+, Google Chrome 1+

虽然它目前不算是CSS3中的一部分，但Webkit已经有了它自己的一套变形属性，Mozilla也在效仿。变形包含了很多不同类型的值，不过其中最有意思也是最有用的就是旋转了。

1
2
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);

css3-旋转变形

下图为不支持CSS3的浏览器所呈现出来的样子(如Opera 9):
css3-兼容性

查看实例Demo(需要使用Safari 4+, Firefox 3.5+, or Chrome 1+浏览器)

相关文章

  • CSS3 最强二维布局系统之Grid 网格布局

    CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局，本文介绍CSS3 最强二维布局系
    2025-02-27

  • 如何使用CSS3实现波浪式图片墙

    本文介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同
    2025-02-27

  • CSS3模拟实现一个雷达探测扫描动画特效(最新推荐)

    文章介绍了如何使用CSS3实现一个雷达探测扫描的效果,包括夜色背景、蜘蛛网盘、扫描体的转动效果、尾巴阴影以及被扫描到的光点,通过HTML和CSS的配合,实现了丰富的动画效果,
    2025-02-21

  • css3 display:flex 弹性盒模型的使用方法

    CSS3的Flexbox是一种强大的布局模式,通过设置display:flex可以轻松实现对齐、排列和分布网页元素,它解决了传统布局方法中的对齐、间距分配和自适应布局等问题,接下来通过本
    2025-02-19

  • css3 实现icon刷新转动效果

    本文给大家介绍css3 实现icon刷新转动效果，文章开头给大家介绍了webkit-transform、animation、@keyframes这三个属性，结合实例代码给大家介绍的非常详细，感兴趣的朋友一
    2025-02-19

  • CSS3动态效果之过渡属性(最新推荐)

    CSS3过渡属性用于实现元素从一种样式平滑过渡到另一种样式,通过设置transition-property过渡属性、transition-duration过渡时长transition-timing-function过渡函数和trans
    2025-02-19

  • CSS3实现动态旋转加载样式的示例代码

    本文介绍了如何使用CSS3创建一个简单的动态旋转加载样式,通过定义一个带有类名“loader”的HTML元素,并使用CSS样式和@keyframes规则来实现旋转动画,你可以根据需要调整样式
    2025-02-19

  • 使用CSS3实现平滑的过渡动画效果(实例代码)

    这篇文章主要介绍了如何使用CSS3的transition属性实现平滑的过渡动画，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友一起看看吧
    2025-02-13

  • CSS3中使用flex和grid实现等高元素布局的示例代码

    本文介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果，感兴趣的朋
    2025-02-11

  • 使用CSS3和SVG创建圆形进度条动画效果

    CSS3和SVG的结合使用为网页设计带来了创新的动态视觉效果,本文通过一个圆形进度条的动画特效示例,展示了如何利用CSS3的动画功能和SVG的矢量图形能力来创建丰富的用户交互体
    2024-10-24

最新评论

关注微信公众号

扫一扫