css3

Vue.js 实践（3）：实现一个漂亮、灵活、可复用的提示组件

这次的教程里，我们要把组件化进行到底！最近半年的几个项目中，都遇到了需要使用Toast或者Notification组件的情况。在目前已有的一些基于Vue.js开发的组件库，都没有找到太合适的，所以自己重头实现了一个。历经几个项目的磨练，这个提示组件的功能已经越来越完善，这次就分享一下组件以及其实现思路吧。GitHub 仓库：https://github.com/Yuyz01
业界 2016年07月11日

【二次元的CSS】—— 用 DIV + LESS 做一个小黄人构造器

用 DIV + CSS3 画小黄人仅仅使用div作为身体的布局，用css3的各种transform和圆角属性来绘制各个细节的形状，当然也不会使用任何图片哦。那就没意思了。[br]有的同学说，用canvas不是能画得更逼真而且更简单吗？这点我也非常赞同，但我的理由还是，那就没意思了。这次用到了一些LESS的特性，通过设置一些指定的参数来生成不同种类、不同身材的小黄人。GitH
业界 2016年05月10日

H5打造3d场景不完全攻略（一）: H5 3d表现形式

前言日前，taobao造物节H5放肆地火了一把。相信接下来将3d嵌入网站的这种营销方式会被越来越多的人留意到。工作之余体验了若干个3d H5页面，感觉这类的H5互动体验性明显要比普通的要强，把二维的物体转化成三维，能给人一种置身其中的感觉。所以，一个好的idea加上低成本的技术实现——将3d融入H5今后也许还会爆发出更大的能量。3D在H5中的表现形式话不多说，直接贴几个链接
业界 2016年08月06日

巧用CSS遮罩

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

「让制作 H5 像制作 PPT 一样简单！」

Wechat-H5-Boilerplate 「让制作H5像制作PPT一样简单！」 Wechat-H5-Boilerplate(以下简称WHB）是一个H5动效模板，专门为微信优化，适合快速构建全屏滚动型H5宣传页。 例如让一段文字动起来只需要一行代码： I'm a coder!Github 地址： https://github.com/panteng/wechat-h5-bo
业界 2016年07月25日

使用grid来进行常见布局

使用grid来进行常见布局grid 布局是W3C提出的一个二维布局系统，通过 display: grid 来设置使用，对于以前一些复杂的布局能够得到更简单的解决。本篇文章通过几个布局来对对 grid 布局进行一个简单的了解。目前，grid 仅仅只有 Edge使用前缀能够支持，为了更好地体验，可以使用 Chrome 浏览器，在 chrome://flags 开启 # ena
业界 2016年07月23日

多屏互动——H5 中级进阶

前言随着智能硬件的普及，手机，平板，PC甚至路边的电子广告牌，现代浏览器已经无处不在。在浏览器里编织出我们自己的一片天地已经轻车熟路，但是这还不够，H5赋予了浏览器太多的新特性，等待我们去使用。这篇文章介绍利用手机浏览器的罗盘API，在PC的浏览器实时地绘制一个3D盒模型。这种炫酷的玩法叫做“多屏互动”，就像是把手机当做游戏手柄，PC显示器当做电视机，不过这些都是在浏览器里
业界 2016年07月21日

css使文字显示两行后显示省略号

本人喜欢把一些实用的东东拿过来，写成文章或者收藏起来。于是乎... 直接上代码： .article {color: # 000000;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-break: break-all; }狠狠的点击，查看
业界 2016年07月14日

flebo 详细教程

caniuseflexbox 神器肯定是前端必会的。对于各种布局只要学会 flexbox 那都是 so easy 的事情。要用 flexbox，最先就是看看 caniuse 上浏览器对 flexbox 的兼容性。下面是截图：图片中 partial support 的左上角的数字对应下面的意思。具体和访问链接去看,:caniuse 上浏览器对 flexbox 的兼容性.部分支
业界 2016年07月14日
加载更多