用滑动门技术设计按钮的图文教程
2007-07-23 00:00
260 查看
本文为翻译文章,全文地址:http://diger.cn/article.asp?id=351
原文地址:http://www.filamentgroup.com/lab/buttonElement/
Particle Tree 最近发布了一篇文章描述了一种他们拿出的设计按钮元素的技术,对于那些不熟练的人来说,表格按键是出了名的难以定制。典型的解决方案是使用浏览器提供的默认按钮,或者是使用一个图形输入。当图形输入完成了需求结果时,它请求创建一个新的图形为每一个按钮用它的文本“Baked-in”(没有提及以hovers交换它)。
尽管Particle Tree的技术提供了一种可靠的方案,它不能满足我们的需求。我们需要一种使用了滑动门技术的按钮,一种真正的HTML文本,不需要请求JavaScript转滚或者提交表格。满足这些条件就意味着input和anchor元素被排除了。很显然,按钮元素正是我们唯一的选择。下面的技术示范了一种使用滑动门技术的跨浏览器的按钮的技术。
查看Demo
标签:
CSS:
程序代码
CSS For IE6和IE7(有时候需要)
浏览器支持:
IE6,IE7,Firefox(mac/pc),Safari,Opera,Camino等等。
警告:为了使hover在IE6中有效,你将需要编写一个类触发器。尽管不像图片交换一样糟糕。
原文地址:http://www.filamentgroup.com/lab/buttonElement/
Particle Tree 最近发布了一篇文章描述了一种他们拿出的设计按钮元素的技术,对于那些不熟练的人来说,表格按键是出了名的难以定制。典型的解决方案是使用浏览器提供的默认按钮,或者是使用一个图形输入。当图形输入完成了需求结果时,它请求创建一个新的图形为每一个按钮用它的文本“Baked-in”(没有提及以hovers交换它)。
尽管Particle Tree的技术提供了一种可靠的方案,它不能满足我们的需求。我们需要一种使用了滑动门技术的按钮,一种真正的HTML文本,不需要请求JavaScript转滚或者提交表格。满足这些条件就意味着input和anchor元素被排除了。很显然,按钮元素正是我们唯一的选择。下面的技术示范了一种使用滑动门技术的跨浏览器的按钮的技术。
查看Demo
标签:
<button value="submit" class="submitBtn"><span>Submit</span></button>
CSS:
程序代码
button { border:0; cursor:pointer; font-weight:bold; padding:0 20px 0 0; text-align:center; } button span { position:relative; display:block; white-space:nowrap; padding:0 0 0 20px; } /*blue buttons*/ button.submitBtn { background:url(images/btn_blue_right.gif) right no-repeat; font-size:1.3em; } button.submitBtn span { height:50px; line-height:50px; background:url(images/btn_blue_left.gif) left no-repeat; color:#fff; } button.submitBtn:hover { background:url(images/btn_blue_right_hover.gif) right no-repeat; } button.submitBtn:hover span { background:url(images/btn_blue_left_hover.gif) left no-repeat; }
CSS For IE6和IE7(有时候需要)
button { width:auto; overflow:visible; } button span { margin-top:1px; }就像你能看到的那样,每个状态使用了2个图片(总共4个图片)。进一步简化,可以将这些状态转化为两个。但这种想法的最初测试出现了不一致的结果。
浏览器支持:
IE6,IE7,Firefox(mac/pc),Safari,Opera,Camino等等。
警告:为了使hover在IE6中有效,你将需要编写一个类触发器。尽管不像图片交换一样糟糕。
相关文章推荐
- SDL入门教程(十一):2、设计按钮ButtonClass
- C#、ASP.NET、黑客技术、网页设计、教程下载大全
- 基于CSS的30个导航和按钮优秀设计教程
- 滑动门技术制作不规则按钮
- 黑马程序员——怎么配置EmEditor详细图文教程——黑马 IOS 技术博客
- jQuery 打造动态渐变按钮 详细图文教程
- 13 个 CSS 按钮的教程和技术展示
- 计算机辅助设计技术基础教程
- 初探JNI技术,HelloWorld 图文详细教程
- CSS滑动门技术宽度自适应按钮
- DIV+CSS仿网易的滑动门技术AJAX,希望对首页模板的设计有帮助!
- jQuery 打造动态渐变按钮 详细图文教程
- Photoshop如何设计复古个性的花纹印章图文教程
- 利用Java Swing技术设计一个鼠标点击速度比赛游戏程序。程序显示一个按钮和一个文本框,用户点击按钮,文本框显示鼠标点击次数。两个人同时运行本程序,即可进行比赛
- 手把手教你如何设计打地鼠游戏(技术教程)
- 深度技术用户三分钟开发一个Web托管Win10应用官方图文教程
- 使用教程和技术设计
- 30个基于CSS的导航和按钮优秀设计教程
- wex5 教程 之 图文讲解 考题模块框架设计