背景

需求预沟通

  • 产品:我们需要做一个 IM,和微信一样
  • 我:打扰了,走错片场了,你们继续,,,,,,,
  • ....
  • 我:这个需求虽然不合理,但是我还是接了。。。。。。
CSS 单词换行 and 断词,你真的完全了解吗
In 未分类 on 2016年05月25日 by view: 14,786
9

背景

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

QQ截图20160523145733.png-44.5kB

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

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

TAT.rocket 总结伪类与伪元素
In 未分类 on 2016年05月09日 by view: 17,640
13

熟悉前端的人都会听过 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 未分类 on 2016年03月27日 by view: 64,107
35

前言

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

 

兼容性

TAT.yunsheng CSS Gradient 详解
In 未分类 on 2016年03月05日 by view: 6,396
3

前言

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

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

TAT.iAzrael 使用 CSS mask 实现图片的斜线拼接
In 未分类 on 2016年02月04日 by view: 9,146
21

每次必说题外话

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

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

什么是斜线拼接

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

example

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

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

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

伪元素 content 的应用
In 未分类 on 2015年10月31日 by view: 4,785
5

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

TAT.yana CSS3 制作 Loading 动画
In 未分类 on 2015年10月30日 by view: 5,881
7

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

这是为什么呢

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

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

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

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

TAT.bizai 全局 CSS 的终结 (狗带) [译]
In 未分类 on 2015年10月22日 by view: 15,801
23

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

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

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

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

TAT.tennylv 移动 web 问题小结
In 未分类 on 2015年06月14日 by view: 26,424
29

Meta 标签:

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