原文：http://glenmaddern.com/articles/css-modules如果你想知道 CSS 最近发展的转折点，你应该选择去观看Christopher Chedeau在2014年11月的NationJS大会上做的名称为CSS in JS的分享。不得不说这是一个技术分水岭的时刻，一群不同的思维在自己的方向上就像粒子进入了高能漩涡中一样飞速发展。其中，在 React 或者是 React 相关的项目中编写 CSS 样式，React Style,jxstyle和Radium这三个算是最新的，最好的以及最具有可行性的方法。如果说“发明”是探索最接近的可能的一个实例（译者注：最接近的可能是Steven Johnson于 2010 年提出来的一个概念），那么 Christopher 则是让许许多多的可能变得更加接近（译者注：上面三个工具中的两个灵感都是来自他的分享）。上图列出的这些都是在许多大型 CSS 代码库中存在的问题。Christopher 指出，只要将你的样式通过用 JS 去管理，这些问题都能很好的解决。不得不说这的确是有道理的，但是这种方法有它的复杂性并会带来其他的相关问题。其实只要看看浏览器是如何处理:hover伪类状态的，我们就会发现有些东西在 CSS 中其实很早就解决了。CSS 模块小组觉得我们可以更加合理的解决问题：我们可以继续保持 CSS 现在的样子，并在 ...继续阅读 (13)

原文：http://glenmaddern.com/articles/css-modules如果你想知道 CSS 最近发展的转折点，你应该选择去观看Christopher Chedeau在2014年11月的NationJS大会上做的名称为CSS in JS的分享。不得不说这是一个技术分水岭的时刻，一群不同的思维在自己的方向上就像粒子进入了高能漩涡中一样飞速发展。其中，在 React 或者是 React 相关的项目中编写 CSS 样式，React Style,jxstyle和Radium这三个算是最新的，最好的以及最具有可行性的方法。如果说“发明”是探索最接近的可能的一个实例（译者注：最接近的可能是Steven Johnson于 2010 年提出来的一个概念），那么 Christopher 则是让许许多多的可能变得更加接近（译者注：上面三个工具中的两个灵感都是来自他的分享）。上图列出的这些都是在许多大型 CSS 代码库中存在的问题。Christopher 指出，只要将你的样式通过用 JS 去管理，这些问题都能很好的解决。不得不说这的确是有道理的，但是这种方法有它的复杂性并会带来其他的相关问题。其实只要看看浏览器是如何处理:hover伪类状态的，我们就会发现有些东西在 CSS 中其实很早就解决了。CSS 模块小组觉得我们可以更加合理的解决问题：我们可以继续保持 CSS 现在的样子，并在 ...继续阅读 (19)

本文介绍一个文字聚合、散出效果的动画效果，先看demodemo借鉴了智能社首页图片轮播效果。接下来介绍聚合、散出效果的实现方法。首先定义一个容器元素然后，将这个容器的宽高划分成数块。var oDiv = document.getElementByClassName('ctn')[0]; var C=4; //划分的列数 var R=8; //划分的行数 //容器的中心点X坐标（相对于容器的左上角） var divCX=oDiv.offsetWidth/2; //容器的中心点Y坐标（相对于容器的左上角） var divCY=oDiv.offsetHeight/2;接下来在容器内生成C * R 个 div。for(var i=0;i并给 oNewDiv 设置初始状态：left、 top、 背景位置、transform值var w=Math.floor(oDiv.offsetWidth/C); //小块的宽度 var h=Math.floor(oDiv.offsetHeight/R); //小块的高度 var offsetLeft = j*w; //新元素的left值 var offsetTop = i*h; //新元素的top值 var l=offsetLeft+w/2; // 新元素的中心 ...继续阅读 (20)

