Airen的博客

CSS3 RGBA

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

CSS3 Gradient

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特有的滤镜来实现,在后面会列出滤镜的使用语法,但不会具体介绍如何实用,感兴趣的可以搜索相关技术文档。那我们了解了这些,现在就开始今天的主题吧。

Drupal7中设置用户头像

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

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

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

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

 

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

玩转Drupal7的User Login

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

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

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

Jquery和CSS3打造靓丽的动画进度条

今天在做项目中碰到一个需要用制作一个动画的进度条,一开始搞不清楚是怎么一回事,后在google中搜索了css progress bar,真的太多这样的资料,后随便弄了一个。今天贴出来与大家分享。跟我一起走吧>>>>。

CSS Globe为我们提供了一种简易实现动画进度条的方法。只需要3个元素,1个内容块和2个内嵌元素即可实现一个漂亮的动态进度条效果。只是需要注意的 是,这个效果是比较漂亮,但并能实现实时载入。而是在页面首次载入的时候,会根据你的设置,以Gif动画的形式显示进度条的载入。也就是说,可以用来美 观,但不具有交互作用。如下图所示:

用JQ控制Drupal7 中block内容显示与隐藏

今天在drupal建站游逛时,发现其左边栏的JQ效果特吸引人,就拿其中的一个用户登录的block来说吧。一开始进入的时候如下图所示:

当你在标题处点击时就会把block中的内容隐藏起来,就成了下面这个样子:

在次点击时又会回到图一的效果。如想真实体会一下,你可以登录Drupal建站看看实际效果。看完初步效果后,我们在本地的drupal中来开始制作这样的效果。

如何覆写node中的submitted

        弄过drupal的,对blog中的submitted都不会太陌生吧,Submitted by admin on Tue, 04/12/2011 – 11:54这是其默认的一种风格,今天我们只要来看如何在drupal7中改写这种风格。

        首先我们来看看在drupal6中的实现方法:

        1、在相应的主题下,加上下面的代码

function yourthemename_node_submitted($node) {
  return t('Posted by !username on @datetime', array(
    '!username' => theme('username', $node),
    '@datetime' => format_date($node->created, 'custom', 'd M Y')
  ));
}

      

       2、然后在node.tpl.php文件中加入

Drupal主题的基础样式—reset、base、layout、print

        从事Drupal工作有一年多了,每每一个新项目开始时,都不免一些重复的样式工作设置,这次特意花了点时间总结了一下,贴出来与大家一起分享。当然这里虽然说是在Drupal中应用,我们也可以应用在不是Drupal的项目中。今天我们主要从以下几个方面来讲述,第一是重置样式reset.css;第二是基本样式base.css;第三是网格布局样式layout.css;最后是打印样式print.css。这里需要注意的一点是,在Drupal中的一般项目中很少应用grid布局,这里特意把这一块放进来是为了方便其它项目的布局设置。

我们费话少说,现在就请大家跟我一起进入今天的主题吧

一、重置样式:reset.css

Drupal7基础教程--用户(三)

        前面在Drupal7基础教程─用户,第一,第二篇我们介绍了如何在Drupal注册用户,管理员管理用户,设置用户权限等,今天我们在花一节时间主要来介绍一下用户头像设置。

用户头像

        在我们Configuration > Aaccount settings(admin/config/people/accounts)中有一个用户的个性化设置(Personalization),在这里我们可以设置用户相关资料,比哪签名,用户头像等:

         现在我们先来讲一下上图的几个关键部位的设置

         1、首先需要开启上传用户头像的功能,也就是说在Personalization区域中的enable user pictures选项前的复选框打上√,这样我们就开启了上传用户头像的功能:

Drupal7基础教程--用户(二)

       前面我们在Drupal7基础教程--用户(一)中主要介绍了用户的注册、管理员如何增加、删除用户等内容,今天我们接着介绍第二部分:用户角色和用户权限。我们现在就开始进入正题吧。

用户角色(User Roles):

       用户角色是用来控制你的drupal网站中的用户,哪些是可以帮你建设网站,哪些是只能浏览网站,并确定哪些内容给哪些用户浏览等功能。

       用户角色控制是在用户角色设置页面完成的,具体位置就是:点击管理菜单中的people,选择Permissions中的roles(admin/people/permissions/roles)如下图所示:

页面

返回顶部