Airen的博客

CSS3 制作Drop Shadow效果

在介绍CSS3系列时,我花了一篇很长的篇幅专门介绍了CSS3box-shadow属性以及其具体的使用等。

CSS3 Tips

今天主要和大家一起学习Red写的《CSS3 tooltips》。从里面我们一起来学习如何使用CSS3来制作tips。

如何使用jQuery制作手风琴效果

上回在《如何使用jQuery制作展开和折叠切换面板》中介绍了如何使用jQuery的“.slideToggle”或“toggle(function)”来制作展开和折叠面板效果。今天主要在上文的基础上来使用jQuery来制作一个手风琴效果。手风琴的效果就是在我们上文中的展开与折叠效果上的基础上增加了一点特效。就是当你点击一个窗格展开,而同时其他的窗格折叠,具体效果可以点下面DEMO所示效果:

纯CSS3制作Tabs选项卡

Tabs选项卡对于Web前端攻城师来说并不陌生,也制作了不少,我们在《CSS3+jQuery制作切角的Tabs》也介绍了一个使用CSS3配合jQuery制作Tabs的实例。我想大家在制作Tabs选项卡大多数都是使用jQuery或者javaScript来实现的。而单独使用纯CSS来制作Tabs来说还是比较少见。

CSS3+jQuery制作切角的Tabs

今天在Red阅读了一篇《CSS3 tabs with beveled corners》博文,介绍了使用CSS3制作切角的Tabs,觉得特有意思。其中含量最高的并不是其如何实现的Tabs,而是其中如何使用CSS3来制作切角效果,如:

如何使用jQuery制作展开和折叠切换面板

在这节中,我们主要来学习如何使用jQuery.slideToggle()方法来制作显示和折叠的切换面板。当你点击标题时,与其相对应的相邻的主内容将会显示,当你在次点击此标题时,其对应的主内容又将会折叠起来。如下图所示:

实现上面的效果,对于jQuery来说是一件非常容易的事情,下面我们就一起看如何实现上图所展示的效果。

HTML Code

我们先来看看HTML Code

jQuery制作多级导航菜单

前面在《jQuery+Superfish制作下拉菜单》中介绍了使用jQueryJoel Birch写的Superfish插件制作下拉导航菜单。使用起来是方便,而且还可以制作出不同的导航,功能强大,但有时我们只是需要做一个多级导航菜单,没有必要使用插件来制作。假使我们不需要兼容IE6这个浏览器的话,我们完全可以使用纯CSS来制作一个多级导航。比如说

jQuery制作随机变色

大家都知道,我们可以通过:hover来改变元素悬停状态下的相关参数,特别是元素的色彩,但:hover在现代浏览器上实现是没有问题,可在IE6下就只能适用在<a>元素上,其他元素就无法正常显示(具体可以看《浏览器兼容之旅的第四站:IE常见Bug——part2》)。但是我们可以通过jQuery来实现各个元素的相关属性改变。今天主要和大家一起来学习用jQuery随机改变元素的相关颜色,比如说:背景色,前景色,边框颜色等。

目标

我们今天主要来看一个实例——随机改变链接元素的前景色和背景色

jQuery制作平滑动画菜单

最近在学习jQuery的相关知识点,今天在buildinternet.com看到一篇由Zach Dunn执笔介绍的《How to Make a Smooth Animated Menu with jQuery》,此文主要介绍如何用jQuery制作平滑的动画菜单。觉得效果蛮好的,而且代码也简单。特意整理一下,贴上来与大家一起分享。

浏览器兼容之旅的第五站:IE常见Bug——part3

有关于IE的Bug系列,我们前面一共介绍了四个部分:

页面

返回顶部