whqet

在前端项目开发中，Sass、Compass、Gulp、Git等等越来越多地用到命令行工具，windows自带的命令行工具实在不堪，于是Cmder成为很多人的选择。同时，号称“最性感”的Sublime Text因为其可扩展性、可定制性正在成为前端开发人员的一个“法宝”。如何让这两个“好基友”协同工作呢？本文来简要分析下。

文本居中，div居中，水平居中，垂直居中，两个方面11种解决方案总有一种适合您。

实现图像灰度（grayscale）最初有ie4推出的专属属性filter实现，后来在css3里w3c实现了标准的filter，不过不同浏览器的实现程度不一样，因此现阶段我们必须探索一种浏览器兼容的解决方案。

今天来看一组纯CSS实现的鼠标悬停效果，在线研究代码点效果一、效果二、效果三，下载收藏点这里。

利用CSS3实现图片阴影效果，在线研究点这里，下载收藏点这里。主要利用transform、z-index、box-shadow实现效果。

在Awwwards上欣赏牛人大作时，看到了一个网站newtonrunning，狠喜欢他的菜单切换效果和球鞋多维展示效果，然后禁不住手痒仿制了一个多维图像展示效果，大家可以欣赏效果，在线研究，下载收藏。本案例主要知识点，1.css counter计数器的使用，2.自适应设计（百分比实现），3.CSS3 Transition（过渡），4.复杂选择器的用法

来自

CSS Counter（CSS 计数）可以允许我们使用css对页面中的任意元素进行计数，实现类似于有序列表的功能，灵活使用CSS Counter可以让我们在进行文档排版、页面布局时事半功倍，好的，请大家摩摩拳擦擦掌，精彩内容马上呈现。

今天推荐一个鼠标悬停效果包，大家可以通过研读效果提高自己的水平，也可以直接用在自己的项目中。

今天在准备明天的课堂案例时，遇到了Auto值的Transition Bug问题，这里的解决方案是我们需要尽可能的绕过auto值，这里我们可以通过使用max-height绕过height:auto值。

之前曾经研究过几个纯css实现的文字效果，《CSS文字条纹阴影动画》和《响应式奶油立体字效果》等，今天我们来研究几款文字效果，主要利用text-shadow、webkit内核的几个独有特性实现效果。

昨天的《纯CSS3文字效果推荐》文章里面推荐了8款纯css实现的文字效果，其中3d文字效果最为流行，限于篇幅仅仅展示了其3D实现原理，没有考虑代码的复用性和可移植性，立体字的纵深感、方向感、错落感如何实现个性定制，立体字阴影动画，彩虹字动画等等，一一道来。

EaselJS简明教程系列第二部分，今天主要看看动画的实现，没有看过第一部分的可以看看教程1绘图。

EaselJS是CreateJS Suite中的一个js库，它可以让canvas的使用变得简单，它提供了一个直接了当的创建html5 canvas中使用富媒体、富交互应用的解决方案。为了便于大家学习，结合官方教程和官方DEMO我们来写一个简明教程，主要是对自己的学习做个梳理，也希望对大家有所帮助。

昨天看到html5tricks上的一篇文章《jQuery鼠标滑过文字跳动动画插件》，止不住手痒用sass、css3实现下，并进行了扩展，希望能对大家有所帮助，主要利用sass@for指令、compass里的random随机数，给文字设置不同的动画状态，利用transition或animation实现动画。

今天在Dribble闲逛，偶然间看到一个不错的发送完成效果，使用纯css实现了下，最终效果如下。

2015年2月3日，CSS Counter Style level3成为了W3C的候选标准，是时候来一探究竟，看看强大魔力的@counter-style如何自定义list-style和counter。进来一坐，且听庆哥分解。

ladies and 乡亲们，表单验证你在做吗？客户端or服务器端，javascript or jquery，动手写 or 使用插件，今天我们来探索下使用纯css实现表单验证，借以学习css selectors level 4中的表单相关的伪类选择器。

本文为《Markdown简明教程》系列教程的第5篇CSDN Markdown快速上手，主要讲解CSDN Markdown的特点、快速上手、个性定制文章模板等。

作为一个CSS预处理器，Sass正受到越来越多的青睐，诸如Github、Codepen、CSS-Tricks、SitePoint、w3cplus等网站采用Sass组织、管理CSS文件，Sass正在逐渐成为事实上的CSS预处理器行业标准。接下来几篇文章，我们来研读下Sass中的关键功能，今天来看map，大家不妨一坐，精彩内容马上呈现。 map简介在Sass中，maps代表一种数据类型，可以包含若干键

刚刚写了篇《CSS变量试玩儿》，我们了解到可以使用原生的CSS来定义使用变量，简化CSS书写、优化代码的组织与维护，但可怕的兼容性问题，又让我们望而却步、一笑了之。 但是有这么一个CSS变量currentColor，兼容良好、功能强大，接下来我们来一探究竟。简介CSS里已经有一个长期存在的兼容性良好的变量currentColor，表示对当前元素颜色的引用，可以应用在当前元素的其他属性和后代元素上。

前端开发规范系列文章之html编码规范，感兴趣的同学请关注《前端开发规范》专栏。随着html5的逐渐深入人心，html5和xhtml截然相反的态度，造成了前端开发者的困惑，如何保持html代码的兼容性、简洁性、未来适用性，称为今天我们这篇文章的主要目的。参考一系列的html开发规范（mdo、github、doyoe、globant、LFeh等），从诸多规范中寻求共同点，试图寻找最佳解决方案。

