文章关键字 ‘按钮’

CSS前景背景自动配色技术简介

2018年11月18日,星期日

智能配色

CSS越来越强,现在已经可以实现根据不同的背景色显示不同的前景色进行匹配了,例如右图GIF图片所示,背景色一开始深色,文字颜色为白色,当背景色逐渐变淡的时候,文字颜色也从原来的白色变成黑色了,同时边框也显示出来了,以便有更好的识别度。如何实现的呢?去文中一探究竟吧~

阅读全文…

CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产

2018年11月18日,星期日

hue-rotate滤镜色调色彩

传统按钮都是通过具体色值进行赋色的,但是有代码量大,开发维护成本高,且色值之间饱和度亮度存在差异问题。有没有什么简单的方法可以快速批量产生出各种颜色的按钮呢?有!就是借助CSS filter:hue-rotate色调旋转滤镜。具体如何实现呢?请点进去一看究竟吧~

阅读全文…

实力科普:为什么浮层或弹框一定要有叉叉关闭按钮?

2018年07月14日,星期六

之前自己发了个安利LuLu UI组件的微博,其中有位同行对于弹框组件提了这么一个问题:大佬,这种info类型的,为什么还要带个x?明明有确定按钮,似乎这个叉叉按钮去掉也没什么事,是不是很多人有类似的疑问?我很早之前就有过这样的想法,而且还付诸实践,直接把几个提示框右上角关闭按钮去掉,好干净好清爽,而且功能也没什么问题,还洋洋得意。后来,不断学习和积累,才发现当初的我对交互设计和用户体验的认知还很浅薄。

阅读全文…

HTML5按钮元素新属性formaction,formenctype等简介

2017年08月6日,星期日

HTML5表单提交按钮新增加了formaction, formenctype等属性,这些属性是什么意思?有什么作用?本文就将通过一个个的案例带领大家去认识这些属性(共6个),以及在实际开发中的一些应用,希望能够对诸位的日常开发有所帮助。

阅读全文…

基于CSS color属性的静态UI组件重构策略

2016年11月18日,星期五

技术的发展往往会带来相应的思维方式上的转变,这样才能相辅相成,发挥新技术的潜力,如果还是使用以前的思维模式,怎么说呢,有着劳斯莱斯加着92#汽油在跑的感觉。

传统的实现,包括现在移动端几乎所有的实现套路都是下面这样的,无论是标签还是按钮,都是先设定一个基础类名,写下基本样式,然后不同的颜色重新命名一个状态类名,覆盖默认的边框色或者背景色或者文字颜色,是什么颜色就写什么颜色。

但,实际上,如果采用基于color重构UI组件的策略,则可能会有意想不到的裨益……

阅读全文…

小小小tip: 按钮文字无缝变菊花

2014年11月30日,星期日

如题,文字变菊花。没错,就是文字变菊花,具体什么内容,若有兴趣,自行点击去围观。很短的文章,分分钟就可以看完。

阅读全文…

自己以前架构CSS/JS时候挖过的一些坑

2013年03月12日,星期二

本文前半部分是故事,看似无趣的故事,其实解释了文章后半部分的糟粕所在。前后对应,其实对于大多数人而言,后半部分已经足够理解,故事嘛,只是想让文章不那么枯燥而已,您大可直接跳过。

都是些自己走过的小坑,希望对你的学习什么的有所帮助。

阅读全文…

span与a元素的键盘聚焦性以及键盘点击性研究

2013年02月20日,星期三

我们平时涉及点击交互事件的时候,都是使用的a元素或者button元素,原因是可以相应键盘focus效果以及回车触发点击事件,这是众所周知的。
但是,可能存在一些特殊情况,我们需要使用默认没有键盘可访问性的元素,例如span元素,我们可以通过一定的设置支持键盘的可访问性,这是不为所知的,也是本文的重点所在。

阅读全文…

CSS3 pointer-events:none应用举例及扩展

2011年12月7日,星期三


pointer-events是CSS3中又一冉冉的属性,其支持的值牛毛般多,不过大多都与SVG相关,我们可以不用理会。当下,对于偶们来讲,与SVG划开界线值得一提的就是[none|auto]两个属性值了。其中”auto”的感觉与width属性的”auto”类似,一般在一些特殊场合露一手,平时闺门不出,没什么说头。因此,一轮筛选下来,我们需要留意的只是pointer-events:none而已。
pointer-events:none是个很有意思的东西,某些情况下其精湛的表现会让人两眼发光。
pointer-events:none顾名思意,就是……

阅读全文…

手机网页UI框架jQuery Mobile介绍之按钮篇

2011年11月5日,星期六

正如标题所说的,本文主要内容就是结束jQuery Mobile下的按钮,包括按钮的生成,按钮类名的生成以及如何去自定义属于自己主题的按钮。

一如既往,提供丰富的demo页面,提供丰富的截图,提供必要的源代码展示。总之,希望本文的内容能够对您的移动手机页面制作和开发的学习提供一点帮助。

阅读全文…