• CSS图像替换:文本缩进,负边距以及更多方法

    Posted by : lon.y@qq.com on 2017年7月4日

    CSS中的图像替换有着广泛而多样的历史。如今,如果你还想这么做,有很多至今仍然有效的图像置换技术。必须注意的是,其中一些实际上可能很快(如果不是已经) 会被Google批判,所以要谨慎使用。然而,你很难知道什么时候一个CMS或者项目会迫使你需要get out图像替换kit!这里是过去的kit,在web完全落实之前,这可能是最后一份你需要的图像替换技术列表。 插图来自SitePoint/Natalia Balska 使用负的文本缩进 — Phark 方法 这

    阅读全文...

  • CSS Modules 用法教程

    Posted by : lon.y@qq.com on 2017年7月4日

    学过网页开发就会知道,CSS 不能算编程语言,只是网页样式的一种描述方法。 为了让 CSS 也能适用软件工程方法,程序员想了各种办法,让它变得像一门编程语言。从最早的Less、SASS,到后来的 PostCSS,再到最近的 CSS in JS,都是为了解决这个问题。 本文介绍的 CSS Modules 有所不同。它不是将 CSS 改造成编程语言,而是功能很单纯,只加入了局部作用域和模块依赖,这恰恰是网页组件最急需的功能。 因此,CSS Modules 很容

    阅读全文...

  • 认识CSS属性之clip-path

    Posted by : lon.y@qq.com on 2017年7月4日

    Web 页面以长方形为主,相比之下,平面媒体在形状方面更具多样性。造成这种差异的原因之一就是,在 web 页面开发中缺少像平面媒体中那样合适的工具。 本文会带你认识 clip-path 属性,这个属性使你能够隐藏元素的某部分,可见区域由设置的参数值所控制。我们先学习基本概念,而后介绍 clip-path 语法,最后来看下更高深的概念。 基本概念 Clipping (裁剪)就是从某物上修剪下一块。在前端中,clipping 就是一种整体或部分地隐藏页面元素的

    阅读全文...

  • 面向属性的CSS命名

    Posted by : lon.y@qq.com on 2017年7月4日

    自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名。这个问题主要体现在:第一,有的内容你压根想不出用什么名字来给它命名,因为一般命名总是考虑语义化,好让其他人看到这个css类的名字就知道它是作用于哪一个内容的,但是由于网页内容的复杂性和多样性,你很难保证每个部分都能起一个合适的名字,即使你最终迫不得已想出了一个名字,也会有这个名字是否是最合适的这种纠结存在,而且最要命

    阅读全文...

  • CSS进阶:CSS 颜色体系详解

    Posted by : lon.y@qq.com on 2017年7月4日

    说到 CSS 颜色,相比大家都不会陌生,本文是我个人对 CSS 颜色体系的一个系统总结与学习,分享给大家。 先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容。 接下来的行文内容大概会按照这个顺序进行,内容十分基础,可选择性跳到相应内容处阅读。 色彩关键字 嗯,色彩关键字很好理解。它表示一个具体的颜色值,且它不区分大小写。譬如这样 color:red 的 red 即是一个色彩关键字。 在 CSS3 之前,也就是 CSS 标准 2,一共包含了 1

    阅读全文...

  • 用 CSS3 绘制你需要的几何图形

    Posted by : lon.y@qq.com on 2017年7月4日

    1、圆形 示例: 思路:给任何正方形元素设置一个足够大的 border-radius ,就可以把它变成一个圆形.代码如下: html: css: .size{ width:200px; height: 200px; background: #8BC34A; } .example1{ border-radius:100px; } 2、自适应椭圆 思路:border-radius 这个属性还有另外一个鲜为人知的真相,它不仅可以接受长度值,还可以接受百分比值。这

    阅读全文...

  • 有趣的CSS题目(3): 层叠顺序与堆栈上下文知多少

    Posted by : lon.y@qq.com on 2017年7月4日

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。 不断更新,不断更新,不断更新,重要的事情说三遍。 谈谈一些有趣的CSS题目(1): 左边竖条的实现方法 谈谈一些有趣的CSS题目(2): 从条纹边框的实现谈盒子模型 所有题目汇总在我的 Github 。 3、层叠顺序

    阅读全文...

  • PNG格式小图标的CSS任意颜色赋色技术

    Posted by : lon.y@qq.com on 2017年7月4日

    一、眼见为实 CSS可以修改图片的颜色,没错,可以,眼见为实!您可以狠狠地点击这里:png小图标CSS赋色demo 上面的不是很黑的是原始图标,是个PNG图片,下面这个是可以赋色的: 下面,我们随意选择一个颜色,例如紫色,然后: 是不是感觉很厉害!以后设计师就不需要在提供几套颜色的图片了。 SVG, icon fonts等技术似乎也不是那么耀眼了。 二、原理其实很简单 原理其实很简单,使用了CSS3滤镜filter中的drop-shadow,drop-sh

    阅读全文...

  • 我对Flexbox布局模式的理解

    Posted by : lon.y@qq.com on 2017年7月4日

    Flexbox,一种CSS3的布局模式,也叫做弹性盒子模型,用来为盒装模型提供最大的灵活性。首先举一个栗子,之前我们是这样实现一个div盒子水平垂直居中的。在知道对象高宽的情况下,对居中元素绝对百分比定位,然后通过margin偏移的方式来实现。 假如使用了flex后,实现起来就简单了,而且不需要自己去算,也不需要绝对定位,只需要通过对伸缩容器定义两个属性,justify-content定义伸缩项目沿着主轴线的对齐方式为center, align-items

    阅读全文...

  • 【CSS进阶】box-shadow 与 filter:drop-shadow 详…

    Posted by : lon.y@qq.com on 2017年7月4日

    box-shadow 在前端的 CSS 编写工作想必十分常见。但是 box-shadow 除去它的常规用法,其实还存在许多不为人知的奇技淫巧。 box-shadow 常规用法 说到 box-shadow ,首先想到的必然是它能够生成阴影,所以称之为 shaodow ,简单看看它的语法: 基础属性语法 box-shadow 属性向框添加一个或多个阴影。 box-shadow: h-shadow v-shadow blur spread color inset

    阅读全文...