【问题标题】:Nice visual HTML5 effect for drop zone?拖放区的视觉 HTML5 效果不错?
【发布时间】:2013-04-08 14:18:18
【问题描述】:

我已经实现了一个带有基于 html5 的拖放上传功能的 web 应用程序。

现在我正在寻找一个很好的效果来作为放置邀请,向用户显示她可以将拖动的文件放置在哪里。

我看到了一些降低不透明度的示例,但由于我使用的是 HTML5 和 CSS3,因此应该可以实现更好的效果。

我查看了http://css-plus.com/2012/03/gaussian-blur/,但这仅适用于图像...

编辑: 更具体地说: 整个应用程序是基于 ExtJS 的,拖放区是一个网格。 我可以在网格上画出漂亮的模糊效果(如给定链接中所示)...

有什么建议吗?

提前致谢, 萨沙。

【问题讨论】:

  • 我相信这个问题有点离题了。如果您正在寻找从用户角度使用的最直观的效果,那么User Experience 上的问题可能更适合。
  • 感谢您的提示!确实,我不知道那个网站...
  • 另一方面,我不仅要求直观的效果,而且还要求非常好的,即一些具体的 CSS 建议...
  • 要成为一个好的 SO 问题,我相信如果您知道您正在寻找什么样的效果会更好,以便您可以在您的问题中描述它。然后,答案可以提供通过 CSS 实现该效果的方法。像这样,问题将是关于编程(对 SO 有好处),而不是关于设计(对 SO 来说是题外话)。
  • 谢谢,我编辑了我的问题...

标签: html css drag-and-drop


【解决方案1】:

您可以使用 CSS3 过滤器:有关演示,请参阅 http://html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/

只需将:-webkit-filter: blur(3px); 应用于您的 CSS。根据需要供应商前缀。只知道兼容性不是很好:http://caniuse.com/#feat=css-filters

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-06-07
    • 1970-01-01
    • 2014-10-17
    • 1970-01-01
    • 1970-01-01
    • 2019-04-03
    • 1970-01-01
    相关资源
    最近更新 更多