xml地图|网站地图|网站标签 [设为首页] [加入收藏]
雪碧图自适应缩放,单标签之美
分类:web前端

CSS3技术-雪碧图自适应缩放

2015/08/20 · CSS · 雪碧图

原文出处: Aaron的博客   

花了一个礼拜完成了慕课网定制的七夕主题效果,其中有一个没实现好的功能,就是雪碧图的自适应缩放

ps: 以下实现都是基于移动端的处理

原图如下: 人物是采用的是雪碧图,通过坐标绝对数据取值

图片 1

问题很明显,在缩放的屏幕上人物还是按照原尺寸大小显示

后来临时留了一节预备的方案:CSS3的scale处理直接可以让元素缩放

图片 2

通过一个缩放的算放控制scale从而让雪碧图的元素可以缩放,目测还是不错。

但是这会带一系列的计算问题,因为通过sacle缩放后的元素,在浏览器布局中还是按照原尺寸计算的,所以这样的方案我也是非常的不满意

雪碧图常规的方案一般会做几套不同大小的图去适应不同的设备尺寸

这里我特指移动端单图的处理,采用的技术很简单CSS3一些知识点

先看看原图与处理后的效果

图片 3

图片 4

来讲解下原理,说白了很简单

先观察下矩阵的排量如上是行3 竖3 所以矩阵就是3*3的排列,但是这里只有8张图,怎么处理之后会讲

一般想让背景图填充整个元素在css3中可以通过background-size:100% 100%处理

显然不能让整图去填充元素,整图填充一个元素就是这效果

图片 5

如何让单图填充一个元素呢? 这里我想到了一个办法,把整图整体缩放,额,就是整体缩放。。。

3*3的矩阵,我横竖按照矩形的数量比缩放100%

CSS

background-size: 300% 300%;

1
background-size: 300% 300%;

图片 6

到了这一步估计大家都猜出来了,很简单了,通过百分比去取图了

至于精灵动画实现的手段太多了,比如定时器的帧动画,CSS3的animation动画,canvas动画

说真的所有的方案我都实现过,包括在移动端上线测试等等

目前最为理想的就是通过CSS3关键帧处理动画,如果动画多写一堆的样式就是一个蛋疼的事

所以这里我建议可以采用脚本生成关键帧,通过内联style加载,哈哈~~~ 非常完美~

图片 7

刚刚提到了如果3*3的矩阵,但是总数不到9个要如何处理?

所以这里我提供一个关键帧的算法给大家参考下,比较简单

图片 8

这是我项目中的用了,为了便于大家理解,我做了一个简单的

大家如果有兴趣可以连接到github,顺手踩一踩Followers下,感谢~~

github连接 : 

1 赞 收藏 评论

图片 9

【CSS进阶】伪元素的妙用–单标签之美

2016/05/26 · CSS · 2 评论 · 伪元素

本文作者: 伯乐在线 - chokcoco 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

最近在研读 《CSS SECRET》(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目:

CSS3奇思妙想 — Demo (请用 Chrome 浏览器打开,非常值得一看)。采用单标签完成各种图案,许多图案与本文有关。

也希望觉得不错的同学顺手在我的 Github 点个 star : CSS3奇思妙想 。

正文从这里开始,本文主要讲述一下 伪元素 before 和 after 各种妙用。

 :before和::before的区别

在介绍具体用法之前,简单介绍下伪类和伪元素。伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的。

图片 10图片 11

有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类和伪元素,大多数浏览器都支持这两种表示方式。

CSS

#id:after{ ... } #id::after{ ... }

1
2
3
4
5
6
#id:after{
...
}
#id::after{
...
}

单冒号(:)用于 CSS3 伪类,双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素,例如 :before,单冒号和双冒号的写法 ::before 作用是一样的。

所以,如果你的网站只需要兼容 webkit、firefox、opera 等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容 IE 浏览器,还是用 CSS2 的单冒号写法比较安全。

更加具体的信息,可以看看 MDN 对伪类和伪元素的理解。
本文的主角就是伪元素 before 和 after ,下面将具体讲讲这两个伪元素的魅力。

利用 after 清除浮动

这个估计是前端都知道,运用 after 伪元素清除页面浮动,不做过多解释。

CSS

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; }

1
2
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }

伪元素与 css sprites 雪碧图

这个也是老姿势了。雪碧图大家应该也不陌生,通过将多个图片 icon 合为一张图,从而为了减少 http 请求,很多网站对雪碧图的需求还是很大的。

