阅读更多

11顶
0踩

Web前端

转载新闻 5个CSS3技术 实现设计增强

2009-08-27 12:37 by 资深编辑 wutao0603 评论(3) 有6801人浏览

虽然目前有许多的CSS的新特性都还没有得到官方的认可,但很多浏览器(不包括IE)已经开始实现CSS3的规范。

 

在使用这些CSS3的新功能时,最关键的是要将它们作为设计增强。顾名思义,设计增强也就是在不影响可用性的情况下加强视觉吸引效果。

 

以下将会列举5个不同的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不能显示以上代码,所以将其弄成图片,所以你需要自行写以上代码了哦。


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




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);


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);


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;


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

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

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

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


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

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

  • 大小: 13.5 KB
  • 大小: 16.6 KB
  • 大小: 17.2 KB
  • 大小: 16.6 KB
  • 大小: 20.4 KB
  • 大小: 28.2 KB
  • 大小: 19.9 KB
  • 大小: 30 KB
来自: 彬Go
11
0
评论 共 3 条 请登录后发表评论
3 楼 nhyjq 2009-08-31 09:02
晕~~

-webkit-transform
-moz-transform

不如再加上
ie-transform和opera-transform吧
2 楼 terryang 2009-08-27 20:56
恩,确实都是很实用的功能撒
1 楼 gakaki 2009-08-27 19:46
封杀IE
嵌入opengl语言

