• 使用 currentColor 属性写出更好的 CSS 代码

    原文地址: Writing better CSS with currentColor 本文已获得原作者 Alkshendra Maurya 的授权 译文出自: 掘金翻译计划 译者: yangzj1992 校对者: linpu.li , Nicolas(Yifei) Li 总有一些极其强大的 CSS 属性在目前已经有了很好的浏览器支持,但却很少被

    16-09-29
  • [译]你考虑清楚了吗就决定用 Bootstrap ?

    原文地址: Bootstrap considered harmful 译文出自: 掘金翻译计划 译者: MAYDAY1993 校对者: Kulbear hpoenixf 近年来,在前端项目中, Bootstrap 已经成为了一个非常受欢迎的工具。 Bootstrap 的确有很多优点,然而,如果你的团队中恰好有一个专职的前

    16-08-31
  • [译]嘿,Logo,你应该是这个尺寸的!

    原文地址: Practical SVG 本文已获得原作者 Chris Coyier 的授权 译文出自: 掘金翻译计划 译者: MAYDAY1993 校对者: zhouzihanntu hpoenixf 可能你想控制任何你放在网上的图片的尺寸,嗨!就是你! Logo !你应该是这个大小: imgsrc=logo.pngclass=logo/

    16-08-31
  • CSS分层动画可以让元素沿弧形路径运动

    原文: Moving along a curved path in CSS with layered animation 翻译: 涂鸦码龙 译者注:部分代码示例在原文中可以看效果(作者写在博文里面了…),我偷懒把它做成Gif图了。 CSS 的 animations (动画) 和 transitions(变换)擅于实现从点 A 到点 B

    16-01-15
  • Bootstrap 栅格系统的精妙之处

    节选翻译自 The Subtle Magic Behind Why the Bootstrap 3 Grid Works 从接触 Bootstrap 已经有很长时间了,给人的感觉是快速,简单,易上手,其中栅格系统是一个亮点: 一直感觉像 CSS 栅格系统之类的东西拿过来用就好了,不用深究背后的原理。直到有一天你

    15-09-26
  • Flex 布局语法教程

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了

    15-07-14
  • CSS中的变量使用详解

    CSS中的变量给了我们诸多优点:方便、代码重用、更可靠的代码库和提升 防错 能力。 示例 :root{--base-font-size:16px;--link-color:#6495ed;}p{font-size:var(--base-font-size);}a{font-size:var(--base-font-size);color:var(--link-color);} 基础 当使用

    15-06-06
  • 用CSS绘制三角形

    引入 用 CSS 绘制三角形,只是对 border 属性的简单应用。平时使用 border 属性的时候多留意一下,就会发现其中的技巧。下面,我们先看以下代码: HTML代码:divclass=test/div----------CSS代码:.test{width:10px;height:10px;border-top:50pxsolidblack;b

    15-05-23
  • 关于CSS[几乎]没人知道的3件事

    转载自 http://dwz.cn/JcXMM 你了解 CSS 吗?在六个月前,我提供了一个在线 免费 CSS 测试 系统。测试结果表明很多一线开发者并没有如他们所想的那样了解 CSS。目前有超过 3,000 人参加了该项测试,平均成绩只有 55 分。 但是,嘿,平均分本身并没有什么意思

    15-05-07
  • 利用 SVG 和 CSS3 实现有趣的边框动画

    演示 | 下载 今天我们来探索一下 Carl Philipe Brenner的网站 上一个微妙而有趣的动画效果。当鼠标经过网格元素时,会有一个微妙的动画发生——网格元素变得透明,每条边有个顺时针的动画,创造了非常好的效果。这种效果是通过JS给 span 标签的宽或者高做了

    15-02-14
  • 自定义Bootstrap 样式

    自从Twitter推出 Bootstrap 以来,它的推广程度就像火箭发射一样节节攀升。这个广受欢迎的CSS框架为众多网站提供了响应式网格系统,预定义样式的组件与 JavaScript插件 。 Bootstrap 的设计初衷之一就是实用。当你要新建网站时, Bootstrap 绝对是一个节约时

    15-01-07
  • box-sizing border-box 的理解

    box-sizing: border-box; 则div 设置的宽高将包含边框及padding 语法 box-sizing:content-box|border-box|inherit; 值 描述 content-box 这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。

    14-12-19
  • SASS用法指南

    摘自 阮一峰SASS用法指南 学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯

    14-12-14
  • 从div盒子模型谈如何写可维护的css代码

    市面上我们常常会看到各种各样的设计模式书籍,Java设计模式、C#设计模式、Ruby设计模式等等。在众多的语言设计模式中我唯独找不到关于CSS设计模式的资料,即使在网上找到类似内容,细细一看之下才发觉是南辕北辙。经过浩瀚文章搜索发掘下依旧一无所获之后,

    13-07-17
  • inline-block的前世与今生

    曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了,上面的代码是为了兼容 IE6、7而已。那么你真的了解 inline-block 了吗?本文将

    13-05-04
61文