本文介绍一个文字聚合、散出效果的动画效果，先看demoChinese tea cups,wholesale Chinese tea cupsdemo借鉴了智能社首页图片轮播效果。接下来介绍聚合、散出效果的实现方法。首先定义一个容器元素<div class="ctn"></div>然后，将这个容器的宽高划分成数块。var oDiv = document.getElementByClassName('ctn')[0]; var C=4; //划分的列数 var R=8; //划分的行数 //容器的中心点X坐标（相对于容器的左上角） var divCX=oDiv.offsetWidth/2; //容器的中心点Y坐标（相对于容器的左上角） var divCY=oDiv.offsetHeight/2;接下来在容器内生成C * R 个 div。for(var i=0;i<R;i++) { for(var j=0;j<C;j++) { var oNewDiv=document.createElement('div'); //接下来给 oNewDiv 设置初始状态 ... ...继续阅读 (10)

原文:What is AMD CommonJS and UMD简介最近几年，我们可以选择的Javascript组件的生态系统一直在稳步增长。虽然陡增的选择范围是极好的，但当组件混合匹配使用时就会出现很尴尬的局面。开发新手们会很快发现不是所有组件都能彼此“和平相处”。为了解决这个问题，两种竞争关系的模块规范AMD和CommonJS问世了，它们允许开发者遵照一种约定的沙箱化和模块化的方式来写代码，这样就能避免“污染生态系统”。AMD随着RequireJS成为最流行的实现方式，异步模块规范（AMD）在前端界已经被广泛认同。下面是只依赖jquery的模块foo的代码：// 文件名: foo.js define(['jquery'], function ($) { // 方法 function myFunc(){}; // 暴露公共方法 return myFunc; });还有稍微复杂点的例子，下面的代码依赖了多个组件并且暴露多个方法:// 文件名: foo.js define(['jquery', 'underscore'], function ($, _) { // 方法 function a(){}; // 私有方法，因为没 ...继续阅读 (20)

原文:What is AMD CommonJS and UMD简介最近几年，我们可以选择的Javascript组件的生态系统一直在稳步增长。虽然陡增的选择范围是极好的，但当组件混合匹配使用时就会出现很尴尬的局面。开发新手们会很快发现不是所有组件都能彼此“和平相处”。为了解决这个问题，两种竞争关系的模块规范AMD和CommonJS问世了，它们允许开发者遵照一种约定的沙箱化和模块化的方式来写代码，这样就能避免“污染生态系统”。AMD随着RequireJS成为最流行的实现方式，异步模块规范（AMD）在前端界已经被广泛认同。下面是只依赖jquery的模块foo的代码：// 文件名: foo.js define(['jquery'], function ($) { // 方法 function myFunc(){}; // 暴露公共方法 return myFunc; });还有稍微复杂点的例子，下面的代码依赖了多个组件并且暴露多个方法:// 文件名: foo.js define(['jquery', 'underscore'], function ($, _) { // 方法 function a(){}; // 私有方法，因为没 ...继续阅读 (9)

今天给大家介绍一个运用CSS3实现的Hover动画特效效果预览：[示例演示]类似这样的特效可以应用在图片展示的场景，例如图片墙，相册等，从而提高用户体验让我们的网站变得高大上。下面我们通过一段视频来了解下这样的效果是如何实现的。教学视频：相信大家通过视频已经了解到这个效果是如何实现的了，是不是很简单？下面为大家总结一下这个特效涉及到的知识点，以便大家系统的学习：1.定位问题position规定元素的定位类型absolute： 绝对定位（相对于static 定位以外的第一个父元素定位）fixed：绝对定位（相对于浏览器窗口定位）relative：相对定位（相对于其正常位置定位）static：默认值（无定位）inherit 从父元素继承2.rgba设置颜色语法：rgba(R,G,B,A)R：红色值。正整数 | 百分数G：绿色值。正整数 | 百分数B：蓝色值。正整数| 百分数A：透明度。取值0~1之间rgba可用于设置背景色，字体颜色，边框颜色等,可设置颜色的地方。rgba透明度与opacity的区别：这里主要应用透明度的属性，虽然平时我们也可以使用opacity来设置透明度，但是这两个是有很大差别的。opacity是给元素设置透明度，其子元素也同样会有透明度。使用场景举例：我们经常会遇到一种场景就是背景是半透明的，但是上面的文字不是透明的。以前我们的实现方式大概是利用绝对定位，一层半透 ...继续阅读 (15)

