有意思:textarea resize属性下纯CSS交互效果

一、众所周知的

众所周知,文本域(textarea)在FireFox或Chrome浏览器下,右下角有个可以拖拽的标志。
textarea拖拽的小标示 张鑫旭-鑫空间-鑫生活

有人保留,有人嫌碍事,直接resize:none;掉,但是,估计没人利用整个儿做交互效果。

二、纯CSS的交互展示

您可以狠狠地点击这里:textarea resize下的纯CSS交互demo

例如,在FireFox浏览器下,拖动(往右→)下图圈中的图标:
点击操作示意

一个半透明遮罩层随着拖动把张含韵给覆盖了,达到了半遮面的交互效果。
拖动中示意 张鑫旭-鑫空间-鑫生活

效果没什么,但是却完全CSS实现的,就有意思了。

三、实现原理

我们平时拖动文本域的时候,往右拖则文本域宽度往右侧扩展。但是,如果文本域右侧定位(浮动或绝对定位),则右侧不动,宽度往左侧扩展。下图演示为右100像素绝对定位:
默认位置拉伸后

 

我们还知道,textarea resize的时候宽度变化会让具有“包裹性”的父元素宽度跟着一起变化,所以,如果我们把textarea放在具有半透明背景色的层中,那拉伸的时候,这个半透明层不就可以拉拉伸伸,有了交互效果啦!这就是demo中半透明层覆盖来覆盖去的原理。

说得再多也不容易明白,demo中一些障眼的属性(overflow:hidden;opacity:0;)去掉,你就知道大概了。下图为去掉overflow:hidden;以及文本域opacity设为0.6后的效果:
一些障眼的CSS属性去掉后的效果 张鑫旭-鑫空间-鑫生活

四、结束语

经测试,Opera/FireFox/Chrome浏览器支持,IE10以及下面的喽喽们都不支持。显然,兼容性是硬伤。因此,除了一些特殊情况,此实现没有多少实用价值。仅供大家娱乐,仅供大家参考。当然,您可以发挥你智慧实现其他一些交互。

唉,忧伤的三月,就这些,感谢阅读!

参考文章:Tricky Textarea Pulltab

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=3132

Leave a Reply