css3

多屏互动——H5 中级进阶

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

CSS3总结系列0

媒体查询媒体查询包括一种媒体类型(以及通过使用宽高,颜色等媒体特征来限制样式表作用域的表达式).作为新增在CSS3中的特性,可以使得内容个性定制化呈现在不同特定输出设备上面,而不必改变内容本身.语法一行代码胜千言:@media (max-width: 600px) {.facet_sidebar {display: none;}}逻辑操作符包含and,not,only.@m
业界 2016年07月06日

css3 border怎么就可以画图了

一直没有在意border，众所周知border就是边框，大概就是定义一个宽度，样式，颜色。就可以了，最大的作用可能就是美观了。最近发现，其实还有一个重要的作用--画图.在谈及这个功能之前，必须要先明确border到底是怎么形成的.# newDiv{ width:0px; height:0px; border-left:50px solid pink;
业界 2016年07月07日

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

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

CSS3总结系列1

过渡通过改变CSS属性,它提供了一种控制动画速度的方式.属性改变没有立刻结束,而是需要一定的时间.你可以直接列出哪些属性需要进行动画过渡,可以设置when--delay,how long-duration,how--timing function等等.有哪些属性可以参与动画和过渡这里是mdn上的一个列表,这个列表里面的属性可以被过渡也可以被动画.谈及一点,auto属性值最好
业界 2016年07月13日

flebo 详细教程

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

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

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

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日