今天给大家介绍一个运用CSS3实现的Hover动画特效效果预览：[示例演示]类似这样的特效可以应用在图片展示的场景，例如图片墙，相册等，从而提高用户体验让我们的网站变得高大上。下面我们通过一段视频来了解下这样的效果是如何实现的。教学视频：相信大家通过视频已经了解到这个效果是如何实现的了，是不是很简单？下面为大家总结一下这个特效涉及到的知识点，以便大家系统的学习：1.定位问题position规定元素的定位类型absolute： 绝对定位（相对于static 定位以外的第一个父元素定位）fixed：绝对定位（相对于浏览器窗口定位）relative：相对定位（相对于其正常位置定位）static：默认值（无定位）inherit 从父元素继承2.rgba设置颜色语法：rgba(R,G,B,A)R：红色值。正整数 | 百分数G：绿色值。正整数 | 百分数B：蓝色值。正整数| 百分数A：透明度。取值0~1之间rgba可用于设置背景色，字体颜色，边框颜色等,可设置颜色的地方。rgba透明度与opacity的区别：这里主要应用透明度的属性，虽然平时我们也可以使用opacity来设置透明度，但是这两个是有很大差别的。opacity是给元素设置透明度，其子元素也同样会有透明度。使用场景举例：我们经常会遇到一种场景就是背景是半透明的，但是上面的文字不是透明的。以前我们的实现方式大概是利用绝对定位，一层半透 ...继续阅读 (15)

嗨，大家好。今天和大家聊一下如何使用 CSS3 和 JS 实现径向动画菜单的效果。效果预览：讲解视频：效果源码：http://codepen.io/anjia/pen/qEyXNR扩展练习源码：http://codepen.io/anjia/pen/JoByoK效果知识点：http://anjia.github.io/2015/02/02/code_point_circleMenu/ ...继续阅读 (19)

嗨，大家好。今天和大家聊一下如何使用 CSS3 和 JS 实现径向动画菜单的效果。效果预览：讲解视频：效果源码：http://codepen.io/anjia/pen/qEyXNR扩展练习源码：http://codepen.io/anjia/pen/JoByoK效果知识点：http://anjia.github.io/2015/02/02/code_point_circleMenu/ ...继续阅读 (9)

Hello，大家好，今天跟大家聊一下，如何使用css3动画属性来实现惊艳的动画效果。CSS想必大家都用过，那么你可知道使用CSS还可以实现一些有意思的动画效果？今天就请大家随着我们的课程，一起去领略一番吧！属性一 transition [示例演示]属性二 animation [示例演示，animation动效库]属性三 transform [示例演示]技巧一 animation-delay设置成负值 [示例演示，练习操作]技巧二 设置border颜色 [示例演示，练习操作]技巧三 设置border宽度 [示例演示，练习操作]技巧四 正圆运动 [示例演示]技巧五 椭圆运动 [示例演示]技巧六 弧形运动 [示例演示]相关资料：transition使用细节：https://developer.mozilla.org/zh-CN/docs/CSS/Tutorials/Using_CSS_transitionsanimation使用细节：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_animations2d变换：http://www.w3cschool.cc/css3/css3-2dtransforms.html3d变换：http://www.w3cschool.cc/css3/css3-3dtransfor ...继续阅读 (12)

