-
chrome transition闪烁BUG
前段时间写鼠标悬停元素上移效果时,当鼠标恰好放在元素边缘时,chrome出现一直上下移动的问题,其他浏览器表现正常。原因尚不知,可能是实现方式不对吧(PS:使用top实现),虽然不知道原因,但是问题还是要解决...
作者:ryan2018-03-30 -
HTML5-语义化
距HTML5标准规范制定完成并公开发布已经有好些年了,面试时也少不了要问对HTML5语义化得理解。但是在实际运用时,真正使用HTML5标签来开发的似乎不是很多(ps:查看了几个巨头公司网站推论),可能一部...
作者:ryan2018-03-26 -
canvas小tip–下载二维码、图片加水印
昨天介绍了一个生成二维码的插件QRCode.js,它是借助HTML5 Canvas绘制而成。所以,今天的主角就是canvas啦–canvas的实际应用。一、下载二维码(查看如何生成二维码) HTMLCanvasElement提供了toDat...
作者:ryan2018-03-20 -
css print
最近做表单打印,遂整理了一些打印相关的内容。说到网页打印,首先想到的便是@media查询(即网页css),通过使用媒体类型print即可解决实际应用的大多数问题,比如实现只打印网页的某部分内容,调整字体大小、修改布...
作者:ryan2017-07-18 -
css负边距之详解
自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史。正因为此,从那以后CSS布局成为了优雅代码的代名词。对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功。这就像是在线...
作者:ryan2015-11-09 -
巧用CSS3的calc()宽度计算做响应模式布局
今天浏览这个http://www.sitepoint.com站时,因为好奇看了下人家写的代码,结果发现了这行代码,于是就研究了一下,calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是c...
作者:ryan2015-10-22 -
CSS实现单行、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。实现方法:overflow:hidden;text-overflow:ellipsis;white-space:nowrap;效果如图:但是...
作者:ryan2015-10-20 -
CSS3:linear-gradient切角画册
关于linear-gradient的语法就不多做介绍了网上到处都是,下面看个小例我们先做一个渐变,使其让他旋转,.example{height:150px;width:500px;margin:100pxauto;background-color:#4299BC;background:-webkit-linear...
作者:ryan2015-09-27 -
CSS3技巧:fit-content水平居中
当我们让一个模块水平居中首先想到的肯定是margin:0 auto;有木有?那么今天给大家介绍一个fit-content属性,不知道有没有同学用过,如果用过那么你可以略过这篇文章,没用过的同学就继续了,我也是第一次看到这个属性...
作者:ryan2015-09-22 -
css3技巧——产品列表之鼠标滑过效果translateY(三...
这次我们使用transform的translateY值来做一个鼠标经过图片上拉,出现文字解释效果:查看效果WonderGirlsWonderGirls一向...
作者:ryan2015-09-19
