CSS渐变提示

下拉阴影,渐变,圆角,变换和动画有什么共同之处?是的,它们是我们曾经称之为Web 2.0的灾难的一个秘诀,并且从那时起就被带到了棚子里,但它们也是我们可以用CSS做的一组新技巧。并非所有浏览器都支持它们,但足以让我们获得乐趣。

我最近有幸重新设计了大部分基于位置的社交网络服务的网站Gowalla的与基冈琼斯。 Gowalla是一家以设计为中心的公司,它完全理解界面的强大功能,该界面易于使用,但也很值得一看。

在本教程中,我将解释我们添加到Gowalla网站的一些CSS增强功能,并教您如何在自己的项目中使用它们。需要注意的是:它们在盘子上用作胡椒和盐。如果这顿饭在没有调味的情况下已经毁了,添加它就不会掩盖你不能做饭的事实。还要注意,过多的盐和胡椒会破坏自己的美味佳肴。

让我们从一些简单的CSS Transitions开始。这些都很容易实现,结果令人惊讶的美丽。

很好的例子是Gowalla主页上的下载链接,我添加了一些动画。默认情况下,每个图标的不透明度为.75。在悬停时,它会变为1,但不会仅仅从.75切换到1,它会消失。这个CSS很简单:

  1. 一个 {
  2. 不透明度:.75;
  3. -webkit-transition:不透明度.25s轻松;
  4. -moz-transition:不透明度.25s轻松;
  5. -o-transition:不透明度.25s轻松;
  6. 过渡:不透明.25s轻松;
  7. }
  8. 答:重点,
  9. A:悬停{
  10. 不透明度:1;
  11. }

我选择让动画持续.25秒。你应该经常测试的一件事是动画不会太慢,因为这会让网站访问者感到沮丧和困惑。如果你不确定,最好让它变得更加快捷。

常规下载链接的左侧是Gowalla iPad客户端的链接。由于这个应用程序是新推出的,我们决定使其链接更加突出,并使用iPad的图片和软件的屏幕截图。如果将鼠标悬停在其上,图像会向上滑动五个像素。这需要的CSS类似于上一个示例中的CSS:

  1. A.image {
  2. 位置:绝对;
  3. 顶部:0;
  4. -webkit-transition:top .25s轻松;
  5. -moz-transition:top .25s轻松;
  6. -o-transition:top .25s轻松;
  7. 过渡:顶部.25s轻松;
  8. }
  9. A.图形:焦点,
  10. A.image:悬停{
  11. 上:-5px;
  12. }

造型

出于某种原因,人们喜欢或讨厌造型元素,仇恨阵营是最大的。就个人而言,我喜欢这样做,因为它涉及如此多的互动。将样式应用于表单元素曾经非常不一致,但同样,我们生活在一个很难找到糟糕浏览器的时代,而且我们的网页设计花园都很好。

我喜欢完全控制我风格的一切,所以我添加了CSS以从浏览器使用的任何默认设置中清除页面。它通常看起来像这样:

  1. * {
  2. 保证金:0;
  3. 填充:0;
  4. List-style:none;
  5. Font-weight:normal;
  6. Font-style:normal;
  7. 边界:0;
  8. Font-size:1em;
  9. Text-decoration:none;
  10. 大纲:无;
  11. }

完美 - 我现在是该网站设计的独裁者。但是有一个问题。我需要手动重新应用许多可用的样式,而表单元素(尤其是文本输入)是演示这一点的好方法。这是我用来设置文本输入初始状态的CSS。我使用[type = text]来只选择文本输入:

  1. 输入[type = Text] {
  2. border:1px solid #ccc;
  3. -webkit-border-radius:3px;
  4. -moz-border-radius:3px;
  5. -o-border-radius:3px;
  6. Border-radius:3px;
  7. -webkit-transition:全0.1秒线性;
  8. -moz-transition:全0.1s线性;
  9. -o-transition:全0.1s线性;
  10. 过渡:全0.1秒线性;
  11. }

