whqet

今天给大家推荐LESS的几个Mixin集，其中最著名的要数LESS Hat了，诚如其官方网站所言，“86个智能Mixin可以大大简化网页开发工作”。另外，LESS Elements、Twitter Bootstrap和Preboot几个也不错，都是可以选择的。笔者认为，LESS Hat提供的mixin最多，支持最广泛，建议大家使用。

See the Pen shadow text by haiqing wang (@whqet) on CodePen./*Webkit Only，key code for the effect*/ .background-clip(text); -webkit-text-fill-color: transparent;

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

给大家分享一个codepen上的调用谷歌Web Font的mixin，以此为例我们继续学习SASS。

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

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

当你需要搞定响应式布局时，一堆堆的媒体查询、大量的属性、属性值往往可以把你搞颠，SASS（或者诸如此类的预处理器）被认为是处理响应式断点的最佳利器。说到响应式断点处理，很多种方式涌上心头，经常有人问哪种方式最优，正如前端开发领域的大多数问题一样，这个问题同样没有标准答案，我们需要具体问题具体分析。

好的，今天我们来研读下css大牛Chris Coyier的利用SASS实现响应式布局的解决方案(Simple Technique for using Sass for Rows)。列间空隙的处理，每行的最后一列没有空隙，前面的其他列具有统一的空隙，水平和垂直方向的空隙相等。每列宽度采用百分比的形式进行计算，每列宽度=(总宽度-空隙总宽度)/列数=(总宽度-(列数-1)*空隙宽度)/列数。

前期曾经给大家介绍过一个使用google font的mixin（详见《Google Fonts Sass Mixin》），今天我们再进一步给大家推荐个使用web font的mixin。

在SASS官方文档的基础上，加上了自己的解读和相关优秀资源推荐，欢迎大家拍砖！点保存点成了发表，请大家见谅！继续写作中。

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

好久没有更新的CSS3演武场系列，半年前搁浅的一篇文章赋予新年新气象闪亮登场了，研究一下利用css（sass）实现粒子效果，主要使用box-shadow生成粒子，利用css3 animation和translateZ实现动画。

本博之前曾经写过两篇博文《纯css3文字效果推荐》、《css3立体文字最佳实践》得到了大家的广泛关注，今天我们更进一步，研究一下文字菜单上可以做哪些动画，15种效果会不会有您喜欢的，来来来，不妨进来坐坐。

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

今天我们看一个Sass实现颜色卡动画，继续学习sass的使用，效果见下图所示。在线研究点这里，下载收藏点这里。同时也请大家发表高见，迎接鼓励，欢迎拍砖。

好的，SASS实现的圆形动画菜单，主要用到了sass中的@for、@if，compass中sin、cos的使用，hsl颜色的使用。

今天研究一个利用text-shadow和:after伪对象做成的苹果风格的下划线效果。

CSS垂直居中对齐，LESS简化书写。

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

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

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

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

今天来看一个使用hover触发的一个手风琴效果，鼠标hover时改变图像宽度，配合transition实现动画，效果如下图所示。大家也可以到我的codepen在线编辑、下载收藏。

OK，CSS3演武场今天继续，我们重点来看看css3 animation实现逐帧动画，额，按照惯例，看效果点这里，下载戳这里。实现原理a.外盒子div.cell，一个字的宽和高，超过不显示，确保只能显示一个字。b.内盒子div.num,一个字的宽，行高一个字高，我们通过这个盒子的移动实现动画。c.内盒子的移动动画的animation-timing-function使用step。d.倒计时结束，外盒子动画消失掉。

今天来看一个纯CSS实现的图像3D效果，用div.img装载图像的上半段，.img:fefore伪类来实现图像的下半段、呈现图像标题，用.img:after伪类实现图像的阴影。

纯CSS实现的Loading效果，CSS3试验场重点实验CSS3的动画属性。大家可以到我的codepen看看效果。

作为一种优雅酷炫的页面展示的方式，视差滚动（Parallax Scrolling）正受到越来越多前端设计师的宠爱，优设的2014年网页设计趋势中依然能够看到它的影子，所以我们不得不来好好研究下视差滚动的原理和实现方式。

css演武场今日继续，来看一个纯css实现的回旋动画。在线研究点这里，下载收藏点这里。重点关注1. haml简化html，实现效果架构2.sass的使用3.compass类库的使用haml文件- @n = 25.container - @n.times do .thing编译成html之后

CSS演武场今天继续，今天看一个纯css实现的3D图像轮转效果，请大家猛戳研究效果先，也可下载收藏先。

这两天在研究flexbox，来看一个Flexbox实现的响应式菜单。

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