whqet

在B站开始更新《前端开发轻松上手》系列视频，依据HTML、CSS、Javascript的路径，轻松上手前端开发，通过案例的方式巩固前端开发基础知识！敬请三连！详情请戳《前端开发轻松上手》！

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

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

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

前面我们曾经用两篇文章《纯CSS3文字效果推荐》、《CSS3立体文字最佳实践》给大家介绍过利用CSS3 text-shaodwo实现阴影文字、立体文字效果，但是纯css3实现的方式也有局限性，比如大量应用时会延缓页面加载速度，效果的可控制性不强，今天给大家推荐一个js插件来弥补这些缺失，隆重推出shine.js。

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

来继续看一个响应式表格，重点学习媒体查询，智能手机中将表头隐藏，利用:before伪对象伪造表头，效果见如下图所示。

制作这个案例前，需要准备这些。1.掌握scss的使用，当然不用也可以，使用scss会比较高效。2.掌握利用css3的box-shadow、border、border-radius的实现绘图。3.掌握css3的动画方法。4.一些耐心、一些创意（创意可以让你更好）5.学会解析案例，先看静态图。

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

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

关于Font Icon的教程How to Use Icon Font?@font-face@font-face制作Web Icon Icon font 实践如何把你的图标转换成web字体Font Icon的资源30 Free Icon Font SetsAbsolutely Free Icon Fonts20 @fontface Icon S

转载自财付通设计中心bboy90大作0《》

周末快乐哈，今天来看一个纯CSS3实现的3d翻转菜单，3d响应式菜单，希望对大家有所帮助。

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

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

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

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

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

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

好吧，来看一个html5的video元素的应用，实现简单控制。到这里观看效果，到这里在线研究，或者下载收藏, 视频加载可能有点慢，请耐心等等。

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

本文从《[How to animate "box-shadow" with silky smooth performance](http://tobiasahlin.com/blog/how-to-animate-box-shadow/)》编译而来，英文没问题的同学，看原文找原味。

今天来一起了解一个实现SVG路径描边绘制与动画的轻量级类库[segment](https://github.com/lmgonzalves/segment)，我们从轻松上手、使用详解、资源和案例、源码解读等几个方面进行介绍。

resize属性是[CSS3 UI](http://www.w3.org/TR/css3-ui/)中的一个属性，允许用户调整元素的尺寸。今天通过一个图像对比案例来简要学习下。

来看下CSS标布局情况下，定位相关属性之间的相互作用。

翻译自Github，提高您CSS开发能力的技巧集，希望对大家有所帮助。

CSSgram是一个简单易用的CSS库，组合CSS Filter和CSS Blend Modes实现的Instagram风格的图片滤镜，通过在图片上叠加颜色或渐变模拟实现滤镜，可以节省大量的图片处理时间，增加线上“玩弄”图片的乐趣。

normalize.css我们知道normalize.css可以让浏览器以接近标准的方式一致地渲染所有元素，而且不同于cssrest，只针对需要正常化的元素。它的官方网站为normalize.css，最新版本为8.0。浏览器支持ChromeEdgeFirefox ESR+Internet Explorer 10+Safari 8+Opera源码分析...

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

原文：scotch.io的A Visual Guide to CSS3 Flexbox Properties 译者：前端开发whqet，意译为主不当之处，欢迎指正！ 译言：希望可以通过可视化的方式帮助您了解Flexbox属性如何影响flex布局。大家可以到原文demo那里先一睹为快,注意，需翻墙浏览（因为原文调用google api插件），我们提供了另外的在线实验平台，或者你也可以到github关注、下载。

引言今天来看一组表单标签动画效果，希望可以对大家有所帮助，灵感来自于Inspiration for Text Input和Text Input Love，一并致谢。 15种效果等着您来赏识，不妨近来一坐。

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

程序媛and程序猿，兄弟姐妹们，大家周末好，我们今天来研读一下利用纯css实现段落文字的彩条效果。有朋友就说了，不就是css3的渐变吗，最多加上webkit内核的-webkit-background-clip，嗯，远不止哟，进来一坐了解详情……

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

CSS很美妙，能够为您的页面穿上衣裳，各种各样五彩斑斓的衣裳，但是对于开发者来说，它又不够灵动，于是乎有了各种各样的预处理器Sass、LESS、Stylus，这些预处理器可以很大程度的提高CSS的灵活性，增强CSS的代码组织与维护。但是毕竟不是亲生的，然后负责CSS开发的那些大牛们坐不住了，开始给CSS赋予一些新的特性，本文就来探讨下CSS变量的进展与应用。

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

引言为了激发广大童鞋的学习积极性，让我们的学习更加贴近未来工作需求，便于记录学习过程、总结学习收获、广交朋友，我们在优快云上开通课程主页，希望大家可以通过优快云这样的学习平台，更好地提升自我。

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

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

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