CSS3 实现文字流光渐变动画 – 前端 – 掘金
来自百度前端技术学院的实践任务：有趣的鼠标悬浮模糊效果，参考：http://ife.baidu.com/course/d…，用CSS3实现了一下，顺便复习下CSS的基础。 …
提升你的 CSS 姿势 – 前端 – 掘金
原文地址Github 系列文章地址 CSS的学习是一个典型的低门槛，高瓶颈的过程，第一次接触CSS的时候觉得一切是如此简单，直到后面越学越发现自己一无所知，建议看看张鑫旭老师的说说CSS学习中的瓶颈。本文则是从四个方面来讨论如何编写可扩展、可维护的CSS代码：…
CSS 布局: 40 个教程、技巧、例子和最佳实践 – 前端 – 掘金
【感谢 Neo 投递本文 – 微博帐号：_锟_ 】 前言： 布局是WEB开发一个重要的课题，进入XHTML/CSS后，使用TABLE布局的方式逐渐淡出，CSS布局以众多优点成为主流，本文将介绍40个基于CSS的web布局的资源和教程。文章的出处在http://…
提高 CSS 技术技巧 – 前端 – 掘金
本文由99根据Hugo Giraudel的《LEARNING PRINCIPLES FOR IMPROVING YOUR CSS》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://ty…
什么鬼，又不知道怎么命名 class 了 – 前端 – 掘金
（本文系来自腾讯imweb团队 结一大大 关于class命名的总结，获取结一授权转载，推荐点击左下角的阅读原文，原文地址：http://imweb.io/topic/5623c25… ）相信写css的人都会遇到下面的问题：糟糕，…
H5 动效的常见制作手法 – 前端 – 掘金
众所周知，一个元素，动往往比静更吸引眼球； 一套操作界面，合适的动态交互反馈能给用户带来更好的操作体验； 一个H5运营宣传页，炫酷的动画特效定能助力传播和品牌打造。 近两年，小到loading动画，表单动效，大到各式各样H5运营页的炫酷展现，“动效设计”一词可…
前端开发者应该知道的 CSS 小技巧 – 前端 – 掘金
一些小技巧让你的CSS技术更专业 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CSS幻灯片上使用max-he…
你不需要 js 就可以实现一个轮播 – 前端 – 掘金
Tip轮播这种组件是大部分网站都会存在的了，绝大部分都是 js 来实现逻辑控制的，它的原理就不多阐述了，因为我们现在要做的是不用 js 来实现一个轮播组件！ 前提是只兼容现代浏览器。 原理这里我们主要用的原理： CSS3 element+element 选择…
【译】60 个有用 CSS 代码片段 – 前端 – 掘金
1、垂直对齐 如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑： .verticalcenter{ position: relative; top: 50%; …
CSS writing-mode 的特别技巧 – 前端 – 掘金
原文地址：CSS Writing Mode 本文已获得原作者 Ahmad Shadeed 的授权 译文出自：掘金翻译计划 译者： huanglizhuo 校对者：Kulbear , shixinzhang 最近在 Opera inspector 中编…
CSS 查漏补缺 – 前端 – 掘金
块级格式上下文（Block formatting context） 普通流(Normal Flow) 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行…
移动端样式小技巧 – 大坚 – SegmentFault – 前端 – 掘金
平时在移动端开发拼页面的过程中总会遇到一些问题，主要是各手机webview样式显示效果不一致造成的。以下总结了一些常见坑和一些小技巧，希望对看官有所帮助！ 本文只针对两大手机阵营 Android和IOS 中的魅蓝metal 和 iPhone6进行样式对比。 一…
你真的觉得你会 CSS3 了吗？ – 前端 – 掘金
自CSS3流行以来，虽然以前看过一遍所有的新增属性，但其实在实际项目中用到的少之又少。所以没有形成系统性的认识，以及看到效果立马就能想到解决方案的能力。然后最近正好遇到一个需要绘制大量动画的需求，所以决定趁此机会好好研究一下这个既熟悉又陌生的css3。 在正式…
前端 CSS 一些小细节 – 前端 – 掘金
英文原文：Peter Gasston ，翻译：vivien chen 未来的CSS太让人兴奋了：一方面，是全新的页面布局方式；另一方面，是酷炫的滤镜、颜色等视觉效果。这些CSS，受开发者追捧，被杂志和博客文章铺天盖地地介绍。 如果说这些特性是CSS华丽的一面，…
移动 web 适配方案动态计算版 | Brizer’s Blog – 前端 – 掘金
以前整理过一篇移动端适配方案的文章，当时是在部门的专题cms系统中使用。文章地址 思路就是通过媒介查询整理出一套根字体大小，然后各个元素通过rem单位来进行适配。而这次我们的根字体大小不再是通过媒介查询得到，而是通过屏幕宽度进行动态计算，并且还具有高分辨率屏幕…
(译) 如丝般顺滑：使用 CSS3 实现 60 帧的动画 – 前端 – 掘金
在移动端上实现动画很简单。 在移动端上正确地实现动画也比较简单…如果你采纳我们的建议的话。 虽然现在每个人都会使用 CSS3 实现动画，但许多人用的都不够恰当。很多应加以考虑的最佳实践常常被忽略，因为仍然有人不明白这些最佳实践的真正意义。 如今有这么多的设…
(译) 148 个资源让你成为 CSS 专家 – 前端 – 掘金
迄今为止，我已经收集了100多个精通CSS的资源，它们能让你更好地掌握CSS技巧，使你的布局设计脱颖而出。 CSS3 资源 20个学习CSS3的有用资源 CSS3 风暴 — 提示, 诀窍 和 技巧 20个非常有用的CSS3教程 令人激动的CS…
CSS 架构指南 – 前端 – 掘金
以命令式风格写 CSS 会很快地导致下面的结果： 不够清晰 —— 那些带来了成吨混乱的东西，例如不清晰的依赖（难以删除或者增加东西）, 不可维护 —— 当在创建新代码或者改善现有代码的时候效率低下， 重复冗余 —— 使得代码臃肿而且对性能有负面影响， 大量的…
禁止用户选择的另一种思路（兼容 IE8） – 前端 – 掘金
user-select 前端开发中常常会遇到一种需求，让某些元素的内容不能被选中，一般的做法会用 user-select: none 来做，由于 user-select 并不是标准的 CSS 属性，所以使用的时候要加上浏览器的前缀。 .disabled-sel…
老司机教你更好的进行 CSS 编程 70 个技巧 – 前端 – 掘金
CSS 并不总是容易处理。 在你的能力和经验不够的时候，CSS编程会成为一个噩梦，特别是你不确定为页面元素中选择哪种选择器的时候。使用一个不常见的CSS属性以实现更好的语义化，没有比这个方法更好用的更简单的的实现减少代码复杂度的了。 我们研究了一些很有用的CS…
如何实现 font-size 的响应式 – 掘金
本文样式代码采用 SCSS。 那么多的文章讲了响应式的网站如何布局，使用 CSS 如何实现，如何 Blah Blah 的。但是，我们都忘了很重要的一点——对字体大小的响应式控制。 现在的很多网站，从布局上来说，尽管是响应式的(当然，或许可以说成所谓响应式的)…
用 CSS 实现惊艳的动画 – 前端 – 掘金
小编推荐：掘金是一个高质量的技术社区，从 ECMAScript 6 到 Vue.js，性能优化到开源类库，让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP，技术干货尽在掌握中。 考虑一下以下的情景…
从 height:100% 不支持聊聊 CSS 中的 “死循环” « 张鑫旭 – 鑫空间 – 鑫生活 – 前端 – 掘金
by zhangxinxu from http://www.zhangxinxu.com/wor… 本文全文转载需购买版权(500¥)，摘要引流则免费，具体参见这里 一、从为何height:100%无效的回答说起 大家应该都知道，如果…
谈谈一些有趣的 CSS 题目（五）– 单行居中，两行居左，超过两行省略 – 前端 – 掘金
开本系列，讨论一些有趣的 CSS 题目，抛开实用性而言，一些题目为了拓宽一下解决问题的思路，此外，涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。 不断更新，不断更…
如何用 CSS 实现更好的页面，如何成为高逼格前端。 – 前端 – 掘金
写在最前 我们都是前端工程师，无论你现在是页面仔，还是Node服务开发者，抑或是全端大神，毋庸置疑的是，我们都是前端工程师，我们生来就对追求页面的极致拥有敏锐的触觉，无论是页面实现方式的高大上、页面的极致的性能还是页面完美的展现，都是我们孜孜不倦的追求目…
SCSS 迷你书 (上) – 前端 – 掘金
注释 支持常规的两种注释方法; 1. //双斜杠的单行注释, eg : //这是一个圆角按钮 2. /*/范围注释, eg: / 什么功能; 做什么用的; */ 设置文件编码 编码@charset “en…
