背景

某天老板在群里反馈,英文单词为什么被截断了? 

QQ截图20160523145733.png-44.5kB

很显然,这是我们前端的锅,自行背锅。这个问题太简单了,css里加两行属性,分分钟搞定。

开心的提交代码,刷新页面。我擦,怎么还是没有断词?不可能啊!!! 难道这两个属性有什么兼容性问题或者有什么限制条件?为了不搬石头砸自己的脚,还是去深入了解一下。

TAT.rocket 总结伪类与伪元素
In CSS3 on 2016年05月09日 by view: 2,741
7

熟悉前端的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用法,即使你有用过伪类与伪元素,但里面总有一两个你没见过的吧。

1.伪类与伪元素

先说一说为什么css要引入伪元素和伪类,以下是css2.1 Selectors章节中对伪类与伪元素的描述

CSS introduces the concepts of pseudo-elements and pseudo-classes  to permit formatting based on information that lies outside the document tree.

 

TAT.tennylv 移动web适配利器-rem
In CSS3 on 2016年03月27日 by view: 13,277
28

前言

提到rem,大家首先会想到的是em,px,pt这类的词语,大多数人眼中这些单位是用于设置字体的大小的,没错这的确是用来设置字体大小的,但是对于rem来说它可以用来做移动端的响应式适配哦。

 

兼容性

TAT.yunsheng CSS Gradient详解
In CSS3,Web开发 on 2016年03月05日 by view: 2,598
1

前言

现在设计师同学越来越高大上了,纯色背景已经不能满足人民群众日益增长的物质文化需要了,必须整渐变背景o(╯□╰)o。怎么还原呢,设计师直接丢过来一个几十K的图片,这怎么行。。。

还好我们有CSS第三代!这次就来唠唠CSS3 Gradient(/ˈgreɪdɪənt/)的用法。

每次必说题外话

话说貌似好久没有写技术文章了,自从娃娃出来后,很少能有时间做技术研究,思考的时间也不足。不过有得必有失,世上事也就酱紫了。但是作为一个前端攻城师,不写代码,不研究技术,是会被后浪拍死在沙滩上的。

碰巧前段时间碰到个CSS问题,一直很喜欢CSS的,能CSS解决的问题绝对不用JS,于是就抽时间整整看。

什么是斜线拼接

回到本文主题上,”斜线拼接“是我自创的词语,因为我也不知道怎么描述这个需求,o(╯□╰)o,实际的效果是下面所示:

example

眼力好的筒子应该就能发现,上面这张图是两个帅锅拼接在一起的,看中间的斜线。

但是呢,刚接到这个需求的时候,开发是抓狂的——第一反应就是用canvas画图,这得多累啊,只是要显示张图片而已,竟然还要动用一坨JS,O__O "…

不过依稀记得,CSS 貌似有个遮罩的特性,可以实现图片的部分显示的效果的。

伪元素content的应用
In CSS3,移动开发 on 2015年10月31日 by view: 2,164
5

日常开发中,我们常用:before,:after来实现一些效果,比如

TAT.yana CSS3制作Loading动画
In CSS3,Web开发 on 2015年10月30日 by view: 3,062
7

    虽然现在互联网的网速越来越快,但永远都跟不上我们生活节奏的加快。资深网瘾少女表示,这世上最刺眼的不是阳光,而是“正在加载”;最长的不是周杰伦的电影,而是“正在加载”;最痛心的事情不是你不爱我,而是“正在加载”(语文老师告诉我排比要至少写三句)。

这是为什么呢

为什么loading让我们如此痛苦呢?

因为,我们看到的loading是这样的QQ截图20151102114700是这样的QQ截图20151102114723颜值再高一点的是这样的spinner-css3-animations

这就是为什么要叫他们“菊花”,就因为长得丑啊喂!

我们要在这个看脸的世界活下去!!!

TAT.bizai 全局CSS的终结(狗带) [译]
In CSS3,Web开发 on 2015年10月22日 by view: 7,349
22

CSS类名总是作用在同一的全局作用域里面。

任何一个跟CSS有长时间打交道的开发者,都不得不接受CSS那具有侵略性的全局特性,明显地这是一种文档流时代的设计模型。而对于今天现代web应用,更应该积极提出一种更健全的样式环境。

每一个CSS类名都有可能与其它元素产生的意想不到副作用,又或者产生冲突。更令人吃惊的是,我们的class的效果可能在全局作用域的互相影响下(原文这里比喻为全局唯一性战争),最终在页面上产生很少的效果或者根本没有效果。

任何时候我们改变一个CSS文件,我们都需要小心翼翼地考虑全局环境是否产生冲突。没有其他前端技术是需要如此之多的规范和约束,而这仅仅是为了保持最低级别的可维护性

TAT.tennylv 移动web问题小结
In CSS3,HTML5,Web开发,经验心得 on 2015年06月14日 by view: 15,672
25

Meta标签:

这个想必大家都知道,当页面在手机上显示时,增加这个meta可以让页面强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览。

TAT.sheran 浅谈flexbox的弹性盒子布局
In CSS3,HTML5 on 2015年05月19日 by view: 6,893
17

     flexbox是一个新的盒子模型,当你给一个元素使用了flexbox模块,那么它的子元素就会指定的方向在水平或者纵向方向排列。这些子元素会按照一定的比例进行扩展或收缩来填补容器的可用空间。flexbox有许多很好用的地方,下面就着重讲述一下它的一些使用场景:

 

Example 1: flexbox等分布局

 

      如果你要实现以下所示的样式,你可能首先想到的是用float:

 

         图片1