前端开发规范系列文章之Javascript Tips and Tricks，本意是写成常用代码收集、常用技巧整理的文章，感觉“常用代码大全”太土、“实用代码整理”有失偏颇，“提示与技巧”不够稳重，所以使用常用的英语说法，相信广大程序员都懂得。

临近期末，大部分的基础教学内容已经讲解完毕，在进行比较大型的项目训练之前，如果能让学生了解甚至遵循一些前端开发的编码规范将会是一件非常有意义的事情。因此，本博客准备于近期整理一个编码规范于最佳实践的系列文章，包括html、css、javascript、jquery、php等，希望能对大家有所帮助。

我们知道，好的编码规范、编程约定非常重要，但是文档架构呢?建立一个好的文档架构是开始一个网站或者APP的基础，我们如何建立一个结构清晰、便于维护的文档架构呢？我们的目标：1）需要一个多页面项目（网站或者APP）2）需要项目支持多屏幕尺寸，换句话说，需要实现响应式布局3）最终产品易维护4）最终产品性能良好5）未来项目可套用该模板

系列博客《跟名站学前端》，希望对大家有所帮助，今天来看某百科网站的年度总结，交互体验超赞！

今天来看一个利用canvas+javascript实现的烟花绽放效果，大家可以到我的codepen看看DEMO，在线观看或是下载研究，悉听尊便。

纯css实现的checkbox，效果见我的codepen。关键在于把原生的input隐藏，用和他相关的label来探测单击事件。再就是checkbox里的对勾的实现，用右边和下边的边框组合，然后旋转而成。

译者说：近来一些国外的大牛分享自己网站的CSS，从中我们了解css相关技术的应用情况，把握CSS的使用规范，今天翻译下Chris Coyier 分享的CodePen's，希望可以给大家一些帮助。

今天继续来看一个纯CSS实现的3D折纸效果，效果如下图。基于上一个效果《纯CSS实现图像3D悬停效果》而开发的，没有看过的童鞋欢迎移步。本效果原理如下图所示，分别用.img，.img:before和.img:after三个元素装载图像的50%，30%和20%三个部分，三个部分设置一样的背景图像，下面两个background-position属性实现背景偏移。

CSS3演武场继续CSS案例研究，今天来看一个纯CSS实现的3D翻牌效果，简易效果请大家狠戳这里在线体验，或下载收藏。

昨天晚上索契冬奥会开幕，开幕式上还出现了五环变四环的乌龙，哈哈。我们用SVG弄个五环动画加以弥补。

通过开源文档学LESS系列的第一部分，我们通过一个经典的LESS Mixins集preboot，学习了LESS的基础知识，包括变量、注释、混合和混合的参数等，详见通过开源文档学LESS系列1。我们继续第二部分，通过tRRtoolbelt.less的代码解读来学习LESS。tRRtoolbelt.less是由Trent Oswald开发的一个便用日常应用的LESS mixinis Collection。

今天开始一个系列教程，通过一些国外开源LESS文档来学习LESS。这些开源http://的文档一般都是前端开发实际项目经验的总结，从中可以看出LESS的基本语法和日常使用，也可以从中管窥大牛开发者的智慧。

See the Pen Canvas stripes by haiqing wang (@whqet) on CodePen.

通过开源文档学LESS系列1，我们通过一个经典的LESS Mixins集preboot，学习了LESS的基础知识，包括变量、注释、混合和混合的参数等。通过开源文档学LESS系列2，通过tRRtoolbelt.less的代码解读来学习LESS，主要讲解了LESS中的命名空间、作用域、多条件判断和类型判断函数、字符串插值和避免编译。本教程通过解读css effects项目源码来继续学习LESS。

利用CSS3实现精美按钮，效果如下图所示，也可以狠狠点击这里。前端开发whqet，关注前端开发技术 分享网页相关资源。实现两种风格的按钮，主要利用box-shadow阴影实现3d风格的按钮，同时利用css的counter实现计数。html结构非常简单，详细代码如下。 Number One Number Two Number Three Number Four Nu

最近研究纯css3实现绘图，无意中找到one-div.com,利用一个div去实现一个图标，如下图所示。牛，研究研究。利用css实现的icon可以方便的进行缩放而不失真，同时添加动画效果也变得轻而易举。下面来实现下礼品的这个，--demo--1.难点分析一个div实现这个效果，刚开始会不够用，尤其是礼品盒下面的四个盒子。div做一个矩形，剩下的几个用box-sh

一、效果欣赏纯css3打造精美时钟效果，效果如下图所示，也可看看----demo-----二、难点解析单独位数数字动画动画状态的控制三、实现步骤1.html架构 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 : 0 1 2 3 4 5 6

渐变，指形状或颜色的有规律性的变化，往往可以给人很强的节奏感和审美情趣，这里研究的主要是颜色的渐变。渐变的形式在日常生活中很常见，在网页中的用的也很多，传统网页技术中往往用图片来实现渐变，容易带来加载负担和动态定制的瓶颈。CSS3提供了实现渐变的属性，随着浏览器的逐步支持，研究CSS3渐变已势在必行。涉及CSS渐变的属性主要有linear-gradient、radial-gradient、re