练小习的文章

4年前 (2016-09-05) 1383浏览 1评论

适用场景： 当排序以及序号变动对服务端造成的压力大的情况下，使用css计数。 在早期，只有ol和ul可以对子元素li进行排序，，而CSS2.1规范中加入了counter这一属性，配合伪元素:before、:after中的content使用，便可以对指...

4年前 (2016-09-02) 2879浏览 7评论

研究这个问题的背景： 众所周知，ios下垂直和水平滚动条都是默认不出现，用户滑动时，才显示，滑动结束以后，又隐藏滚动条。 横向滚动条默认隐藏，用户很可能会忽略右侧被隐藏的部分，由于模块的特殊性，让滚动条默认出现是成本的小的处理方案。 因此就有了让滚动...

4年前 (2016-08-28) 1601浏览 0评论

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

4年前 (2016-08-17) 1120浏览 0评论

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

4年前 (2016-08-15) 2067浏览 0评论

前言 谈到浏览器原理的分析，在网上影响最大的一篇文章莫过于以色列开发人员塔利·加希尔的研究成果。文中详细的描述了Webkit和Gecko两个浏览器引擎的工作原理，对其中涉及的算法和原理也进行了分析。 转载请注明：练小习的前端技术笔记 » ...

4年前 (2016-08-12) 1796浏览 4评论

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

5年前 (2016-08-03) 2572浏览 2评论

制作粒子动画效果要解决两个问题：一个是粒子动画轨迹，另外一个是粒子执行动画的时机。 首先来看下我们准备要做的粒子动画效果是怎么样的~ 转载请注明：练小习的前端技术笔记 » 制作高大上的Canvas粒子动画

5年前 (2016-07-13) 1304浏览 2评论

一直没太注意有这个坑，td或者table-cell的元素里，如果没有指定容器宽度，那么容器里的img标签max-width:100% 在IE7-11，以及firefox下会不理会max-width的限制，例如： 转载请注明：练小习的前端技术笔记 &r...

5年前 (2016-07-07) 1784浏览 0评论

介绍之前先看个常见的两栏图文介绍模块，宽屏是左边是图片右边是文字，或者左边是文字右边是图片。到窄屏下图片统一在上方，文案在下方。响应式效果如下： 转载请注明：练小习的前端技术笔记 » 布局响应式方法：dispaly:table-*分组系列

5年前 (2016-06-29) 1618浏览 2评论

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