background-clip 和 background-origin

下面都是我自己的理解, 如果有不对的地方, 还请大家帮忙指出.下面是在 chrome 浏览器上测试的background-clip 和 background-origin先说说background-imagebackground-image 默认的起始位置是 padding 外边缘的左上角. 如下图所示:但是注意: 默认的结束位置却是 border 外边缘的右下角, 如下图

业界 2016年07月27日

18 个 UI demo 设计实例，深挖让用户愉悦的小惊喜

文章分享了对话框及模态窗口、注册与登录页面、导航及菜单、滑动条和切换开关等UI设计实例，希望对大家有所启发。CodePen网站已成为开发者的游乐场。那是一个你可以驰骋想象、开发创造的沙盘。里面既有实践的东西，也有实验性的概念——是个激发灵感的宝库。我们在其中做了一些挖掘，发现了一些有趣的UI demo和概念图，包括对话框和模态窗口、注册与登录页面、导航及菜单、滑动条和切换开

产品 2017年01月05日

Fle 布局教程：语法篇

Flex 布局教程：语法篇（修改转载自阮一峰老师的博客）网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它

业界 2016年06月29日

谈谈关于CSS中transform属性之scale

谈谈关于scale属性scale是什么？根据W3C定义 ,scale主要是进行缩放和转化:scale能做什么？1.1px细线CSS代码.wrap{ position: relative;}.UI_scale1{ position: relative; width: 200px; height: 50px; border-bottom:1

业界 2016年07月27日

使用resume-master快速制作简历

About this reporesume-master 是一个简历生成器项目，该项目从json中读取数据，可部署到github pages 在线浏览，也可生成pdf格式简历。该项目使用Handlebars + LESS + Gulp进行构建，只需在resume.json中填入你的个人信息，然后在终端执行几个命令行即可快速构建属于您的个人简历。DEMO：http://haw

业界 2016年07月06日

[开源] 分享自己用的 GitHub 分组管理工具.

CODELF 的 GitHub Star 管理工具, 简洁快速，从开发者角度考虑，用完就走，不给开发者更多的管理负担。 https://github.com/unbug/codelf我们平时搜索发现 GitHub 上的不错的 Repo 就点 Star 的方式收藏了起来，想哪天会用到，但真的要用时也想不起来叫什么了，而且越收藏就越多，找出来也很费劲的，网友呼吁 GitHub

业界 2016年05月10日

18位设计师为你预测2018用户体验设计趋势

来看看18位设计师预测的2018用户体验设计趋势。设计师总再盼望未来 - 在整个工作流中我们重复相同的事情。最后，困扰设计师往往是围绕着一个简单的问题：我们如何才能提高用户的体验？为了解决这跟题，Figma采访了18位设计师，让他们来来预测2018用户体验设计趋势。12月，随着节日聚餐的频繁出现、适宜的天气，这真是个思考和发现新大陆的绝佳机会。1.可用性第一，个性化第二“我

用户研究 2018年01月04日

一个纯CSS3实现的酷炫翻书效果

项目地址：https://github.com/BUPT-HJM/c...demo地址：https://bupt-hjm.github.io/cs...欢迎大家的star啦~效果细节其实项目中的关键在于几个属性，perspective和rotate,便是透视和旋转perspective属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素

业界 2016年07月25日

巧用CSS遮罩

1. 用法-webkit-mask样式是利用该属性指定的图片作为遮罩，利用这张图像的透明度来显示位于该遮罩图下方的图像。如果遮罩图某个像素点透明度为1则显示下方的图像，透明度为0则不显示，介于0-1之间则呈现相应的透明度。详情参考 mask - CSS | MDN可以看到，mask的语法基本上拷贝自background，可以设置遮罩的url, position, repea

业界 2016年07月28日

Bootstrap网格系统

什么是BootstrapBootstrap是一个用于快速开发Web应用程序和网站的前端框架，它包括HTML,CSS,JS等。它是由Twitter开发，现在成为Github上最为流行的前端开发框架。它提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕或视窗尺寸增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的

业界 2016年06月22日