CSS不总是必须是严肃的事情。在本文中,您将看到25个有趣、新颖和实验性的CSS技术和演示.注意:这里讨论的一些技术和示例可能无法验证,不能被某些浏览器正确呈现,并且可能不符合基于标准的设计和开发。
这里显示的许多技术都用于探索只.
CSS透明菜单下拉
这个演示展示了如何创建一个支持透明的高级CSS下拉菜单(需要JavaScript支持IE6的PNG透明)。
返回图像映射
在本例中,您将看到一种使用气泡工具提示创建基于css的图像映射的漂亮方法。
CSS 3D拼图
CSS滚动图像映射
这个例子涉及到一个带有“热点”的全景图片。单击热点会在另一个面板上显示该区域的描述和放大图像。
CSS装饰图库
网页设计师墙向我们展示了如何通过在图像上使用背景图像来创建更漂亮的图像画廊。
用CSS玩纸牌
这个例子使用特殊的HTML字符来显示牌的花色,然后使用CSS来设置它们的样式和位置。
荷马CSS
在这个例子中,Román Cortés用HTML字符/文本和CSS重新创建了Homer Simpson。请查看动画改编作者:Ned Batchelder。
CSS的房子
设计探测器通过使用Div和CSS样式创建了这个房子。
“秘密消息”与CSS定位和透明度
这个例子由Chris Coyier的CSS-tricks演示,当你向下滚动网页时,会显示一个“秘密信息”。
如何创建轻量级滴阴影
这个例子使用PNG的(和透明度)将投影应用到Div的。如果没有JavaScript,这在IE 6中是行不通的。
多姿势太极拳
Complexspiral
在这个演示中,CSS大师Eric Meyer展示了CSS的一些透明/不透明功能。
DVD录音机遥控器
Design Detector使用HTML元素和CSS创建删除控件。
划清界限
来自CSSplay的Stu Nicholls吸引了使用CSS的铅笔。将鼠标悬停在铅笔上可以画出一条水平线。
CSS文本阴影
这是一个纯粹的基于css的解决方案,应用投影到文本。它涉及到重叠的文本,这不是一个好的实践。
CSS华丽链接
在这个导航条示例中,将鼠标悬停在菜单项上会导致左侧的箭头在菜单项上缩放。
地图的流行
这个例子通过一个映射展示了CSS图像映射。将鼠标悬停在热点上,右侧显示更多信息。
纯CSS弹出窗口
该技术涉及隐藏的Div,当您将鼠标悬停在触发器链接上时,这些Div就会显示出来。
CSS Sticky Footer
这是一个固定在网页底部的页脚,与高度无关。
可伸缩的明星
使用CSS,绘制一个简单的形状(星形)。当用户使用浏览器控件调整字体大小时,它会缩放(至少对于现代浏览器是这样)。
CSS:菜单描述
在这个基于css的菜单中,将鼠标悬停在菜单项上可以显示有关该菜单项的更多信息。
CSS渐变演示
这个演示使用css样式的空Div(不是一个好的实践)和背景颜色来模拟渐变的效果。
缩放背景图
下面是一个缩放背景图像的技巧(调整你的浏览器大小,看看它是如何工作的)。
CSS垂直柱状图
CSS渐变文本效果
这种技术通过叠加PNG图像来增加文本的光斑。它需要alpha透明,所以在没有JavaScript的IE 6中不能工作。