钉子の次元

Dimpurr – 千里之行,始於足下。

HTML Head Generator – 纯 CSS 实现的头部元标签代码生成器

前段时间突发奇想,捣鼓出了这个纯 CSS 选择器实现的在线 HTML <head> Meta 标签生成器,以解决每次要写 HTML 头都得去找个之前的文档复制,还得琢磨半天需要哪些的麻烦。没有到用一行 JavaScript ,基本原理是 CSS 3 的 + 紧邻选择器和 ~ 同级后继选择器。前端攻城狮们可以用短链接 http://find.moe/headgen 快速访问,也可以拖到收藏夹备用。

感谢 电灵 酱对最终样式的建议。

Dimpurr's <head> Generator

Dimpurr’s Head Tag Generator

写的时候感觉槽点一大堆,过了一周什么都忘了 …… 简单说明一下实现的要点吧。如果有更好的实现思路或觉得有可以改进的地方敬请指教,不过,前提是无 JavaScript 。

READ MORE →

你所不知的 CSS ::before 和 ::after 伪元素用法

CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面,里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外,就是接下来要介绍的这两个伪元素了。

Creative Button Styles

Creative Button Styles

一 基本语法

在了解进阶的应用之前,先来了解一下语法规则。平常仅仅需要将这两个伪元素用于添加一些自定义字符时,只需使用伪类使用的单冒号写法,以保证浏览器的兼容性:

READ MORE →

使用 position: sticky 达到粘性元素区域悬浮效果

在一些很长的表格中,常常会使用表头悬浮的设计以方便阅读,即在表格离开窗口之前,表头会一直 fixed 悬浮在表格的最顶上。还有许多诸如评论框等元素,也采用了这种被称为 Sticky Pin 或者 粘性元素 的设计。

这种效果一直以来需要通过 JavaScript 实现。不过就在去年,这项结合了 Relative (在屏幕中时) 和 Fixed (移出屏幕时) 的样式效果被提案添加到了 CSS3 中。下面是一个示例:

.sticky {
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: sticky;
	top: 15px; // 使用和 Fixed 同样的方式设定位置
}

因为这个样式尚未进入标准,还必须使用私有前缀。这里介绍一下浏览器兼容更好的 JS 实现方式:

READ MORE →

Win 下配置 Sublime Text 的 SASS 插件

SASS是一门著名的CSS预处理器语言,而 Sublime Text 则堪称界面最优雅的编辑器之一。为ST配置了SASS的插件之后,便可以在ST中很方便的支持SASS的语法高亮以及一键编译。

CSS预处理器即在CSS语法里加入编程中的变量、循环、调用等结构,再将其编译成普通的CSS文件。目前主流的预处理器有实时编译的 LESS 和预编译的 SASS ,在语法部分也有一些区别,个人认为SASS更加强大一些。关于SASS的更多详细介绍在此不再赘述,若想了解请参见 SASS用法指南 。

SASS需要Ruby环境的支持,因此首先要下载并安装对应版本的 Ruby Installer for Windows 。然后在开始菜单中启动 Start Command Prompt with Ruby ,在弹出的命令行界面中输入:

gem install sass

随后会开始SASS的安装。如果提示 HTTP 302,可能是GEM被墙的问题,请在 Internet 选项 中挂上代理重试。

READ MORE →

CSS3 Media Query 响应式媒体查询

在CSS中,有一个极其实用的功能:@media 响应式布局。具体来说,就是可以根据客户端的介质和屏幕大小,提供不同的样式表或者只展示样式表中的一部分。通过响应式布局,可以达到只使用单一文件提供多平台的兼容性,省去了诸如浏览器判断之类的代码。

当然这种设计也存在着缺点,比如我所见的不少使用响应式布局的设计在适配移动端时大量使用 display:none 隐藏富媒体元素,这样势必会导致大量不必要的流量。因此,如果有较为重要的移动端需求,那么还是开发专门的移动版页面为好。不过,对于诸如内容较少的页面或者单页式网站来说,响应式布局依然不失为一种偷懒的好方法 ^ ^

一、在 <head> 链接CSS文件时提供判断语句,选择性加载不同的CSS文件

<link rel="stylesheet" href="middle.css" media="screen and (min-width: 400px)">

这句意味在满足 media 的判断语句 screen and (min-width: 400px) 即 屏幕并且最小宽度不小于400px 的介质上面使用 middle.css 。

READ MORE →