你可能知道CSS是一种简单的设计你的网站的语言,但是它的功能比你想象的要多得多。从照片真实感的图像到甚至电子游戏,你会惊讶地看到一个伟大的开发人员能用CSS完成什么。
黄石设计网站有各种各样的过滤器效应在这里,所有的开源和可供使用的网页设计项目。这些模块都是JavaScript的,并且大多是HTML无关的。这意味着它们比你想象的要轻。看看这些惊人的纯CSS实验,也许可以自己尝试一些。
太阳系
哇!如果你热爱太空,你会被这个太阳系吹走的动画片用CSS。这也不仅仅是一个美丽的动画,每颗行星相对于实际的地球年精确地围绕太阳旋转。
梯度背景动画
动画是一个臭名昭著的问题--网站的诱饵。如果优化不当,它们可能导致经济大幅放缓。这个美丽的动画梯度是非常轻量级的,更不用说容易编辑和添加自己的颜色。
堆栈博弈
您不需要JavaScript来制作游戏。它可能很简单,但纯粹的CSS堆栈游戏是有趣的玩,图形也相当不错。这不可能是一件容易的事情,但它只是展示了一个小CSS的能力。
三维进度条
美丽,轻量级进度条,易于定制,以适应您的项目。这些条子是用3D制作的,有着独特的液体外观。你甚至可以把它们变成迷你3D海图!
故障文本
浮躁的文本看起来总是很酷,而这个CSS实验使它在没有任何gifs、JavaScript或HTML的情况下变得活跃起来。如果你想给你的网站添加一个小故障效果,请检查它。
弗朗辛

你可以用HTML和CSS制作艺术!弗朗辛是一幅18世纪风格的绘画,纯粹是用代码制作和展示的。然而,它看起来和其他传统上创作的艺术品并没有什么不同。
手机
与Francine类似,这款手机只使用CSS和HTML创建。但是它看起来像其他的照片在网站上!如果你感兴趣,你可以玩这个代码,看看这个实验是如何创建的。
地图创造者
您认为需要JavaScript来创建这样的东西吗?再想一想!这个可爱的3D地图创建者是由CSS(和少量HTML)组成的。太让人兴奋了吧?
Instagram.css

需要些假的Instagram为你的网站过滤?这组小型化文件也附带了安装教程。现在,您可以轻松地将Instagram过滤器添加到任何图像中。
动画梯度鬼按钮
这是令人惊讶的,这是什么都没有用CSS编码。有了它漂亮的动画和梯度效果,这个按钮将在任何网站上看起来都很棒。
Devices.css

如果你曾经想在你的网站上放上一部假手机或电脑,然后在屏幕上放上你选择的图片,那就看看这个实验吧。这些都是模仿现代设备,也!
动态图像着色
这是相当酷的:改变一个图像的颜色只有CSS和颜色选择工具从您的计算机。
小,有反应,美丽
你在网站上看到的许多令人惊讶的效果可以归因于JavaScript。但遗憾的是,JS并不总是最轻量级的解决方案。但是,您可能会对CSS的能力感到惊讶。而且,如果做得正确,它对性能的影响往往要小得多。
黄石设计网站不管是哪种方式,看到所有CSS开发人员都能想到的创造性想法是很有趣的。这些实验是由一些真正的创新开发人员做的,所以去给他们一些爱,让我们知道你认为哪一个最酷!