Hello，大家好，今天跟大家聊一下，如何使用css3动画属性来实现惊艳的动画效果。CSS想必大家都用过，那么你可知道使用CSS还可以实现一些有意思的动画效果？今天就请大家随着我们的课程，一起去领略一番吧！属性一 transition [示例演示]属性二 animation [示例演示，animation动效库]属性三 transform [示例演示]技巧一 animation-delay设置成负值 [示例演示，练习操作]技巧二 设置border颜色 [示例演示，练习操作]技巧三 设置border宽度 [示例演示，练习操作]技巧四 正圆运动 [示例演示]技巧五 椭圆运动 [示例演示]技巧六 弧形运动 [示例演示]相关资料：transition使用细节：https://developer.mozilla.org/zh-CN/docs/CSS/Tutorials/Using_CSS_transitionsanimation使用细节：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_animations2d变换：http://www.w3cschool.cc/css3/css3-2dtransforms.html3d变换：http://www.w3cschool.cc/css3/css3-3dtransfor ...继续阅读 (7)

在2015年到来之即，奇舞周刊祝大家新年快乐！感谢大家对奇舞周刊的支持与关注！希望在2015年大家能够继续支持我们，有什么意见和建议可以随时微信告诉我们！扫描二维码，关注奇舞周刊微信公众号： ...继续阅读 (13)

在2015年到来之即，奇舞周刊祝大家新年快乐！感谢大家对奇舞周刊的支持与关注！希望在2015年大家能够继续支持我们，有什么意见和建议可以随时微信告诉我们！扫描二维码，关注奇舞周刊微信公众号： ...继续阅读 (13)

最近在做一个页面的时候，发现在ie8浏览器（也包括ie7）中，字体有显示发虚，甚至大小不一样的问题。经过追查，发现原来是使用透明滤镜后，对字体的渲染造成了影响。解决方法有两种：若需要使用透明滤镜，可以给使用滤镜的元素加一个背景色。效果如下，不过字体还是有一些发虚。当然，最根本的方法还是避免使用滤镜了。原文参见：http://www.cnblogs.com/snadn/p/3530968.htmlletting the color of the bottom layer show throughcartola fcFashion Duos in the 1980s2 cup bread crumbs to the mixture to tightenpornoHow do people qualify for a home equity line of credit ...继续阅读 (27)

最近在做一个页面的时候，发现在ie8浏览器（也包括ie7）中，字体有显示发虚，甚至大小不一样的问题。经过追查，发现原来是使用透明滤镜后，对字体的渲染造成了影响。解决方法有两种：若需要使用透明滤镜，可以给使用滤镜的元素加一个背景色。效果如下，不过字体还是有一些发虚。当然，最根本的方法还是避免使用滤镜了。原文参见：http://www.cnblogs.com/snadn/p/3530968.htmlletting the color of the bottom layer show throughcartola fcFashion Duos in the 1980s2 cup bread crumbs to the mixture to tightenpornoHow do people qualify for a home equity line of credit ...继续阅读 (28)

原文：Node.js and MongoDB – Getting started with MongoJS在过去几个月里，毫不夸张的说，Node.js和MongoDB在软件和web行业简直大为轰动。不仅仅是前沿创业公司，大中型企业也通过利用大容量，可持久和可扩展app来促使这两个技术给用户带来更好的体验。Node.js是什么？Node.js是一个建立在Chrome的JavaScript运行环境的平台，为了更方便，更快捷地建立可扩展的网络应用。Node.js利用事件驱动，非阻塞式I/O模型使它更为轻量和高效，对于运行在分布式设备上数据密集型和实时应用表现完美。MongoDB是什么？MongoDB是一个可扩展，高性能，开源的非关系型数据库。本篇文章将要涵盖一些基础以及使你从Node.js和MongoDB应用开始。首先确定你的开发机上已经装了Node.js和MongoDB。让我们测试你的Node.js是否安装，并开启MongoDB服务器。$ node -v $ mongodMongoJS介绍MongoJS是一个出色小巧的Node.js包，利用一个API来访问MongoDB，与JavaScript shell非常相似。MongoJS安装一旦Node.js已经在你机器上正确安装，你就能利用它内部的包管理器NPM来安装MongoJS：$ npm install mongojs现在我 ...继续阅读 (19)