We wanted to make the link to the Gowalla iPad app prominent. If you hover over it, the image slides up by five pixels

我们想要使Gowalla IPad应用程序的链接突出。如果将鼠标悬停在其上,图像会向上滑动五个像素

如果您在HTML中使用HTML5占位符属性(例如, ),您可以使用这段漂亮的CSS来设置它(仅限WebKit):

  1. input [type = text] :: - webkit-input-placeholder {
  2. 颜色:#ccc;
  3. }

但要小心;浏览器供应商仍在讨论这个属性的正确实现。你可以玩它,但不要感到惊讶
如果它在不久的将来某个时候破裂。

这就是我们输入的初始状态。接下来,我们需要设置样式:悬停。在这种情况下,我只是想改变边框的颜色:

  1. 输入[type = Text]:悬停{
  2. Border-color:#999;
  3. }

我们将设置样式的下一个状态是您将鼠标光标放在文本输入中时看到的状态。这是一个很多人忘记设计的状态,这会给浏览页面的人带来很大的可用性问题。 gowalla.com上使用的输入焦点风格的灵感来自于Twitter处理它的方式,因此对于Doug Bowman,VitorLourenço,Mark Otto以及他们团队的其他成员来说,这一点值得称道。

  1. 输入[type = Text]:focus {
  2. Border-color:#39b2e5;
  3. -webkit-box-shadow:#b5dff1 0 0 5px;
  4. -moz-box-shadow:#b5dff1 0 0 5px;
  5. -o-box-shadow:#b5dff1 0 0 5px;
  6. box-shadow:#b5dff1 0 0 5px;
  7. }

那么这里发生了什么?我们(ab)使用box-shadow属性伪造边缘周围的蓝色光晕。因为我们为适用于所有更改的输入的原始状态定义了CSS转换,所以边框平滑地从灰色变为蓝色,并且框发光漂亮。

还在我这儿?好。另一个通常设计不佳的元素是提交按钮。一个按钮应该看起来像一个按钮,感觉像一个按钮,如果技术允许它,闻起来就像一个按钮。如果我点击一个,它需要感觉好像我正在戳一个柔软的矩形物体。我坚信如果虚拟按钮是真实的,它们将没有平坦的表面。相反,它们在物理上就像一个门铃。它们有许多形状和大小,但都有一个共同的特点:按下它们并发生一些事情。我不是在谈论他们触发的声音;我的意思是按钮响应你按下它。根据它是由金属,硬塑料还是橡胶制成,它会对您的触感产生不同的反应。请记住,下次您需要一些按钮设计灵感。

但是让我们来看看多汁的部分。除了CSS,你如何使用除了现实外观的按钮?渐变通常用于表示元素是3D。不,不要害怕,他们很好。如果小心使用,微妙的可以真正使布局闪耀。现在让我教你如何在CSS中添加防弹渐变。

渐变可能是CSS最难掌握的部分,特别是当您超越我们将要使用的简单线性渐变时。您可以添加线性渐变(有或没有停止),径向渐变,半透明渐变,多个渐变......列表继续。

Gowalla is a design-centric company that was keen for its interface to be both beautiful and functional – so employing the latest CSS effects was a natural choice

Gowalla是一家以设计为中心的公司,热衷于其界面既漂亮又实用 - 所以采用最新的CSS效果是一个自然的选择

如果您想了解今天可用的所有最新CSS技术,我建议您预订Andy Clarke的Hardboiled Web Design副本。它充满了你想知道的一切。安迪是一位伟大的作家,你会飞过这本书。

这是没有渐变背景的按钮的CSS。我冒昧地添加了我们在本教程中谈到的所有内容,例如圆角和微妙的阴影。我还在文本中添加了一个阴影以强调3D效果。

  1. .button {
  2. 颜色:#fff;
  3. text-shadow:#de6e00 0 -1px 0;
  4. border:1px solid#ff920d;
  5. -webkit-border-radius:15px;
  6. -moz-border-radius:15px;
  7. -o-border-radius:15px;
  8. Border-radius:15px;
  9. -webkit-box-shadow:rgba(0,0,0,.25)0 1px 1px;
  10. -moz-box-shadow:rgba(0,0,0,.25)0 1px 1px;
  11. -o-box-shadow:rgba(0,0,0,.25)0 1px 1px;
  12. box-shadow:rgba(0,0,0,.25)0 1px 1px;
  13. 背景:#ff920d;
  14. }