但是在制作雪碧图的过程中,或者现在很多的打包工具自动生成的雪碧图,都存在着需要为每个 icon 需要预留多少边距的问题。看看下图:

图片 12–> 图片 13

譬如上面这种情况(假设按钮中的图标是采用了雪碧图),产品某天突然要求按钮从状态左变为状态右,那么雪碧图原先预留的位置边距肯定就不够了,导致其他图形出现在按钮中。

而我们通常不会为了一个小 icon 多添加一个标签(不符合语义化)。

所以通常这种情况需要用到雪碧图的话,都是在按钮中设置一个伪元素,将伪元素的高宽设置为原本 icon 的大小,再利用绝对定位定位到需要的地方,这样无论雪碧图每个 icon 的边距是多少,都能够完美适应。

单个颜色实现按钮 hover 、active 的明暗变化

最近项目有个这样的需求,根据不同的业务场景,运营需要配置一个按钮的不同背景色值。但是我们知道,一个按钮通常而言是有 3 个色值的,normal 状态的,hover 状态的和 active 状态的,通常 hover 是比原色稍微亮一点,active 则是稍微暗一点。

大概是这样(下图):

图片 14

为了减轻运营同学的负担,怎么样做到只配置一个背景色不配置 hover 和 active 颜色让按钮也能自适应跟随变化呢。是的,用上 before、after 两个伪元素可以做到。

颜色小知识

这里要科普一下颜色值的小知识。我们熟知的颜色表示法除了 #fff ,rgb(255,255,255),还有 hsl(0, 100%, 100%)(HSV)。

以 HSL 为例,它是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法。HSL 即色相、饱和度、亮度(英语:Hue, Saturation, Lightness)。

对于一个使用 HSL 表示的颜色,我们只需要改变 L (亮度)的值,就可以得到一个更亮一点或者更暗一点的颜色。

当然改变亮度,还可以通过叠加透明层实现,这里使用伪元素改变按钮背景色就是通过叠加半透明层实现。

简单来说,在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更亮的颜色。(这句话不是很严谨,假设一个元素背景是纯白颜色,叠加白色半透明层也是不会更亮的)

反之,在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色。

所以,我们用 before 伪元素生成一个与按钮大小一致的黑色半透明层 rgba(0,0,0,.2),在 .btn:hover:before 时显示,用 after 伪元素生成一个与按钮大小一致的白色半透明层 rgba(255,255,255,.2),在 .btn:active:before 时显示,就可以做到只配置一个背景底色,实现 hover 、active 的时的明暗变化。

