由于CSS工作组似乎很费劲,无法确定在实际浏览器中可能永远无法实现的规范的确切用语,因此WebKit团队将通过实现您将要实现的CSS新功能来引领网络向前发展能够在短短几个月内投入生产。
每个浏览器都包含一个渲染引擎,负责从组成给定网页的HTML和CSS代码生成渲染页面。 WebKit是苹果Safari浏览器(更不用说最新的诺基亚手机和Adobe AIR平台)的核心渲染引擎。 您可以下载最新的WebKit进行中版本进行试用。
对CSS的未来感兴趣的Web设计人员有很好的理由立即下载WebKit。 该团队介绍了一些惊人的CSS新功能,Apple计划在今年6月发布的iPhone和iPod touch的Mobile Safari 2.0更新中发布这些功能。 据推测,我们可以期望同时将Mac OS X和Windows的Safari桌面版更新。
以下是到目前为止宣布的功能及其作用的摘要:
CSS渐变
CSS渐变使您可以使用颜色到颜色的渐变而不是纯色来填充区域(包括背景,边框和生成的内容)。
右图显示了几个可以实现的效果示例。 在顶部图像中,四个径向(圆形)渐变在单个背景中组合在一起,以产生彩色效果。 在底部图像中,单个线性渐变从蓝色开始垂直运行,然后逐渐变为白色,然后变为绿色,然后再次变为白色。
要生成渐变,可以在通常会在CSS代码中包含图像的任何地方使用-webkit-gradient
CSS函数。 产生线性,蓝色和绿色渐变背景的方式如下:
background: -webkit-gradient(linear, left top, left bottom,
from(#00abeb), to(#fff), color-stop(0.5, #fff),
color-stop(0.5, #66cc00));
可以在WebKit博客上找到此新功能的完整说明 ,以及可以检出的更多示例。 当然,您需要下载WebKit才能看到它们。
CSS转换
CSS转换的工作方式非常类似于CSS相对定位(所有主流浏览器都支持CSS相对定位),因为它可以让您修改页面的一部分而不会影响页面的布局。 通过相对定位,如果将元素向左移动500像素,则该元素将以其新位置显示,但仍将占据其最初所在页面中的空间。
使用CSS变换,您可以像使用相对定位一样移动元素,但是也可以缩放,旋转甚至倾斜元素。
在此屏幕截图中,我使用了CSS转换将sitepoint.com的整个页面旋转了两个角度。 特别引人注目的是,在完成转换后,所有文本仍然是可选的,并且您仍然可以使用页面顶部的搜索表单。
执行此操作的代码很简单:
body {
-webkit-transform: rotate(-2deg);
}
如果下载WebKit,则只需在位置栏中键入以下代码即可(在一行上),您可以在任何页面上自行尝试:
javascript:_=document.body.style;_.WebkitTransformOrigin='100%%200%';_.WebkitTransform='rotate(-2deg)'
WebKit博客对此功能进行了很好的总结 ,并且该团队还发布了初始规范草案 ,以供W3C考虑。
CSS过渡
一旦开始使用CSS,您很快就会学到一些内容,即当用户将鼠标悬停在超链接上时如何更改超链接的外观。 例如,此代码会将链接的文本从蓝色更改为白色:
a:link, a:visited {
color: #00f;
}
a:hover {
color: #fff;
}
借助少量的JavaScript,您可以随时更改,只需更改分配给元素的类即可。
CSS Transitions可让您平滑地对这些更改进行动画处理。 它可以使链接文本从蓝色平滑过渡为浅蓝色,最后变为白色,而不是将悬停时链接文本的颜色从蓝色捕捉为白色:
a:link, a:visited { color: #00f; -webkit-transition: color 1s linear; } a:hover { color: #fff; }
您可以将转换与CSS转换结合使用,以实现一些真正令人兴奋的效果。 在此屏幕截图中,我修改了sitepoint.com上的主导航栏,以将其悬停时放大并稍微旋转网站上的主导航按钮。 使用CSS过渡时,当鼠标经过按钮时,按钮会平滑地增长和倾斜,然后在鼠标离开时按钮会收缩回到原位。
除了看起来很漂亮之外,这种效果还具有使链接更易于单击的附加优势。
WebKit团队已经提交了CSS过渡的规范草案 ,供W3C考虑,并且WebKit博客上有一篇不错的文章,其中包含一些示例 ,您可以在WebKit中尝试这些示例 。
CSS蒙版
今天刚刚宣布,WebKit现在还支持CSS masks 。 如果您曾经使用过Photoshop之类的图形程序,则将熟悉遮罩的概念。 本质上,使用遮罩可以使HTML元素的某些部分半透明或完全不可见。
在WebKit博客右边的示例中,带有黑色边框的红色圆圈的SVG图像被用作蒙版对照片。 请注意,由于黑色边框的缘故,照片的全彩如何通过蒙版沿圆圈的边缘显示。
标准CSS opacity
属性实际上是应用于整个元素的纯色蒙版。 使用CSS遮罩,您可以应用图像,SVG矢量形状甚至CSS渐变作为遮罩,以实现不同的效果。 与所有WebKit的新CSS效果一样,遮罩也非常强大。 您可以将它们应用于任何复杂的HTML元素,包括表单域甚至视频!
当今CSS的未来
多年来,网页设计师一直在关注W3C规范,以告诉他们他们对未来浏览器的期望。 但是,由于W3C在这方面的努力停滞不前,诸如Safari,Opera和Firefox之类的尖端浏览器通过实施新功能供设计师试用,从而弥补了这一空白。
与任何新功能一样,评审团仍然无法确定许多新功能在现实中的有用性。 特别是在动画过渡的情况下,滥用的可能性非常大。 为此,我们在未来看到创建的每一个细微和美观效果,我们可能会看到五个或十个这些 (WebKit的看到效果需要)。
的确,我们很快将无法依赖大多数浏览器中提供的上述任何功能,但现实的实现将在短短几个月内实现。 这是W3C多年来生产的大多数CSS3规范所不能比的。
为了跟上这些以及其他新的CSS功能进入WebKit的步伐(例如CSS变量 , CSS画布绘制和CSS关键帧动画 ),请访问WebKit团队的Surfin的Safari博客 。
From: https://www.sitepoint.com/css-gradients-transforms-animations-and-masks/