button

CSS3 Buttons框架

现在使用CSS3属性制作Buttons越来越普及了。早前在站上也放了一些相关方面的制作方法,在《CSS3 Gradient Buttons》一文中第一使用CSS3GradientBorder-radiusbox-shadow等属性制作了Buttons。

CSS3和HTML实体符制作带图片效果的Buttons

大家都知道,无论我们是设计一个网站或Web应用程序,我们都少不了Buttons。自从有了CSS3后,我们制作一些漂亮的Buttons就容易多了,只是有一点头痛的是,IE6-8不能支持这种靓丽的Buttons。前面我在《CSS3 Gradient Buttons》和《CSS——Bootstrap From Twitter》都有介绍关于CSS3制作好看的Buttons方法,并且在《LESS和CSS3动态制作按钮》介绍了如何使用CSS3结合Less动态制作不同的Buttons。

CSS3 Gradient Buttons

前面在《CSS3 Gradient》一文中详细介绍了CSS3中的Gradient属性的使用,一直没来得急介绍这方面的实例,今天在Nick La (@nickla)的Web Designer Wall中看到了一篇《CSS3 Gradient Buttons》主要介绍用CSS3中的Gradient属性制作Buttons的效果。觉得蛮好的,特意整理一份放上来与大家分享。

jQuery制作go to top按钮

每每看到网友Blog的页面底部或中间有一个按钮回到页面顶部,羡慕死人了,但自己就是做不出这样的效果。后来在google和baidu搜寻了一下,仔细思考,并不像当初想象的那么复杂。经过整理贴到blog中与大家一起分享一下。

我们先来看看效果图吧:

这个效果是“点我加到页面顶部”按钮在页面底部,当然还有一种效果就是这个按钮在页面中间,我就不在示例了。这也是最简单的效果,还有一种效果就是页面一开始不显示这个按钮,当滚动条向下移动时,到一定的距离才显示(也就是垂直滚动条距顶部有一定的距离时这个按钮才显示)。

我总结了几种方法,现在从简单到复杂依次看看几种实现效果的方法:

DEMO一:

这种效果是最原始的,也是最简单的。当页载入时,这个按钮就存在,并固定在页面的底部,页面垂直滚动条离顶部有一定的距离时,点击“点我回到页面顶部”按钮时,页面就会回到顶部。那就一起看看其实现过程吧:

HTML 代码:

input 按钮在IE下兼容问题

这段时间在处理网页默认的input 按钮时,IE下常显现不一致的宽度问题,让人感到很纠结。所以今天请教了几位高手把这个问题解决了,现在贴出来和大家共享一下,当然这个方法在网上曾有人写过,大家可以一起来相互探讨一下。

页面

返回顶部