April 24, 2015
有意思：textarea resize属性下纯CSS交互效果
一、众所周知的
众所周知，文本域(textarea)在FireFox或Chrome浏览器下，右下角有个可以拖拽的标志。
有人保留，有人嫌碍事，直接resize:none;掉，但是，估计没人利用整个儿做交互效果。
二、纯CSS的交互展示
您可以狠狠地点击这里：textarea resize下的纯CSS交互demo
例如，在FireFox浏览器下，拖动（往右→）下图圈中的图标：
一个半透明遮罩层随着拖动把张含韵给覆盖了，达到了半遮面的交互效果。
效果没什么，但是却完全CSS实现的，就有意思了。
三、实现原理
我们平时拖动文本域的时候，往右拖则文本域宽度往右侧扩展。但是，如果文本域右侧定位（浮动或绝对定位），则右侧不动… Read More