让D3D都没的活 封杀封杀

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • gcc编译器的使用操作

    目录一、gcc 生成 .a 静态库和 .so 动态库 一、gcc 生成 .a 静态库和 .so 动态库 (1)创建test1目录 (2)进入test1目录 (3)用vim编写hello.h、hello.c和main.c文件 程序1 hello.h #ifndef HELLO_H #define HELLO_H void hello(const char *name); #endif //HELLO_H 程序2 hello.c #include <stdio.h> void hello(con

  • 怎样用gcc编译c语言,使用GCC编译C语言程序

    使用Eclipse CDT开发C语言程序,虽然使用很方便,效率也很高,但是它向我们隐藏了很多细节。虽然大多数时候这并不影响我们的开发,但是当我们需要对程序的编译链接过程进行更加特殊的控制,以获得可以满足特殊要求(例如,对程序进行优化、附带调试信息等)的程序的时候,就需要直接调用编译器程序进行编译链接,从而可以使用编译器所提供的丰富的编译选项,以达到对编译器的行为进行灵活控制,得到我们想要的个性化的...

  • GCC编译过程及使用

    GCC 平常我们在编译程序时使用的命令为:gcc ***.c -o ***,实际上这条指令帮我们执行了四个步骤,分别是预处理、编译、汇编、链接。下面对四个步骤分别进行详细介绍。 下面均使用demo1.c为例进行介绍: #include <stdio.h> #define MAX 20 #define MIN 10 //#define DEBUG int main() { printf("1:hello world!\n"); printf("1:MAX = %d,MIN = %d\n"

  • gcc的编译过程

    gcc编译过程详细了解细节

  • GCC编译器的使用

    gcc编译器的使用和命令详解。

  • man_gcc部分

    man gcc

  • GCC编译器常用命令使用

    在shell上通过man gcc命令可以查看manpage文档。自己根据平时所学分享一些常用的命令使用,请大家批评指正!1. gcc -E sourceFile.c-E,只预编译。直接输出预编译结果。-E参数,进行预编译时,将输出信息,将程序所包含的头文件,函数,宏定义等,进行扩展。2. gcc -S sourceFile.c -S,只执行到源代码到汇编代码的转换,输出汇编代码。3. gcc -c...

  • GCC编译器的基本用法

    gcc编译器的基本使用方法

  • GCC的详细介绍以及其功能

    通过调用汇编器和链接器,GCC能够将高级语言源代码转化为可执行的机器码,并生成最终的可执行文件。这样,开发者可以使用GCC来简化编译过程,同时还能够利用汇编器和链接器的功能来生成高效、可执行的代码。总的来说,GCC是一种强大的编译器套件,它为开发者提供了丰富的功能和灵活的扩展性,广泛应用于各种软件开发项目中。跨平台:GCC可以在许多不同的操作系统上运行,使开发者可以在不同的平台上使用相同的编译器。优化能力:GCC具有强大的优化功能,可以通过优化编译生成更高效的代码,提高程序的性能。

  • 在 Windows 下用 GCC 编译器练习 C/C++ 的简单教程

    2018年8月更新: 这个暑假博主和小伙伴、老师一同为师弟师妹们折腾了一个关于计算机学习交流的小社区 0xFFFF ,经过一个暑假的积淀,留下了不少适合计算机入门阅读的内容,推荐给看到这篇文章的你。关于计算机新手入门的话题 - 0xFFFF --------------- 开始正文 ---------------- 最近有许多师弟师妹们问入门 C 语言和 C++ 的时候练习代码应该装什么软件。 ...

  • 为什么要使用DEF文件?

     无论使用C语言或者C++语言来编写动态库,其编译器都会为每个函数甚至变量生成一个对应的修饰名(我是这样翻译的。原文是the decorated names),连接器将编译后的目标代码连接成DLL,其输出函数名或变量名依旧是编译后的修饰名。并且修饰名是与编译器相关的,也就是说你的源程序是C,生成的修饰名是一个样子;如果你的源程序是C++,则生成的修饰名是另一种样子。(关于修饰名的讨论,我将放在

  • gcc编译器的认识和使用

    解释: 1、gcc全称是GNU编译器套件(GNU Compiler Collection),是linux系统下主要的编译软件。 2、除了可以编译c语言开发的程序外,还可以开发C++、Java等多个语言的程序。 gcc的特点:功能强大、稳定、开源免费。 使用: (1)gcc -v 查看gcc的版本,从而验证了gcc编译器正常。 (2)gcc -o 输出文件名 源文件 o:output...

  • 安装gcc9.2.0后,man报错:No manual entry for

    百度及google都没找到解决办法 后来经过一番探索,终于弄好了, man到有两个关键的店, 一个要有man-pages, 另一个是man执行程序, man-pages安装了,man也有可就是报,Nomanualentryforxxx。 重装了man和man-pages也不行。 原因, 因为安装gcc时,那个教程配置环境变量把man-pages的目录也设置了, 删掉就可以了。 环境...

  • 如何使用gcc编译器

    GCC编译的过程大约分为三个过程:预处理,优化与编译,链接; 首先看预处理阶段:预处理阶段要将源程序做一些处理,比如宏定义的替换等,最终生成的文件内容是汇编代码,GCC默认不生成这种中间代码的文件,但可以通过命令:                                                           gcc -S example1.c -o example

  • gcc -g -c -o区别

    -g 可执行程序包含调试信息 -o 指定输出文件名 -c 只编译不链接 -g为了调试用的 加个-g 是为了gdb 用,不然gdb用不到 -o output_filename,确定输出文件的名称为output_filename,同时这个名称不能和源文件同名。如果不给出这个选项,gcc就给出预设的可执行文件a.out。 一般语法: gcc filename.c -o filename 上面的意思是如...

  • Windows下如何使用GCC编译器

    参见下列链接 https://jingyan.baidu.com/article/fedf0737829f6535ad89775e.html   下载了GCC,终于可以用Sublime 和 gcc 在windows下愉快地编程了。从此君王不早朝!

  • GCC编译器的使用说明

    目录 一、gcc编译流程 二、gcc命令使用 2.1 gcc命令格式定义 2.2 gcc命令常用参数 2.2.1 基本参数 2.2.2 调试参数 2.2.3 文件库参数 一、gcc编译流程 GCC编译器在编译一份C代码的时候,需要经过以下4个步骤: 预处理(preprocessing):对.c源文件进行预处理,生成 .i 文件。 编译(compilation):对...

  • GCC编译器

    GCC 是由 GUN 组织开发的,最初只支持C语言,是一个单纯的C语言编译器,后来 GNU 组织倾注了更多的精力,使得 GCC 越发强大,增加了对 C++、Objective-C、Fortran、Java 等其他语言的支持,此时的 GCC 就成了一个编译器套件(套装),是所有编译器的总称。 在这个过程中,gcc命令也做了相应地调整,它不再仅仅支持C语言,而是默认支持C语言,增加参数后也可以支持其他...

Global site tag (gtag.js) - Google Analytics