澳门在线威尼斯官方 > 威尼斯澳门在线 > 网页无图再不是梦想,绝对干货

原标题:网页无图再不是梦想,绝对干货

浏览次数:117 时间:2019-09-13

网页无图再不是梦想

2015/08/22 · HTML5 · 1 评论 · 网页开发

原文出处: 百码山庄   

一直以来,网页开发对优化方面做的工作从未停止。网页无图也是为了减少页面资源请求而提出的一种畅想。无可厚非在网页开发的历程中在网页无图方面我们已经取得了不朽的成就:从一开始零零碎碎的小图标资源,到后来小图标合并成一个图片出现雪碧图,再到后来Webfont的出现不仅可以取代雪碧图,而且彻底解决了图标管理难,变色实现麻烦的问题。今天我要跟大家介绍一个小工具,也是可以帮助实现网页无图这一终极目标。理论上来讲,它可以将任何一张图片转换成一个不带图片,不带背景图的干干净净的html标签。但是这有前提:你的计算机得有足够的资源去支撑。

说到H5C3会不会觉得东西好多啊,今天就整理了一份总结性的内容;

缘起

那是一个工作日的早上,我向往常一样准时到达了工作岗位上,启动电脑,打开浏览器我偶然发现了一篇名曰《18个你可能不相信是用CSS制作出来的东西》的文章,出于职业敏感,也出于好奇我就点进去看了一看,发现其中有一个很有意思的作品:,它仅仅用一个div标签就完成了这幅作品,于是我们几个同事好奇使然,开始分析它的实现,渐渐有了下面即将介绍的工具的影子。

威尼斯澳门在线 1

渐入主题

既然可以使用一个标签制作出一副精美的像素图,那么是否就意味着可以用一个标签还原任一一张图片?唯一不能还原的是图片的精细度问题。然而,如果可以精细到每一个像素点,那么高精度的还原整张图也完全可行,只是这必将消耗非常多的计算机资源。这一设想便是催生这个小工具的催化剂,于是我便开始构思起来。

威尼斯澳门在线 ,CSS3选择器有哪些?
答:属性选择器、伪类选择器、伪元素选择器。
CSS3新特性有哪些?
答:1.颜色:新增RGBA,HSLA模式

案例分析

通过使用开发者工具分析以上案例的源码,我发现其实它的实现并不难。我们知道在CSS3中新增了一个设置盒子阴影的box-shadow属性,而这个属性可以同时设置任意多个不同颜色和扩散度的阴影块,而案例正是完美的诠释了这个新属性。

既然如此,那么我们现在来做个试验,我们在任一一张图上覆盖上一个个大小相同的小方格子,我们就可以将任何一张图片分隔成一个个的小方格,我们只要知道这些小方格的大小、顺序和位置,我们就可以重组这张图片,如下对比图所示:

威尼斯澳门在线 2

但是,有个问题:box-shadow的引用颜色是单色的,而每个盒子范围内的图案是复杂的,我们如何去处理这个问题?

因为box-shadow只能设置颜色,所以这个问题的结果只有一个,找出一个能代表这个格子的颜色,那么选取哪一个颜色值就因人而异了,可以选格子四角的任意一个、可选中心点,可选格子内的任意一个点,我选择的是格子的左上角这个点。我们不难发现,如果我们尽可能的缩小格子,小到只剩下一个像素大小,我们就可以完整的还原一张图片了。

  1. 文字阴影(text-shadow、)
  2. 边框: 圆角(border-radius)边框阴影: box-shadow
  3. 盒子模型:box-sizing
  4. 背景:background-size 设置背景图片的尺寸background-origin 设置背景图片的原点background-clip 设置背景图片的裁切区域,以”,”分隔可以设置多背景,用于自适应布局
  5. 渐变:linear-gradient、radial-gradient
  6. 过渡:transition,可实现动画
  7. 自定义动画
  8. 在CSS3中唯一引入的伪元素是 :selection.
  9. 媒体查询,多栏布局
  10. border-image
  11. 2D转换:transform:translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
  12. 3D转换
    CSS3新增伪类有那些?

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:网页无图再不是梦想,绝对干货

关键词:

上一篇:Element节点类型详解,你所不了解的javascript操作

下一篇:没有了