原文：Node.js and MongoDB – Getting started with MongoJS在过去几个月里，毫不夸张的说，Node.js和MongoDB在软件和web行业简直大为轰动。不仅仅是前沿创业公司，大中型企业也通过利用大容量，可持久和可扩展app来促使这两个技术给用户带来更好的体验。Node.js是什么？Node.js是一个建立在Chrome的JavaScript运行环境的平台，为了更方便，更快捷地建立可扩展的网络应用。Node.js利用事件驱动，非阻塞式I/O模型使它更为轻量和高效，对于运行在分布式设备上数据密集型和实时应用表现完美。MongoDB是什么？MongoDB是一个可扩展，高性能，开源的非关系型数据库。本篇文章将要涵盖一些基础以及使你从Node.js和MongoDB应用开始。首先确定你的开发机上已经装了Node.js和MongoDB。让我们测试你的Node.js是否安装，并开启MongoDB服务器。$ node -v $ mongodMongoJS介绍MongoJS是一个出色小巧的Node.js包，利用一个API来访问MongoDB，与JavaScript shell非常相似。MongoJS安装一旦Node.js已经在你机器上正确安装，你就能利用它内部的包管理器NPM来安装MongoJS：$ npm install mongojs现在我 ...继续阅读 (7)

BFC已经是一个耳听熟闻的词语了，网上有许多关于BFC的文章，介绍了如何触发BFC， 以及BFC的一些用处（如清浮动，防止margin重叠等）。虽然我知道如何利用BFC解决这些问题，但别人问我为什么，我只能说：“它就那样”。这两天看了看CSS2.1标准文档和一些文章，来对BFC进行了更全面的理解。想要了解BFC神奇背后的原理的小伙伴，请戳这篇文章1950s a stack of clothing pertaining topornoThe next undiscovered fashion capitalA focus was on cutouts at the waist with eye catching gatherssnooki weight lossMila Kunis Called Worst Dressed by ...继续阅读 (37)

BFC已经是一个耳听熟闻的词语了，网上有许多关于BFC的文章，介绍了如何触发BFC， 以及BFC的一些用处（如清浮动，防止margin重叠等）。虽然我知道如何利用BFC解决这些问题，但别人问我为什么，我只能说：“它就那样”。这两天看了看CSS2.1标准文档和一些文章，来对BFC进行了更全面的理解。想要了解BFC神奇背后的原理的小伙伴，请戳这篇文章1950s a stack of clothing pertaining topornoThe next undiscovered fashion capitalA focus was on cutouts at the waist with eye catching gatherssnooki weight lossMila Kunis Called Worst Dressed by ...继续阅读 (18)

适用场景当屏幕分辨率为320X500时模块标题效果如下：当屏幕分辨率为480X500时模块标题效果如下：也就是当屏幕分辨率大时显示的文字多，分辨率小时显示文字少，同时需要保证这一部分始终完全显示。实现方式方案一：DEMO来自@蒋轩哲为整个容器和标题文字容器添加 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;  保证内容在一行内显示。效果如下，我们需要显示的网站标识同时也被省略掉了，这时我们接着改进为标题文字容器添加 display:inline-block;max-width:100%;设置容器最大宽度为100%，这时我们发现网站标识被挤到了下面为网站标识容器添加 display:inline-block;margin-left:-6em; 通过设置负margin让我们网站标识可以出显示在标题行里为标题文字容器接着添加 padding-right:6em;box-sizing:border-box; 通过设置box-sizing属性值为border-box，把padding-right值占用的位置计算到了标题文字容器里，注意：padding-right的值正好是网站标识容器margin-left的调整的值。调整完后的效果如下：最后我们调整一下标题文字容器和网站标识容器的垂直对齐方式让它们垂直居中对齐方案二：DEM ...继续阅读 (16)