首页 相关文章 人们期待的CSS3的10大功能

人们期待的CSS3的10大功能

CSS3 仍遥遥无期,还是指日可待,这不是一个技术问题,而是人们什么时候可以彻底放弃那些不符合 W3C 标准的旧浏览器的问题。CSS3 备受期待是肯定的,CSS Tricks 网站做了一次投票调查,票选备受期待的 CSS 功能,一共有7000人参与,结果如下。有趣的是结果的前三名非常的接近。

#1) 圆角 (22.0%, 1,541 票)
这个功能已经在诸如 Mozilla, Webkit 等浏览器广泛使用,对 Web 设计者来说无疑是最受期待的,然而 IE 仍然没有要支持这个功能的迹象。

#2) 多背景(22.0%, 1,523 票)
这个功能是我最期待的,但向后兼容会是一个很大的问题。

#3) @font-face (21.0...[ 查看全文 ]

2016-02-19 标签:
  • 标签:Web开发
    CSS3 仍遥遥无期,还是指日可待,这不是一个技术问题,而是人们什么时候可以彻底放弃那些不符合 W3C 标准的旧浏览器的问题。CSS3 备受期待是肯定的,CSS Tricks 网站做了一次投票调查,票选备受期待的 CSS 功能,一共有7000人参与,结果如下。有趣的是结果的前三名非常的接近。 #1) 圆角 (22.0%, 1,541 票) 这个功能已经在诸如 Mozilla, Webkit 等浏览器广泛使用,对 Web 设计者来说无疑是最受期待的,然...[ 查看全文 ]
  • 标签:Web开发
    使用CSS3 HSL声明同样是用来设置颜色的。下一个呢? HSLA? 是的,这个和RGBA的效果是一样的。 上一篇文章:CSS3教程(9):设置RGB颜色 HSL声明使用色调Hue(H)、饱和度Saturation(s)和亮度Lightness(L)来设置颜色。 Hue 衍生于色盘:0和360是红色,接近120的是绿色,240是蓝色。 Saturation 值是一个百分比:0%是灰度,100%饱和度最高 Lightness 值也是一个百分比:0%是最暗,50%均值,100%最亮。 ...[ 查看全文 ]
  • 标签:Web开发
    CSS3不是新事物,更不是只是围绕border-radius属性实现的圆角。它正耐心的坐在那里,已经准备好了首次登场,呷着咖啡,等着浏览器来铺上红地毯。你看,浏览器需要跟上了 注意:浏览器需要改进 尽管把玩CSS3是很有趣的事情就像接下来我要演示的几篇教程中表现的那样,但是需要了解的是,CSS3并没有被当前浏览器完全的支持。也就是说,如果你要在你的网站中使用CSS3,请确认有针对不支持CSS3的浏览器的...[ 查看全文 ]
  • 标签:Web开发
    想要制作一些很酷的头部效果而且摆脱网站安全字体并且不使用图片文件?那么就使用CSS3嵌入字体吧! 上一篇:CSS3教程(6):创建网站多列 要使用一款字体,我们首先需要使用‘@font-face’属性。这必须先准备好我们要用的字体文件。 尽管这样,让我们简单的学习一下字体方面的历史。@font-face属性从CSS2就已经考虑了,但却始终在CSS2.1中还没有出现。CSS3尝试经它带到标准中来。 如果你手上没...[ 查看全文 ]
  • 标签:Web开发
    Eric A. Meyer 对基于 Web 标准的 CSS 与 HTML 绝非一知半解,他是这个领域杰出的专家,曾写过不少 CSS 方面的书,是 An Event Apart 的合伙创始人,A List Apart 团队成员,还是 Complex Spiral Consulting 的创始人。另外, Eric Meyer 7年来一直是 CSS Working Group 资格深获邀专家,他们负责维护和开发 CSS。   不用说,如果要找个人请教一些 CSS 方面的问题,Eric Meyer 就是那个人。本文作者...[ 查看全文 ]
  • 标签:Web开发
    CSS3透明不透明渐变随便你怎么叫它吧!这里是一些使用CSS3透明度的指南以及一些例子。 其实这个firefox很久以前就支持了,而IE一直不支持! 上一篇文章:CSS3教程(7):CSS3嵌入字体 opacity声明用来设置一个元素的透明度:层、文字、图片等一个opacity的值为1的元素是完全不透明的,反之,值为0是完全透明的,看不见的。1到0之间的任何值都表示该元素的透明程度。 浏览器兼容性 opacity是浏览器支持...[ 查看全文 ]
  • calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分。因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性能实现自适应的布局,首先让我想到的是box-sizing,但跟我说还可以计算,这让我不得不想起calc()。因为早先在官网和一些blog上看到相关的介绍,但一直没有深入,也没有自己去测试过。今天花了一下午的时间彻底学习了...[ 查看全文 ]
  •   最近闲来无事,上W3C转了一圈,粗略地浏览了一下尚未发布的CSS3,虽然还未被W3C正式发布出来,但还是能从已有的资料中窥出一些端倪,一个很明显的特征,CSS3制订得越来越细致了,某些细节之处完全超乎你所能想象的到的范围。 在这里不提及CSS3的语法,因为对于目前尚未有软件支持的CSS3,任何语法的探讨都像是空中楼阁,毫无意义可言。以下我就列举一下CSS3中部分新内容。 1、...[ 查看全文 ]
  • 说起CSS3的新特性,就不得不提到 Media Queries 。本文比较详细,所以很多实际中用不到。所以如果只是想简单了解Media Queries,推荐参考 CSS3 Media Queries 。 CSS2.1定义了 Media 的部分,包括类型、组别和规则等。CSS并非为了显示器而创造,而是应用于各种各样的媒体,比如常见的显示器,越来愈多的手持设备,可能略显过时的电视机等等。 而 Media Queries 的引入,其作用就是允许添加表达式用以确定媒...[ 查看全文 ]
  • 标签:Web开发
    本文中的这些标志与图标都是用CSS3制作而成,看上去似乎很不可思议,其中包括了IE图标,网站图标,奥运会标志等等,都是一些十分常见的标志,而它们之所有如此特别是因为这些标志与图标只是用CSS3来显示在网页中,而并非图片显示。 尽管被批评为走火入魔,CSS3 痴迷者们仍然在尝试实现各种基于纯 CSS 的图形与图标设计,如果你看到本文介绍的这些精美图标,你绝对不会相信它们完全是由 CSS3 代码生成的。尤...[ 查看全文 ]
  • 标签:Web开发
    著名的 Web 设计网站 CSS-tricks.com 最近组织了一次调查,请15名顶尖的 Web 设计师对 CSS 提出自己的期望,15名设计师包括 Jon Hicks,  Wolfgang Bartelme, Mint 的 Shaun Inman 以及 Stuff and Nonsense 的 Andy Clarke。 调查结果显示,最被期待的 CSS 功能是 CSS 圆角,其它期待的功能包括跨浏览器渐变与阴影,类似 Photoshop 的层融合效果,更一致的声明简化语法以及对条件判断的本地支持...[ 查看全文 ]
  • 标签:Web开发
    阴影大约从CSS2就开始有了,但是只有Safari一个浏览器支持它,到现在依然是这样。阴影在CSS3中可以应用在边框和文字上,就像图片的阴影效果一样。 一般可以分为box-shadow和textshadow两类。 CSS3的box-shadow和textshadow可以写做:box-shadow:Apx Bpx Cpx #xxx; Apx = x轴 Bpx = y轴 Cpx = 投影长度 #XXX = 像通常一样的颜色 了解了这些,我们就可以以下面的方法开始体验了 浏览器兼容性: 在前面的介...[ 查看全文 ]
  • 所有的开发人员都应该注意了,你们绝对应该看看这篇文章,帮助你快速创建HTML5/CSS3的开发框架。可能你也看到过其它的框架,但是你应该看看这些框架,因为你以前可能没用过他们中的大部分。看看最新的实用HTML5和CSS3框架吧!希望你们喜欢! 1.HTML5boilerplate H5BP带给你非常漂亮的文档,一个网站优化的编译脚本,还有一个自定义的boilerplate编译器。除此之外,我们还支持lighttd,Google App Engine和No...[ 查看全文 ]
  •     (图老师整理); 这两年,高温瑜伽风靡各大健身俱乐部和瑜伽馆。这种瑜伽在人造的高温环境下练习,几个简单的伸展动作或甚至躺在地上不动,就可以大汗淋漓,一堂课下来瘦一公斤并非难事,想减肥的人都从中看到了希望。 高温瑜伽真的这么“灵验”吗?其实不然。当身体处于高温之下,血液自然流向表皮帮助散热,如果同时间进行伸展运动,肌肉也需要血液来提供能量,再加上 身...[ 查看全文 ]
  • 标签:Web开发
    现在我们来看一看如何为边框的border-color添加更多的色彩。 使用CSS3的border-radius属性,如果你设置了border的宽度是X px,那么你就可以在这个border上使用X种颜色,每种颜色显示1px的宽度。如果说你的border的宽度是10个像素,但是只声明了5或6中颜 色,那么最后一个颜色将被添加到剩下的宽度。 浏览器兼容性 目前只有Firefox支持CSS3 border-colour属性,所以我们这里只需使用-moz前缀。 所有本系列...[ 查看全文 ]
  • 标签:Web开发
    一、中规中矩的效果 所谓中规中矩的效果就是加个投影,贴个胶带什么的。效果如下: 您可以狠狠地点击这里: 中规中矩纸张效果demo 这里纸张本身的效果没有什么说头的,就是个CSS3的 box-shadow投影 效果而已,相关代码如下: -moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); 反而是上面的...[ 查看全文 ]
  • 用纯CSS也可以实现各种各样很酷的效果了,甚至是动画。虽然有些效果不能跨浏览器(甚至是支持CSS3的浏览器)运行,有些只是展示并没什么实际 用途, 但仅用CSS实现出的这些效果似乎没什么可以挑剔的。 对于设计人员和开发人员来说,CSS一直是web设计过程中重要的一部分,随着CSS3的出现以及越来越多的浏览器对它的支持,设计师们有了 更多的选择。用纯CSS也可以实现各种各样很酷的效果了,甚至是动画。虽然有...[ 查看全文 ]
  • 标签:Web开发
    英文原文: http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/ 中文翻译: http://www.dudo.org/article.asp?id=197 注: 本文写于2006年1月,当时IE7、IE8和Firefox3还未发行,文中所有说的浏览器支持均未包括这三个版本的浏览器。在IE8和Firefox3中,文中的大部分选择符已经被支持[dudo注] 在2005年的9月和10月,我先后发表了几篇关于CSS2.1中选择符的介绍文章。大体看来...[ 查看全文 ]
  • 今天的资源是完全免费的 WebApp,这些 WebApp 能够为模板,渐变,甚至浏览器属性的前缀生成 CSS3 代码。如果你是前端开发者,这些资源可以帮助你节省很多时间,并可以为以后的项目提供可复用的源码。 1.CSS3 Generator CSS3 Generator是最受欢迎的用于代码生成的 web 应用之一。这个应用对于不同类型的代码生成有不同的页面,包括 RGBA,transform,Flexbox 等等各种类型。另外每种代码生成器都有一个图标...[ 查看全文 ]
  • 益生菌 益生菌是对身体健康能发挥有效作用的活菌,常称为友善细菌。它定植于人体的肠道、生殖系统内,能产生确切的健康功效,如增强和保持肠道的自然平衡,对全身健康和免疫系统的平衡也起着重要作用。 益生菌的四大功能益生菌的种类选择益生菌产品的原则益生元与益生菌的关系...[ 查看全文 ]
手机页面 收藏网站 回到头部