上一节花了大篇幅整理了CSS3中动画属性中的Transform，今天我们接着一起来看CSS3动画属性中的另一个属性Transition。

前面我们一起学习了CSS3中的渐变、圆角、阴影等几个属性的使用，今天开始我们一起来学习有关于CSS3制作动画的几个属性：变形(transform)、

上一节我们一起探讨了一下CSS3的文字阴影text-shadow的使用方法，今天我们接着一起来探讨一下CSS3中的另一个属性box-shadow的使用方法。

前段时间整理了CSS3中的渐变Gradient、透明度RGBA、边框圆角box-radius三个新属性的使用方法，这几次继续整理了有关于CSS3的text-shadow的使用方法。今天特意花了点时间贴上来与有共同爱好的朋友一起分享这个新属性的应用。

做前端的朋友都知道，png32的透明图片在IE下显示会带有一种兰色背景色一样，为了处理这样的兼容问题，我想大家都很头痛，以前只在静态页面下通过DD_belatedPNG的js来处理过这样的bug，但在Drupal下fix这样的bug还是第一次，因此也是费了很久的时间，还多亏朋友帮忙，才解决这样的一个兼容问题。

前面系统总结了CSS3中Gradient和RGBA的用法，今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法。在CSS2中，大家都碰到过圆角的制作。

前面我们一起探讨了一下CSS3 Gradient（css3 渐变），今天我们一起来探讨一下CSS3中的RGBA。RGB对于大家来说一点不陌生，他就是红色R+绿色G+蓝色B，那现在我们所说的RGBA又是什么呢？说得简单一点就是在RGB的基础上加进了一个通道Alpha。从而形成了我们今天需要讨论的RGBA。如果需要更详细的解说，大家就跟着我一起往下看吧。

CSS3发布很久了，现在在国外的一些页面上常能看到他的身影，这让我羡慕已久，只可惜在国内为了兼容IE，让这一项技术受到很大的限制，很多Web前端人员都望而止步。虽然如此但还是有很多朋友在钻研CSS3在web中的应用，为了不被淘汰，我也开始向CSS3进发，争取跟上技术的前沿。从现在开始我会不断的发布一些CSS3的应用，和大家一起分享，今天我们首先要看的就是:CSS3： Gradient─CSS3渐变。

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核，主流内容主要有Mozilla（Gecko）（熟悉的有Firefox，Flock等浏览器）、WebKit（熟悉的有Safari、Chrome等浏览器）、Opera(presto)（Opera浏览器）、Trident（讨厌的IE浏览器）。本文照常忽略IE不管，我们主要看看在Mozilla、Webkit、Opera下的应用，当然在IE下也可以实现，他需要通过IE特有的滤镜来实现，在后面会列出滤镜的使用语法，但不会具体介绍如何实用，感兴趣的可以搜索相关技术文档。那我们了解了这些，现在就开始今天的主题吧。

前几天碰到一个制作用户头像的东西，也就是当用户登录后需要打印其头像，如下图所示

虽然在drupal6中做过类似的东西，但是换到drupal7中就不会有效果了，几经寻找，今天终于给弄出来了。稍做整理后放上来跟大家一起共享。

首先来看看其在drupal6的实现方法，主要分两大步，第一就是在template.php中修改

function yourthemename_preprocess_page(&$vars) {
 //code
}

我们在上面这个函数加入下面的代码：

网站的登录和注册，大家肯定不会陌生了，而对于玩drupal的朋友来说，更不会陌生吧。接触drupal不久，也并不怎么会使用其核心的东西，就比如说我要在页面头部加一个“登录 | 退出”这样的链接，就会让我够受的了，如果要像下面图示的User Login框

头就更大了。所以这次花了大力气专门去了解和学习这一块的东西，终于还是让我实现了，为了像我这样的初学者不在头痛，贴出来分享，希望能给需要帮助的朋友带来一丝灵感。那我们开始吧：

第一种方法：在page.tpl.php添加User Login