一些简单好玩的样式集

上周六刚刚辞职,这几天闲着没事把wp升级了下,重做了样式,务求简单易用。

我确实挺懒,每年浪费几百大洋弄这么个博客,结果到现在也没写上几篇,今天天气晴朗,心情不错 :c5 ,写点简单好玩的。

博客右下角添加了个返回顶部按钮,当然,假如你使用的是IE8及以下浏览器,是看不见的,使用其他浏览器的同学可以点击 F12 按钮,调出开发者工具选项查看实现方式,这里我来讲解下各样式含义:

1
2
3
4
<div id="gtt">
     <div id="tt"></div>
     <div id="g"></div>
</div>

这是它的基本结构,由一个圆角方框,一个横条,一个三角组成,样式如下:
继续阅读全文

设计制作一个自己的弹出提示框

做前端的一般都知道,尽量减少使用alert,主要因为系统的弹出框会终止当前一切进程,甚至连窗口操作也被禁止,实在是不太友好,所以这次讲下如何定制一个你自己的弹出提示框。即:使用html+css制作一个提示框,并使用javascript为它添加常用方法来达到替换系统提示框的目的。

因为时间有限(太忙了,养家糊口的男人你伤不起啊~),我打算分3篇:1、设计制作一个自己的弹出提示框;2、为你的弹出提示框添加交互功能;3、拖拽你的弹出提示框。

在此之前先让我们看下各浏览器的alert效果:
继续阅读全文

使用css3为你的博客增添光彩

好久没更新了,上个月结婚,忙里忙外的,主要自己也懒 :c5

博客进行了一次改版,用ie看不出来的,尝试下chrome,firefox,opera或者safari,怎么样,发现不同了吗,这就是css3的效果

这次改版中,我尽量少的使用图片,大部分的效果都使用css来实现,包括阴影,圆角,渐变,动画,全部基于最新的css3

我会通过页头的菜单来为大家讲解下css3的一些效果,使用ie的同学请看下图

博客菜单

假如你使用chrome或者firefox的话会看到上图的效果,具体的实现是为ul-li菜单添加阴影,蓝色背景,圆角,以及动画效果,代码如下:
继续阅读全文

使用jquery制作循环渐隐动画

不知大家注意到本博右上角的浏览器动画没,九个浏览器图标循环渐隐,我知道速度很慢 :a5 ,但要的就是不经意间的华丽,如锦衣夜行,,, :b9

其实现在一些看起来很炫的动画完全可以由js来实现,完全不需要flash(i hate flash! :e7 ),本例就来讲下如何使用强大的jquery来实现这一效果.

首先,你需要在你的博客上添加jquery,wordpress自带jquery,但最好使用Google提供的Google AJAX Libraries API.
一来减轻你服务器负担,二来Google的速度确实不错,更可能人们在别的地方早已经缓存了这个文件,毕竟jquery现在很流行的.

仔细观察右上角动画的效果,构想下它的思路,假设是你,如何实现呢 :c9
继续阅读全文