若要使用渐变调整按钮,同时使用纯色背景颜色作为旧版浏览器的后备,请使用以下CSS:

  1. .button {
  2. 背景:#ff920d;
  3. background:-webkit-gradient(linear,left top,left bottom,from(#ffc039),to(#ff920d));
  4. background:-moz-linear-gradient(top,#ffc039,#ff920d);
  5. background:-o-linear-gradient(top,#ffc039,#ff920d);
  6. background:线性渐变(top,#ffc039,#ff920d);
  7. }

首先为旧版浏览器声明一个坚实的背景颜色。如果浏览器不支持以下行,它将坚持该阴影,每个用户将看到一个部分样式的按钮。如果浏览器支持线性渐变,它将从供应商前缀中挑选出三条线中的一条。如果浏览器制造商已经实现了CSS渐变,它将选择最后一行。

正如您所看到的,针对WebKit浏览器(如Safari和Google Chrome)的CSS与其他浏览器不同。这就是他们使用供应商前缀的原因:当他们开始实现新功能时,他们无法确定将来如何宣布它们。

但是一个按钮不仅仅有一个状态。人们与按钮互动,我们需要为他们设计每一步的风格。这是悬停状态,它使用我们用于文本输入的相同虚假发光效果来更改边框颜色:

  1. .button:悬停,
  2. .button:focus {
  3. Border-color:#de6e00;
  4. -webkit-box-shadow:#ffc039 0 0 5px;
  5. -moz-box-shadow:#ffc039 0 0 5px;
  6. -o-box-shadow:#ffc039 0 0 5px;
  7. Box-shadow:#ffc039 0 0 5px;
  8. }

现在是最终状态;实际点击:

  1. :活跃{
  2. 背景:#de6e00;
  3. background:-webkit-gradient(线性,左上,左下,从(#ff920d)到(#de6e00));
  4. background:-moz-linear-gradient(top,#ff920d,#de6e00);
  5. background:-o-linear-gradient(top,#ff920d,#de6e00);
  6. background:线性渐变(top,#ff920d,#de6e00);
  7. }

Etvoilà!一个性感的,类似3D的按钮,只是要求被推动。

一个偏振网格

我可能有偏见,但没有什么比看到人们分享他们去过的地方的快照。在Gowalla网站周围的多个地方,您会看到人们发布的照片的迷你网格,或者在某个地点拍摄的照片。

To style a bunch of images that look like polaroids scattered on a table, we’ll have to combine a host of different CSS tricks

为了塑造一堆看起来像散落在桌子上的人造偏光的图像,我们必须结合一系列不同的CSS技巧

为了塑造一堆看起来像散落在桌子上的人造偏光的图像,我们必须结合到目前为止使用的所有技巧并添加更多的CSS。我们需要在每张照片上留一个阴影,使它看起来好像躺在桌子上而不是印在它上面。

还应该有一个轻微的渐变,因为没有宝丽来从相机平面出来 - 它总是有点弯曲。

我们还需要一些非常微妙的圆角,让画面更加人性化。

首先是投影。同样,我们要将box-shadow与alpha透明度结合起来:

  1. ul.photos li a img {
  2. -webkit-box-shadow:rgba(0,0,0,.25)0 1px 3px;
  3. -moz-box-shadow:rgba(0,0,0,.25)0 1px 3px;
  4. -o-box-shadow:rgba(0,0,0,.25)0 1px 3px;
  5. box-shadow:rgba(0,0,0,.25)0 1px 3px;
  6. }

接下来,添加渐变,以及图像周围的一些填充:

  1. ul.photos li a img {
  2. ...
  3. 填充:5px;
  4. 背景:#fff;
  5. background:-webkit-gradient(linear,0%0%,0%100%,from(#fff),to(#eee));
  6. background:-moz-linear-gradient(top,#ff,#eee);
  7. background:-o-linear-gradient(top,#ff,#eee);
  8. background:线性渐变(top,#ff,#eee);
  9. }

最后,我们想要微妙的圆角:

  1. ul.photos li a img {
  2. ...
  3. -webkit-border-radius:2px;
  4. -moz-border-radius:2px;
  5. -o-border-radius:2px;
  6. Border-radius:2px;
  7. }

By default, the opacity of each of these icons is .75. On hover, that changes to 1, but instead of just switching from .75 to 1, it fades

默认情况下,每个图标的不透明度为.75。在悬停时,它会变为1,但不会仅仅从.75切换到1,它会消失

幸运的是,使用CSS非常容易进行旋转,因此我们可以使照片看起来分散而不是平行:

  1. ul.photos li a img {
  2. ...
  3. -webkit-transform:rotate(-2deg);
  4. -moz-transform:rotate(-2deg);
  5. -o-transform:rotate(-2deg);
  6. transform:rotate(-2deg);
  7. }

但是,图像都指向同一方向,看起来并不自然。我们可以为每个其他li添加类并设置不同的角度,但我很懒。再一次,CSS有一个解决问题的好方法:

  1. ul.photos li:nth-child(even)a img {
  2. -webkit-transform:rotate(2deg);
  3. -moz-transform:rotate(2deg);
  4. -o-transform:rotate(2deg);
  5. 变换:旋转(2deg);
  6. }

我们现在需要为链接添加不同的状态。既然我们正在做一些疯狂的事情,为什么不进一步提高一点?

  1. ul.photos li a:hover img,
  2. ul.photos li a:focus img {
  3. -webkit-box-shadow:rgba(0,0,0,.5)0 1px 3px;
  4. -moz-box-shadow:rgba(0,0,0,.5)0 1px 3px;
  5. -o-box-shadow:rgba(0,0,0,.5)0 1px 3px;
  6. box-shadow:rgba(0,0,0,.5)0 1px 3px;
  7. 位置:相对;
  8. 上:-1px;
  9. -webkit-transform:scale(1.05)rotate(-2deg);
  10. -moz-transform:scale(1.05)rotate(-2deg);
  11. -o-transform:scale(1.05)rotate(-2deg);
  12. 变换:scale(1.05)rotate(-2deg);
  13. }

这使得阴影更加突出,并将照片向上移动一个像素,从而产生照片浮动的错觉。最后,用变换和缩放放大照片。

从某种意义上说,桌子上的人造偏光是默认状态,它们在悬停状态下浮动。要设计活动状态,想象一下如果用食指敲击其中一张照片会发生什么。它将被压在桌子上,并会弯曲不同。要创建此效果,请使用此CSS:

  1. ul.photos li a:active img {
  2. 顶部:0;
  3. -webkit-box-shadow:rgba(0,0,0,.25)0 1px 3px;
  4. -moz-box-shadow:rgba(0,0,0,.25)0 1px 3px;
  5. -o-box-shadow:rgba(0,0,0,.25)0 1px 3px;
  6. box-shadow:rgba(0,0,0,.25)0 1px 3px;
  7. 背景:#eee;
  8. background:-webkit-gradient(linear,0%0%,0%100%,from(#eee),to(#fff));
  9. background:-moz-linear-gradient(top,#eee,#ff);
  10. background:-o-linear-gradient(top,#eee,#ff);
  11. background:线性渐变(top,#eee,#fff);
  12. -webkit-transform:scale(1)rotate(-2deg);
  13. -moz-transform:scale(1)rotate(-2deg);
  14. -o-transform:scale(1)rotate(-2deg);
  15. 变换:scale(1)rotate(-2deg);
  16. }

你有它。使用一些高级CSS实现您的布局很有趣,但始终记住物理对象的行为方式。不要疯了。只需要少量的盐和胡椒就能让网站焕发光彩。



翻译字数超限