最新消息:你必须穷尽一生磨练技能,这就是成功的秘诀,也是让人家敬重的关键。

最新发布 第2页

练小习的前端技术笔记

css单边投影与双侧投影
表现

css单边投影与双侧投影

练小习 1年前 (2016-08-28) 0评论

早晨在前端交流群里,有个朋友问css实现单侧投影的办法,因为这个朋友前几天刚发过照片,晒他买的csssecrets,我问他你书买来还没看吗? 他说来不及翻书了,项目比较急上来问一下。 我顿时觉得真是暴殄天物了。看到下面有几个人都在问,于是直接写了几个...

几种SVG图像的fallbacks
其他技术

几种SVG图像的fallbacks

练小习 1年前 (2016-08-17) 0评论

在网页前景图像的使用上,针对不同像素比的屏幕,常规的做法是使用2X 3X的图像。 一些特定场景可以使用SVG来完成,因为他的矢量特性,不需要再针对更高的像素比出多套图片。 而使用svg必然要因为兼容性等因素考虑好fallbacks,常用的有几种方式:...

浏览器工作原理分析与首屏加载
其他技术

浏览器工作原理分析与首屏加载

练小习 1年前 (2016-08-15) 0评论

前言 谈到浏览器原理的分析,在网上影响最大的一篇文章莫过于以色列开发人员塔利·加希尔的研究成果。文中详细的描述了Webkit和Gecko两个浏览器引擎的工作原理,对其中涉及的算法和原理也进行了分析。 英文访问地址:How Browsers Work:...

比例字体&等宽字体
表现

比例字体&等宽字体

练小习 1年前 (2016-08-12) 3评论

我们都知道等宽字体和比例字体的区别,就在于比例字体(Monospaced Font)即每个字母宽度是按一定比例自动调整的,而等宽字体(Proportional font)则是固定宽度,固定间距,字体的每一个字母和字符所占的水平空间都是相同的。 比...

制作高大上的Canvas粒子动画
表现

制作高大上的Canvas粒子动画

练小习 1年前 (2016-08-03) 2评论

制作粒子动画效果要解决两个问题:一个是粒子动画轨迹,另外一个是粒子执行动画的时机。 首先来看下我们准备要做的粒子动画效果是怎么样的~ 是这样(粒子漂浮): 或者这样(粒子轨迹动画): 甚至是这样的 ಠ_ಠ: 很酷炫! 那如何去实现类似上面的粒子...

布局响应式方法:dispaly:table-*分组系列
未分类

布局响应式方法:dispaly:table-*分组系列

练小习 2年前 (2016-07-07) 0评论

介绍之前先看个常见的两栏图文介绍模块,宽屏是左边是图片右边是文字,或者左边是文字右边是图片。到窄屏下图片统一在上方,文案在下方。响应式效果如下: demo 通常我们为了实现上面设计的响应式需求,为了支持窄屏下图片统一在上方,会把上下两行的图片和文字代...

渲染放大的图片image-rendering笔记
表现

渲染放大的图片image-rendering笔记

练小习 2年前 (2016-06-29) 2评论

image-rendering: pixelated,控制浏览器如何渲染放大的图片,比如图像的自然尺寸为100×100像素,但网页指定其尺寸不为100*100像素时,关闭浏览器标准的平滑缩放(通常为双线性内插法),使用其他算法(通常为最近邻法)。使用...

SVG图形绘制入门第一弹
其他技术

SVG图形绘制入门第一弹

练小习 2年前 (2016-06-22) 1评论

之前很长一段时间,我是不重视SVG的,认为他就是在AI里画画,然后导出来做个矢量图标。直到我在上家公司遇到图表的绘制,因为不会写不得已而拿插件实现,而插件绘制的SVG代码又因为看着非常吃力甚至看不懂,导致自己严重受挫。到那个时候我才从基础正式开始学习...

移动端全兼容的flexbox速成班
表现

移动端全兼容的flexbox速成班

练小习 2年前 (2016-06-17) 1评论

说起flexbox,都算是件陈年旧事了,它是2009年W3C提出的一种全新的可伸缩的CSS布局方式。依赖flexbox,我们可以更简单,高效的完成可伸缩式页面的布局。 业界与flexbox的相关教程文章也是各式各样,新旧交替,很多小伙伴对flexbo...