• CSS 书写模式的24种方式

    本文转载自: 众成翻译 译者: 哈呼哈哈呼 链接: http://www.zcfy.cc/article/2321 原文: https://24ways.org/2016/css-writing-modes/ 由于你可能没有那么多的时间,所以我将从结论开篇。 你可以使用一个不常见,但是非常重要的CSS属性来使文字垂直显示,

    17-01-20
  • UI设计之按钮:风格演变和最佳实践

    本文转载自: 众成翻译 译者: liujianhuanzz 链接: http://www.zcfy.cc/article/1118 原文: https://uxplanet.org/buttons-in-ui-design-the-evolution-of-style-and-best-practices-56536dc5386e#.l5ag9zk5b 按钮是一个交互设计中普通的常用元素。虽然按

    17-01-11
  • 101种让你的网站更棒的方法

    # 101种让你的网站更棒的方法> 本文转载自:[众成翻译](http://www.zcfy.cc)> 译者:[QAQMiao](http://www.zcfy.cc/@QAQMiao)> 链接:[http://www.zcfy.cc/article/766](http://www.zcfy.cc/article/766)> 原文:[https://medium.freecodecamp.com/101-ways

    17-01-11
  • 2016年5月15个有趣的CSS和JavaScript库

    Hint.css 为HTML元素添加提示的纯CSS库。虽然 Hint体积非常小,但是我们仍然做到了可自定义,比如大小,颜色和动画。它不需要一行代码,提示是通过添加data属性创建的。 Turntable.js Turntable.js可以让你轻易实现图像的3D旋转,它通过把一组图片放在 on-ho

    16-06-08
  • 关于z-index 那些你不知道的事

    原文出处: tutsplus 。 CSS当中的 z-index 属性看起来足够简单,但是如果你真的想了解它是如何工作的话,在这简单的表面之下,又有许多值得探究的内容。 在这篇教程中,通过探究 层叠上下文 和一系列实际的例子,我们将会阐明z-index的内在机理。 CSS为盒模

    16-06-06
  • 使用SVG滤镜创造Gooey效果

    今天我们将演示如何使用SVG Filter在HTML元素上实现沾粘效果(gooey-like effect)。我们首先讲解基础知识,然后再演示几个针对web元素的创造性用例,比如菜单,app, selection,页面导航等。 注意 这种效果只是试验性的,只支持现代浏览器。 我们首先深入

    16-06-06
  • 影厅座位预览效果(css3)

    查看 demo 下载源码 你可能对那些购买时需要选择座位的订票系统比较熟悉。通常在比赛,电影,搏击或者演唱会售票的时候需要这样做。如果能有一种座位的预览效果该有多酷啊,比如能够从你选择的位置的角度去预览舞台或者屏幕。这个问题引出了今天我们将要分享

    16-06-02
  • 使用 SVG Filter实现扭曲的按钮效果

    View demo Download source 紧接着Lucas Bebber在 最近的web实验 中对图片和文字制造的逼真热辐射和水波效果,我们想分享一下这类效果在按钮上的灵感。在HTML元素上使用SVG滤镜能让我们有更大的机会实现创造性的点击互动,这正是我们今天所要探索的内容。 主

    16-06-01
  • 最全面的前端开发指南

    HTML 语义 HTML5为我们提供了很多旨在精确描述内容的语义元素。确保你可以从它丰富的词汇中获益。 !--bad--divid=maindivclass=articledivclass=headerh1Blogpost/h1pPublished:span21stFeb,2015/span/p/divp…/p/div/div!--good--mainarticleheaderh1Blogpo

    16-01-12
  • Simple Grid:轻量级的响应式 CSS 网格系统

    Simple Grid 是一款响应式、轻量级的网格系统,1140PX的宽度包含12列,但是很容易适配各种尺寸的排版。 使用网格进行网页设计已经是潮流,但是现在有很多 CSS 框架都提供网格功能,用来控制网页上每个元素的位置,但是这些 CSS 框架都是太多功能,而有时我们

    15-12-26
  • 前端性能优化之更平滑的动画

    想要达到平滑的动画效果,浏览器需要避免复杂繁琐的工作,比如解析代码,构建渲染树,绘制,布局等等工作。庆幸的是,我们有GPU。 从一个简单例子说起。 假设现在有这样的需求,鼠标移上图标时,图片向右移动300个像素单位,效果大概是下面这样。 很自然,人

    15-12-18
  • 如何实现SVG线动画

    如何实现SVG线动画 我相信你肯定已经看过很多SVG绘制路线的动画。非常酷对吧?这篇文章简单介绍如何实现动画,如果你有兴趣,可以看文章下方的扩展阅读。 效果如下,后面会附上CodePen。 不罗嗦,直接进入正题。 绘制路径 首先你需要绘制SVG路径,使用的工具

    15-12-18
  • 前后端分离了,然后呢?

    前言 前后端分离已经是业界所共识的一种开发/部署模式了。所谓的前后端分离,并 不是 传统行业中的按部门划分,一部分人纯做前端(HTML/CSS/JavaScript/Flex),另一部分人纯做后端,因为这种方式是 不工作 的:比如很多团队采取了后端的模板技术(JSP, Free

    15-06-23
  • 9个目前流行的Material Design前端框架

    转载自 http://www.imooc.com/wenda/detail/256528 其中daemonite可以直接在github上下载,用firefox或者chrome打开index.html就可以看到效果了,简直是惊艳。 9个目前流行的Material Design前端框架 谷歌推出的Material Design风格已见有一些APP UI采用,视

    15-04-26
  • 也许,DOM 不是答案

    原文 http://www.ruanyifeng.com/blog/2015/02/future-of-dom.html 有一个词手机网站(mobile web),指供手机浏览的网站,但它是不存在的。 人们提到移动互联网的时候,其实专指另外一样东西:手机App。 一、Web App vs. Native App 比起手机App,网站有一

    15-03-07
56文