前端早读课专访

2016年01月13日 by 张 鑫旭 阅读 10333 次, 今日 109 次

前端早读课访谈,分享自己的一些心理历程,以及对前端的一些看法等等。

阅读全文…

理解CSS3 max/min-content及fit-content等width值

2016年05月20日 by 张 鑫旭 阅读 1636 次, 今日 225 次

在CSS3的世界里,width属性又多了几个关键字成员,fill-available, max-content, min-content, 以及fit-content。

本文就将分析与介绍这几个关键字,顺便帮忙理一下CSS世界中的尺寸概念,相信本文的内容不仅对于CSS3的学习,包括对CSS2.1整个尺寸的认知都会有一定的帮助。

阅读全文…

CSS3 filter:drop-shadow滤镜与box-shadow区别应用

2016年05月18日 by 张 鑫旭 阅读 1906 次, 今日 130 次

要使用标准的CSS3实现某元素的投影效果,有两个套路,第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow,那这两个阴影实现有什么具体的差异呢?

本文就将探讨此问题,其实主要目的还是介绍下相当了不得的drop-shadow滤镜。

阅读全文…

改变CSS世界纵横规则的writing-mode属性

2016年04月27日 by 张 鑫旭 阅读 6941 次, 今日 99 次


writing-mode这个CSS属性,我们是不是很少见到,很少用到!我们往往称不常见的东西为“生僻”,就像是不常见的文字我们叫“生僻字”,因此不常见的CSS属性,我们可以叫做“生僻属性”,writing-mode给我们的感觉就是一个“生僻属性”,很弱,可有可无。

但是,实际上,我们都错了,大错特错,writing-mode很弱?卧槽,别开玩笑了,writing-mode可以说是CSS世界里面最逆天的CSS属性了,直接颠覆CSS世界的众多规则……

本月为4月压轴作品,大量demo,大量脑洞大开的创意处理,希望可以对您的学习有所帮助。

阅读全文…

了解HTML/HTML5中的download属性

2016年04月6日 by 张 鑫旭 阅读 9521 次, 今日 91 次

如果我们想实现点击下载按钮下载一张图片,你会如何实现?

我们可能会想到一个最简单的方法,就是直接按钮a标签链接一张图片。

但是,想法虽好,实际效果却不是我们想要的,因为浏览器可以直接浏览图片,因此,我们点击“下载”链接,并是不下载图片,而是在新窗口直接浏览图片……

阅读全文…

简单了解CSS3的all属性

2016年03月24日 by 张 鑫旭 阅读 6069 次, 今日 31 次

all属性实际上是所有CSS属性的缩写,表示,所有的CSS属性都怎样怎样,但是,不包括unicode-bidi和direction这两个CSS属性。

为什么会有这个CSS属性呢?

我们可能知道,有些CSS属性值基本上所有CSS属性都有,比方说继承inherit!

我们CSS reset输入框的时候,是不是有类似这样的代码…

阅读全文…

以20像素为基准的CSS网页布局实践分享

2016年03月22日 by 张 鑫旭 阅读 9583 次, 今日 56 次

以20像素为基准进行CSS网页布局,说不定会让一些细节和潜能大放光彩,当然这需要体系的配合,还需要一些完整的解决方案在里面,本文就将分享这一实践心得,保证是其他地方都没有的。外甥点灯笼——照旧(舅),有demo有截图有必要的源代码展示,希望本文的内容能够对您的学习有所帮助!

阅读全文…

CSS direction属性简介与实际应用

2016年03月20日 by 张 鑫旭 阅读 5207 次, 今日 26 次

至少,在我接触的这么多项目里,没有见到使用过CSS direction属性做实际开发的。

为什么呢?是因为direction长得丑吗?

虽然说direction确实其貌不扬,但是CSS并不是一个看脸卖萌的世界。

那是因为兼容性吗?

那更不是了,在那个“美女”确实是美女的年代,包括IE6在内的浏览器,CSS direction就已经被支持……

阅读全文…

腾讯微云黑色遮罩引导蒙版更好的CSS实现方式

2016年03月7日 by 张 鑫旭 阅读 11043 次, 今日 48 次

网站有一些改动的时候,为了让用户熟知新的操作位置,往往会增加一个引导,常见的方式就是使用一个黑色的半透明蒙版,然后需要关注的区域是镂空的。

然后上周五我去微云转悠的时候,也看到了引导层,于是职业病又犯了,去学习下别人是怎么实现的。下面是观测的结果:

为了实现镂空蒙层效果,作者发挥了小时候拼积木的才能,使用两层HTML结构,内层使用5块独立区域拼接形成,至于中间镂空的区域的阴影则是使用的图片实现的。

我们实际上只需要一层标签,一层空标签就可以实现我们的效果,且不需要图片……

阅读全文…

SVG精简压缩工具svgo简介和初体验

2016年02月29日 by 张 鑫旭 阅读 4592 次, 今日 28 次

SVG文件,尤其从各种变假期导出的SVG,通常包含大量的无用信息,例如编辑器源信息,注释,因此元素,默认或者非最优值,以及其他一些不会影响渲染结果的可以移除或转换的内容。

有没有什么工具可以简化这些信息呢,有,不妨试试本文介绍的svgo.

阅读全文…

CSS镂空图片transition过渡初加载背景色块问题解决

2016年02月25日 by 张 鑫旭 阅读 7394 次, 今日 44 次

CSS镂空图片,由于颜色是CSS属性值控制,如color或者background-color, 因此可以实现transition过渡效果,同时节约资源。然而有个很严重的问题,就是加载时候,容易出现色块,而本文就将展示如何解决色块的问题,让好的技术更加适用!

有demo有截图有必要的源代码展示,希望本文的内容可以对您的学习有所帮助!

阅读全文…