.pesudo:before{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index:-1; background:rgba(0,0,0,.1); } .pesudo:hover:before{ content:""; } .pesudo:after{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index:-1; background:rgba(255,255,255,.2); } .pesudo:active:after{ content:""; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.pesudo:before{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index:-1;
  background:rgba(0,0,0,.1);
}
.pesudo:hover:before{
  content:"";
}
.pesudo:after{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index:-1;
  background:rgba(255,255,255,.2);
}
.pesudo:active:after{
  content:"";
}

戳我看demo (请用 Chrome 浏览器打开)。

变形恢复

有的时候,设计师们希望通过一些比较特殊的几何图形,表达不同的意思。

图片 15图片 16图片 17

用 CSS3 transfrom 属性,我们可以轻松的得到一个梯形,菱形或者平行四边形。有时我们设计师们希望在这些容器内配上文字,譬如平行四边形可以表达一种速度之感。

但是如上图所示,内容文字也会跟着 CSS3 变换一起发生了扭曲,通常我们会用一个 div 做背景进行变换,而文字则是放在另外一个 div 中。

但是运用伪元素,我们可以去掉这些不合语义化多余的标签,运用 before 伪元素,将 CSS3 变换作用于伪元素上,这样变形不会作用于位于 div 上的的文字,而且没有使用多余的标签。

戳我看demo (请用 Chrome 浏览器打开)。

伪元素实现换行,替代<br>换行标签

大家都知道,块级元素在不脱离正常布局流的情况下是会自动换行,而行级元素则不会自动换行。但在项目中,有需求是需要让行级元素也自动换行的,通常这种情况,我都是用
换行标签解决。而 《CSS SECRET》 中对
标签的描述是,这种方法不仅在可维护性方面是一种糟糕的实践,而且污染了结构层的代码。 想想自己敲代码以来,用的
标签还真不少。

运用 after 伪元素,可以有一种非常优雅的解决方案:

.inline-element::after{ content: "A"; white-space: pre; }

1
2
3
4
.inline-element::after{
    content: "A";
    white-space: pre;
}

通过给元素的 after 伪元素添加 content 为 “A” 的值。这里 A 是什么呢?

有一个 Unicode 字符是专门代表换行符的:0x000A 。 在 CSS 中,这个字符可以写作 “00A”, 或简化为 “A”。这里我们用它来作为 ::after 伪元素的内容。也就是在元素末尾添加了一个换行符的意思。

而 white-space: pre; 的作用是保留元素后面的空白符和换行符,结合两者,就可以轻松实现在行内级元素末尾实现换行。
原文Demo。

more magic — 单标签图案

上面介绍的是伪元素众多用法的一部分,伪元素的作用远不止于此。有了before 、after 两个伪元素。一个标签其实可以相当于 3 个标签来使用,而配合 CSS3 强大的 3D 变换、多重背景,多重阴影等手段,让单标签作画成为了可能,下面是我仅用单个标签,实现的一些动画效果:

单标签实现浏览器图标:

图片 18图片 19 图片 20

单标签天气图标:

图片 21图片 22图片 23图片 24图片 25

CSS3奇思妙想,采用单标签完成各种图案 — Demo (请用 Chrome 浏览器打开,非常值得一看)。

也希望觉得不错的同学顺手在我的 Github 点个 star : CSS3奇思妙想 。

希望这篇文章对大家有所帮助,尤其是在对问题解决的思维层面上。到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

如果本文对你有帮助,请点下推荐,写文章不容易。

打赏支持我写出更多好文章,谢谢!

打赏作者

CSS3初体验之奇技淫巧

2016/07/22 · CSS

原文出处: luckykun   

自CSS3流行以来,虽然以前看过一遍所有的新增属性,但其实在实际项目中用到的少之又少。所以没有形成系统性的认识,以及看到效果立马就能想到解决方案的能力。然后最近正好遇到一个需要绘制大量动画的需求,所以决定趁此机会好好研究一下这个既熟悉又陌生的css3。

在正式开始css3之前,先来介绍一些比较经典的css3实例,让大家好好感受一下css3的魅力,本文会提到以下几个css3的属性:

border-radius、::after、attr和content、box-sizing、linear-gradient、radial-gradient、box-shadow

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 26 图片 27

3 赞 7 收藏 2 评论

border-radius

  • 相信这个属性,写过css的同学都知道,用来产生圆角,比如画一个圆形:
CSS

div { width:100px; height:100px; background:red;
border-radius:100px; //border-radius:100%; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6cdb8ba28662560133-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba28662560133-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6cdb8ba28662560133-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba28662560133-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6cdb8ba28662560133-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba28662560133-6">
6
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6cdb8ba28662560133-1" class="crayon-line">
div {
</div>
<div id="crayon-5b8f6cdb8ba28662560133-2" class="crayon-line crayon-striped-line">
    width:100px;
</div>
<div id="crayon-5b8f6cdb8ba28662560133-3" class="crayon-line">
    height:100px;
</div>
<div id="crayon-5b8f6cdb8ba28662560133-4" class="crayon-line crayon-striped-line">
    background:red;
</div>
<div id="crayon-5b8f6cdb8ba28662560133-5" class="crayon-line">
    border-radius:100px; //border-radius:100%;
</div>
<div id="crayon-5b8f6cdb8ba28662560133-6" class="crayon-line crayon-striped-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>


[![](http://7xtawy.com1.z0.glb.clouddn.com/css31.png)](http://7xtawy.com1.z0.glb.clouddn.com/css31.png)
  • 然后我们来看看它的语法:border-radius: [左上] [右上] [右下] [左下],于是我们来画一个半圆
CSS

div { width: 100px; height: 50px; background: red; border-radius:
50px 50px 0 0; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6cdb8ba34696842044-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba34696842044-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6cdb8ba34696842044-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba34696842044-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6cdb8ba34696842044-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba34696842044-6">
6
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6cdb8ba34696842044-1" class="crayon-line">
div {
</div>
<div id="crayon-5b8f6cdb8ba34696842044-2" class="crayon-line crayon-striped-line">
    width: 100px;
</div>
<div id="crayon-5b8f6cdb8ba34696842044-3" class="crayon-line">
    height: 50px;
</div>
<div id="crayon-5b8f6cdb8ba34696842044-4" class="crayon-line crayon-striped-line">
    background: red;
</div>
<div id="crayon-5b8f6cdb8ba34696842044-5" class="crayon-line">
    border-radius: 50px 50px 0 0;
</div>
<div id="crayon-5b8f6cdb8ba34696842044-6" class="crayon-line crayon-striped-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>


[![](http://7xtawy.com1.z0.glb.clouddn.com/css32.png)](http://7xtawy.com1.z0.glb.clouddn.com/css32.png)
  • 那如果要画一个椭圆该怎么办呢?你会发现上面的语法貌似做不到了,其实border-radius的值还有一种语法: x半径/y半径:  
CSS

div { width: 100px; height: 50px; background: red; border-radius:
50px/25px; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6cdb8ba3a532261250-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba3a532261250-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6cdb8ba3a532261250-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba3a532261250-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6cdb8ba3a532261250-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba3a532261250-6">
6
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6cdb8ba3a532261250-1" class="crayon-line">
div {
</div>
<div id="crayon-5b8f6cdb8ba3a532261250-2" class="crayon-line crayon-striped-line">
    width: 100px;
</div>
<div id="crayon-5b8f6cdb8ba3a532261250-3" class="crayon-line">
    height: 50px;
</div>
<div id="crayon-5b8f6cdb8ba3a532261250-4" class="crayon-line crayon-striped-line">
    background: red;
</div>
<div id="crayon-5b8f6cdb8ba3a532261250-5" class="crayon-line">
    border-radius: 50px/25px;
</div>
<div id="crayon-5b8f6cdb8ba3a532261250-6" class="crayon-line crayon-striped-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>

[![](http://7xtawy.com1.z0.glb.clouddn.com/css33.png)](http://7xtawy.com1.z0.glb.clouddn.com/css33.png)
  • 如果我要画半个椭圆,又要咋办呢?
CSS

div { width: 100px; height: 50px; background: red; border-radius:
100% 0 0 100% /50%; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6cdb8ba40391709445-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba40391709445-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6cdb8ba40391709445-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba40391709445-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6cdb8ba40391709445-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6cdb8ba40391709445-6">
6
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6cdb8ba40391709445-1" class="crayon-line">
div {
</div>
<div id="crayon-5b8f6cdb8ba40391709445-2" class="crayon-line crayon-striped-line">
    width: 100px;
</div>
<div id="crayon-5b8f6cdb8ba40391709445-3" class="crayon-line">
    height: 50px;
</div>
<div id="crayon-5b8f6cdb8ba40391709445-4" class="crayon-line crayon-striped-line">
    background: red;
</div>
<div id="crayon-5b8f6cdb8ba40391709445-5" class="crayon-line">
    border-radius: 100% 0 0 100% /50%;
</div>
<div id="crayon-5b8f6cdb8ba40391709445-6" class="crayon-line crayon-striped-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>

[![](http://7xtawy.com1.z0.glb.clouddn.com/css34.png)](http://7xtawy.com1.z0.glb.clouddn.com/css34.png)

关于作者:chokcoco

图片 28

经不住流年似水,逃不过此间少年。 个人主页 · 我的文章 · 63 ·    

图片 29

::after

这里拿个简单的例子来看,我们要画一个放大镜,如下图:

图片 30

分析一下,这个放大镜可以由两个div组成,一个是黑色的圆环,一个是黑色把手(旋转45度)。所以我们就需要用两个div来实现吗?答案是NO,一个div也是可以的,我们可以借助::after来添加一个元素。同理如果需要三个div,我们还可以使用::before再添加一个元素。下面看一下代码:

CSS

div { width: 50px; height: 50px; border-radius: 50%; border: 5px solid #333; position: relative; } div::after { content: ''; display: block; width: 8px; height: 60px; border-radius: 5px; background: #333; position: absolute; right: -22px; top: 38px; transform: rotate(-45deg); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
div {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 5px solid #333;
    position: relative;
}
div::after {
    content: '';
    display: block;
    width: 8px;
    height: 60px;
    border-radius: 5px;
    background: #333;
    position: absolute;
    right: -22px;
    top: 38px;
    transform: rotate(-45deg);
}

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:雪碧图自适应缩放,单标签之美

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文