10个最酷的CSS3和CSS效果

 Dain Miller. 经过 Dain Miller.  |  2012年3月16日

我们都知道它,我们都喜欢它,当然,现在你可能已经知道我正在谈论CSS和CSS3。

实际上,我们可能需要时刻才能感谢CSS3,然后进一步加快所有最喜欢的网站的加载时间。他们,如果他们知道他们正在做的事情,那么可能使用CSS3代替一大吨图像来增强用户加载时间,这非常棒。

现在,这是一个非常公开的事实,我们根本不需要图像来做我们过去需要的所有东西。使用CSS3渐变,过渡和所有效果,它似乎已经拍摄了我们网站的肩部的重量,因为让我们是诚实的图像肯定会将它们称为下来。

大学教师’虽然,CSS3和CSS无法做到所有内容,但讽刺地足够,我怀疑我们大多数人都知道其限制或推动其可能性的边缘。

好吧,今天我们在这里找到了这一点。因此,让我们潜入肯定将是对我们所有人的忠诚的一个有趣和令人迷人的发现之旅,这是CSS3和CSS的粉丝。

注意:我正在通过在谷歌Chrome上的推定上进行所有这些,所以请在实际在您的网站中实际实现这些浏览器的所有浏览器中的所有人的爱情。不要从这里复制和粘贴,认为一切都会完美地工作,因为它可能 - 但它可能不是。

 

基于文本的效果

胸角

他们说,即使在CSS3中完成,也可以在3D中显示,如果您的房子有一些闹声音,则可以显示在3D中。虽然,我不确定,但我所知道的是,对于各种项目的某些主题看起来非常棒(如视频游戏复古主题和类似)。

这种效果是通过抵消红色绿色和蓝色(RGB)的两个来创建的。要启动此效果的事情,我们需要两个相同的单词,我们需要它们都能以CSS为目标,因此我们可以在他们的重复和颜色魔法中工作。虽然在这种情况下,我们可以使用这些单词的标签而不是将不必要的HTML添加到我们的标记中,但我们可以使用“:”伪类添加第二个单词。所以要这样做我们将使用这个例子:想象我们正在使用H1来显示我们的第一个单词,例如:

<h1>Anaglyph</h1>

然后我们会做:

h1:after {
content: “Anaglyph”;
}

这将为我们提供很好的重复,并将在页面上显示:“Anaglyphonlyph”。所以,现在让我们开始改变这一点,以便我们可以抛弃一些花哨的3D美丽。

h1 {
display: inline;
position: relative;
letter-spacing: -5px; /* This will push it together giving us a nice 3D vibe */
color: rgba(0,0,255,0.5); /* This will give us a blue at 50% opacity */
}
h1:after {
content: “Anaglyph”;
position: absolute;
left: 8px; top: 6px; /* These are aligning it to be where we’d like relative to the last word */
color: rgba (255,0,0,0.5); /* This gives us a red at 50% opacity */
}

使用RGBA这是非常重要的,因为它允许设置alpha透明度,以便覆盖文本不会完全阻止它下方的文本,并给出了一个很好的透明度。然后,伪元素之后的文本绝对地定位以稍微从底层文本稍微偏移,并且这也非常重要。

务必使用这些位置一点,因为您想要并测试各种颜色,因为这里有很多乐趣。但要完成这一效果,我们折腾了红色覆盖层,瞧瞧我们有血管效果。

 

文本梯度

CSS. 3梯度似乎是这些日子的所有愤怒,而且正确地。正如我们之前讨论的那样,他们以前只能通过Photoshop和嵌入您网站上的图像嵌入的东西。但是,您可以通过一些CSS3向导完成。

而且,有法术在那样的咒语。所以让我们看看我们在字体梯度类别中提供的内容,以及如何在其中结合一些魔法。

线性,顶部到底部:

-webkit-gradient(linear, 0% 0%, 0% 100%, from(#00000), to(#FFFFFF));

线性,左右:

 -webkit-linear-gradient(left, #000000, #FFFFFF);

线性梯度(均匀的颜色停止):

 -webkit-gradient(linear, left top, right top, from(#000000), color-stop(0.25, #FFFFFF), color-stop(0.5, #000000), color-stop(0.75, #1a82f7), to(#FFFFFF));

径向梯度:

 -webkit-radial-gradient(circle, #000000, #FFFFFF);

径向梯度(定位):

 -webkit-radial-gradient(80% 20%, closest-corner, #000000, #FFFFFF);

所以让’在这里设置一个例子,让’s begin with an h1.

<h1>CSS3 Gradient</h1>

 

然后让我们’S开始使用一点CSS3魔法造成风格:

h1 {
font-size: 100px;
font-family: somethingfancy_or_not, arial; /* These two can be anything you like */
/* Here’s where the fun starts */
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to (rgba(0,0,0,1)));
}
h1:after {
content: “CSS3 Gradient”;
color: #d6d6d6;
text-shadow: 1px 2px 5px #000;

现在,不要被RGBA设置中使用的括号数量混淆,因为它们通常可以混淆最擅长的开发人员,我们都会忘记并有时错位,所以请记住我们都是人类。

但让我打破这里发生的事情。在这里,我们使用掩模图像作为一种方法来根据掩模图像剪辑元件的可见部分’透明度。然后我们使用伪元素之后渲染到我们的元素上的良好文本阴影。

这当然不是梯度所必需的,但这是一个很好的云杉方式是什么’正在进行,当然允许您看到我们可以延伸一个简单的渐变。现在,与所有渐变风格一起去绷带,并确保你拿出一些Snazzy的下一个项目。

 

滴下文本

我们非常需要的少数几件事之一,但实际上可能思考是有趣的是滴水,使其似乎似乎与字母完好无损。有时这可能是因为我们痴迷于吸血鬼并希望文本流出复仇的红血,或者它可能只是因为我们希望它滴下水上的蓝色。有时我甚至看到人们用div元素使用它,因为页面从表面滚动到水下造型,其中水下区域在它们的模糊中更沉重,因此似乎滴下来(或似乎水下)。

这对此的语法非常简单,所以我会把它留下复杂的解释 - 但我会给你一个介绍如何在一个句子中做到。它全部基于重复。所以让我们说你想滴下来,我们将在各种y off-lea上使用大约15左右的文本阴影来获得这种效果。如果我们只想要一些,那么我们只会使用少数少数偏移量。使用红色吸力效应的一个例子是:

.drip {
color: #EEE;
text-shadow: 4px 4px 1px #300000;
4px 6px 1px #400000; 4px 8px 1px #500000; /*......and so on, until*/ 4px 60px 5px #FF0000;
}

基本上,您可以保持这效果,直到您达到所需的限制(Y轴偏离设置)或者如果您想要相反,则向后工作以及较小的偏移量。虽然,请务必不过度使用–因为正如我所说,这是一个非常不寻常的效果,而且我确信没有一大吨的用例。但是,肯定会尝试一下,因为重复的文本阴影真的很有趣。

 

时尚特色

缝合的外观

如果您不想使用Photoshop或jQuery来获得一些疯狂的拼接效果,那么CSS3可能是您的下一个最佳选择。现在,当然,任何人都可以在一块内容或一个div上折叠一个虚线边界并说它缝合了,但真正的关键是用几个其他CSS3功能在切线中使用它,真正使它脱颖而出 - 上。

你真正想做的是折腾,漂亮的落下阴影,大的蔓延半径。原因是您希望将背景颜色放在边框上,并为您设置扩展半径(第四个元素)真的很高。例如,我会做一些这样的事情:

.stitched_element {
border: 2px dashed  #ffffff;
box-shadow: 0 0 0 8px #ff0030;
}

这将为您提供一个良好的效果,别人似乎花费了线条和不必要的CSS的线条。事实上,这是一个效果,您可能希望在第一次在Photoshop中创建它,只是让您了解您在这里所做的事情背后的理论。

在过去一个月玩缝合效果的情况下,我可能在Photoshop中度过了6个小时,因为老实说,他们真的很有趣 - 并帮助您了解您究竟试图让CSS做些什么。

 

那个花哨的ampersand.

你可能会问自己,“世界在哪里人们会让那些令人惊叹的安保人员一直看到。”您可能甚至在您遇到的所有标准字体中搜索高低,而且您可以像我一样,你可能还没有找到它,直到你看到有人写作。原因是,它是一个字体,你必须许可才能使用,并通过我们很多人更喜欢Web字体或标准替代方案。

Mac OSX操作系统(默认)上的一个伟大替代品之一是斜体“科钦”。如果您替代地更喜欢Google Web字体,请退房 约瑟福斯 .

我知道这不是很好的CSS3,但它是一个很好的小@字体脸部动作,在这种情况下,我将为您设置一个用于下载字体和所有内容的链接。现在,这是一个Google Web字体,所以他们向您展示了如何在他们的页面上执行此操作,但请记住您可以将两个属性组合使用字体。并且为了缓解我在此处将其包含在代码中的时间,这直接给了给我们一个花哨的ampersand的字体。但是一定要玩这些字体的斜体使用情况,就是您通常会获得真正有趣的安培用法的地方。

@font-face {
font-family: ‘Josefin Sans’;
src: url(http://fonts.googleapis.com/css?family=Josefin+Sans);
}

你去了。虽然有关使用的一些注释。正如您可以从上面的图像中讲述,这是一个非常‘fancy’Ampersand和它最好使用在对比两个字体面孔或婚礼邀请或其他人‘fancy’事件。我也在非常现代的设计作品中使用它,所以不要’t feel you can’使用它,因为你正在做现代化的东西。我只是说它可能不太完美‘grunge’如果这是您要为之的。我不得不说,虽然在大胆和薄的字体之间,但这一个安培看起来很漂亮。

 

单面盒子阴影

我们都知道和爱盒子阴影,但有时典型的阴影可能不是我们想要的。例如,有时我们可能在我们的网站上进行某个元素的逼真阴影,并希望影子仅显示一个特定的一面。或者我们可能有兴趣做一个悬停元素或弹跳元素并让’S脸 - 没有什么可以放大那种像片面盒子的暗影。

我们在这里做了什么,实际上很简单,我们将使用负面扩展半径来挤出一个边缘的盒子阴影。因此,例如让我们想象我们有一个灰色框元素,它设置为40px的宽度和高度为40px。我们的CSS看起来像:

.one-sided-shadow {-webkit-box-shadow: 0 8px 6px -6px black}

这将完全给我们我们所需要的,并且在一个简化的代码中。就像我说的那样,如果你正在使用照明元件(或主题)以一个特定的方向遮蔽你的网站,因为它是一幅画,这是你的完美解决方案。

同样,弹跳或悬停:反弹元素只是完美的。在后一种情况下,在反弹开始后激活阴影,并停用一旦它降落后,哇似乎已经进入了设计师。

 

滚入CSS Sprite

CSS. 精灵是一种有趣的技术,我们大多数人都可能熟悉它们。但是,如果你不是,让我总结他们是什么。 CSS Sprite是包含至少两个观看区域的一个大图像,其在视图之外,并且在某种用户交互地查看(通常是鼠标悬停)的视图中。

既然你知道我们的首先是我们的第一个,可能是CSS精灵图像的最基本。在这种情况下,我们将使用链接悬停,两个图像可以是您喜欢的任何东西,但我们会称之为“sprite.png”。我们还将使用一个元素来容纳我们的链接和我们的图像,这就是为什么我们使用背景CSS语法。所以我们的代码看起来像:

a {
display: block;
background: url(sprite.png) no-repeat;
height: 50px /*Example that is needed for the hover explanation*/
width: /*the appropriate width here*/
}
a:hover {
background-position: 0 -50px;
}

正如您所见,一旦用户悬停在图像元素“元件”上,就可以实现的真实秘密,并且在Y轴上以50像素的长度转换的图像转换。它的原因是图像的精确高度,因此在过渡悬停期间不会没有解放或重叠,并且可以看起来清洁和光滑。

这是精灵图像的真实秘密,并将悬停在动作上。无论您可能有一个非常奇怪或椭圆形图像,您需要偏移y(或x)偏移,具体取决于您的宽度(x)或元素的宽度(x)或高度(y) 。现在干净,简单而且非常有趣,并制作自己的精灵!

 

分层

您可能对您的网站上的分层内容感兴趣。是纸,叶,树木或更荒谬的东西,就像人们的面孔,你可以使用相同的语法来逃脱你想要的东西。它基本上是一个选择的盒子阴影,关闭了你的第一个元素,给出了你正在寻找的“效果”。

在这种情况下,我们将使用一个简单的div与灰色背景,以便您可以收集我们所指的内容。我们将像往常一样潜入,然后解释一下。

嗨,我的名字是分层div。
.layering {
background: #EEE;
box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 10px 0 -4px #EEE, 0 10px 2px -5px rgba(0,0,0,0.15), 0 20px 0 -11px #EEE, 0 20px 1px -8px rgba(0,0,0,0.15);
}

我们看起来可能看起来有点复杂,但实际上是相当简单的。发生了什么是阴影,层,阴影,层和阴影。因此,这种情况下的顶层是#eee的背景颜色的div。然后我们将我们的第一个框影子作为上层上的阴影,然后显示第二层(注意#eee),然后我们有第二层的影子,然后是第三层(再次注意#eee)然后是它的影子。

相当简单,并且我们使我们制作的选择提供了一个很好的堆叠或分层效果。同样,这可以与任何东西一起使用,你只需要纠缠于对齐来实现它。然而,请记住,在进行分层时,您将最好地从左下角到右下方的右下方使用您的图像或div,因为它更自然地流动。

 

功能

响应设计:iPad样式

让我们面对它,响应设计非常重要。如果您讨厌媒体查询和流体网格,我不在乎,无论您是否喜欢它们,您将在几年内使用它们。预计它是Web设计的标准,特别是考虑到符合市场的各种屏幕尺寸和设备分辨率,并且通过27'imacs到iPod触摸的一切令人惊出的高速速度,介于两者之间,他们都浏览了网络。

他们都需要一个漂亮的经历,诚实地,没有人想要为每个设备制作不同的版本,因为这只是工作太多。我们忙碌的人,所以我们需要一个解决忙碌的人。这就是媒体查询进入混合的地方。我将重点关注的是iPad特定查询,但从此处可以收集您需要将查询推出到其他屏幕大小。之后只会改变您网站的布局以反映这些更改的屏幕尺寸。所以让我们下拉一些代码并之后谈论它。

@media only screen and (device-width: 768px) { /*General layouts*/ }
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {/*Portrait*/ }
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { /*Landscape*/ }

这不应该太难看出这里发生了什么,但我们正在做的是使用媒体查询’ 具体语法 要分解并启用我们网站的观看以反映特定屏幕大小的最佳选择。所以让我们说我们有一个H1,其中一些文本在60px中大小…嗯,这可能对IMAC和其他大型桌面很好,但这可能不太可能在更保守的iPad视图上与您的其余部分合理。所以我们将要做的就是我们的代码写入:

@media only screen and (device-width: 768px) { h1: font-size 60px  }

它将适当为iPad屏幕尺寸。当然,那些大小只是你最好测试你的网站,以获得特定规模,然后继续最终确定查询,但这是一种在长期运行中为您节省大量工作的方法(以及用户愤怒)。

注意:如果您熟悉面向对象的编程,那么这将是第二种的东西,我们正在研究的是基本上是“如果那是”我们的浏览器对我们网站显示的渲染的类型的声明。在我看来,这是CSS中最好的事情之一…ever.

 

有用的导航(扩展)

导航并不是完美的我们的网站,因为有时我们需要回到绘图板,以重新思考我们如何做到,如果我们可以使用CSS3来帮助我们。

让我们想象我们网站顶部有一个导航栏,但我们想在用户鼠标悬停它时添加更多弹力,让他们知道他们可以使用它,并且它实际上是一个有吸引力的事情点击。嗯,最好的方法是使用简易方法来抛出简单的WebKit转换。所以我们所做的就是举个例子,就是‘nav’ element.

当然,在这个例子中,你必须自己做出所有的设置,我们只是在看着这种情况下帮助你的确切暂时性因素。

纳税 a {
-webkit-transition: width 0.15s ease;
}

或者

纳税 a {
-webkit-transition: all .2 ease-in-out; } /* based on your preference for anims obviously */
nav a:hover {
-webkit-transform: scale(1.1);
}

有关WebKit转换属性的一些注释,因此您可以在您的网站上正确使用它。这是一个神奇的魔杖基本上,并且有三个值。动画的属性,动画的持续时间和“定时函数”(这效果效果动画加速,以便更平滑的效果)。

有很多方法可以解决这些方法,以及很多资源 这里 这里 这里 。但我希望这会给你一个介绍他们可能的介绍,并且真的致力于理解,以便你出去和试样一点。在这里有很多乐趣。

所以我们来到我们的旅程结束。只是注意,这不是任何手段的详尽或完整的清单,但我希望它激发了您对CSS和CSS3可以执行的一些更有趣的事情的兴趣。它有时是一个疯狂和娱乐的世界,有时令人沮丧的世界。

毕竟,我们都知道设计师无法获得diver正确显示子元素的方式,或者当文本元素并不完全执行您想要的东西时。

因此,与您最喜爱的设计师保持联系,并在这个空间中长出一个朋友,您可以在这个空间中沟通并以来回分享这些技巧,因为我知道这就是我如何了解到今天我的大部分分享要说我认为这是你可以作为网络设计师做的最好的事情。 Twitter是一个很好的资源,并搜索[Dot] Twitter甚至更好。与此同时,我会让你试验但不是在最后一句之前。

走出年轻的帕瓦兰,并与您在CSS(3)内的野生风格和设计中等待您的Web设计师的乐趣玩耍。

 

你最喜欢的新CSS3技术是什么?或少使用的/鲜为人知的CSS技术?让我们在评论中知道!