在前端开发中我们经常会输入相同的一些基本代码，例如常用的jquery引用，bootstrap框架，cssreset等等，如果每次使用时在复制粘贴感觉很麻烦，这里介绍一种更为简洁的方法 利用sublime的snippet功能快速创建代码段 打开Tools->New snippet我们能看到如图所示内容 要是没有一点英语基础，就有点抓瞎了，今天就来介绍一下如何使用这超级功能 首先简要介绍一下snippet的组成部分: content:其中必须包含,否则无法工...
在过去我们的文章中，我们介绍过很多不错的时间轴插件，使用这些超棒的插件可以帮助你创建动感漂亮的时间轴展示，其中比较不错的插件如下： Timeline Timelinr TimergliderJS Chronoline 使用以上jQuery插件或者类库都可以创建漂亮的时间轴timline特效。 由于在我们的gbtags.com社区开发中，我们需要创建一个简单实用的用户时间轴应用，这里我们选择使用Timelinr来开发，并且为了使得动画过程更加丰富和有趣我...
第一步 新建一个宽80PX 高10PX的文档 第二步 做8个宽8PX的方格 黄色色值#e7a521 红色色值#ff0000（可根据自己的喜好设定） 第三步 复制7个层（共8个图层）每个图层相应改变红色框的位置 第四步 打开窗口>>时间轴创建帧动画 第五步 点击新建按钮，新建8个针，时间改为0.1秒 第六步 点击时间轴第一个然后让图层1显示，其他图层隐藏，点击时间轴...
这是一篇关于如何使用不同的技术（包括CSS和SVG），为文本创建各种不同类型的（动态）填充和描边的教程。 查看DEMO 下载源码 我想，未来已经在这里。我们在CSS和SVG已经有这么多令人兴奋的可能性，这些我们以前都只能是想想而已。例如，我们现在有很多方法可以用来创建包含动态填充的文本。 大约在一年前， Sara Soueidan 写的一篇关于 创建纹理文本技术 的文章，在Codrops上发表了。这篇精彩的文章将告诉你所有关于创...
@ChloeRowe林雅诺：这个教程用了AI+PS，我们先在AI里绘制出主体图形，然后在PS里对图形进行处理，难度就在高光与阴影的绘制，适合有PS基础的童鞋进阶练手，周末别偷懒，来练一发。 教程素材下载： http://pan.baidu.com/s/1c0N8w5E 效果图： 步骤1 在AI里制作线框，使用矩形工具画一个长方形。 步骤2 选择左上角，然后把它拖使用钢笔工具，将它转换为一个圆角。 步骤3 在左下角重复相同...
脚手架 脚手架并不是一个新想法，但很多人（包括我自己）都是通过Ruby才接触到这个概念的。这个想法很简单：大多数项目都需要一定数量的“套路化”代码，谁会想每次开始新项目时都重新写一次这些代码呢？对此有个简单的方法，那就是创建一个通用的项目骨架，每次开始新项目时，只需复制这个骨架，或者说是模板。 RoR把这个概念向前推进了一步，它提供了一个可以自动生成脚手架的程序。相对于从一堆模板中作出选择，这种方式...
告诉大家一个秘密, 自从有了 SASS 之后, 我们可以有两种方式来使用 css,我管它们叫做 类库式 和 框架式 。 这里我以 foundation 这个 scss 框架为例, 它和我们熟悉的 bootstrap 类似,只不过 bootstrap 使用 less 写的 (bootstrap 3 也改为 SASS 了, foundation 是由 sass 写的。foundation 是一个对 developer 友好的前端框架, 如果说 bootstrap 是一个 ui 库的话, foundation 更偏重于成为一个工具。 如果你对 foundation 不熟...
我们可以使用SVG、Canvas、CSS3或者背景图片来实现五角星图案及其悬停效果。CSS3引入的伪元素和变换特性使得实现五角星图形非常简单，并且可以结合渐变实现更为漂亮的效果。 因此使用图片实现五角星已经毫无必要（图片占用额外的请求，且数据量大。除非要支持低版本的桌面IE浏览器）。 首先我们创建一个三角形，这通常是使用带大尺寸边线而零内容尺寸的元素来实现，代码示范： .tri { width: 0; height: 0; b...
CSS动画是非常有意思的，用一些简单的属性就可以创建出来，从优雅的淡入到更加惊艳的效果都可以，翻页效果就是其中之一，它通过在容器的正面跟反面包含不同的内容来加以实现。本文就是用尽可能简单的方法来实现这种效果。 卡片翻转效果 查看演示 注：本文不是第一篇讲述这种效果怎么做的文章，但是我发现很多将这个的文章都过于复杂，添加了很多额外的样式代码到案例里面，让读者搞不清那些代码是...
简述 在前面，我们分享过关于三角的实现方式，主要根据border属性来设置，下面我们来实现上、下、左、右各种不同颜色的三角。 简述 实现 效果 源码 实现 效果 源码 /* 上三角 */.arrow-up { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid green;}/* 下三角 */.arrow-down { ...
纺锤形分割线用于仿真纸中间被剪开时的阴影效果，也就是中间咧开而两边收拢的情况。 简单讲就是两头小，中间大。如下所示（请忽略中间的wow图标）： 使用CSS3来实现这种效果，可以使用border-radius和box-shadow两个属性。 首先我们需要一个DIV来容纳分割线。 接下来我们利用class=mask的div来生成框阴影： box-shadow: 0 0 8px black; 对照box-shadow的语法： 这条语句表示模糊距离为8px，颜色为黑的...
无标题文档 个人资料： * 为必填项 * 验 证 码： ←点击更换 * 手机号码： 最多11个字符，例如：13812345678 * 电子信箱： 此邮箱将被用来确认你的身份。 * 设定密码： 长度必须在6-20个字符之间 * 重复密码： * 姓 名： 请输入真实姓名，最多10个字符 * 昵 称： 最多30个字符 ...
你见过新版的Apple TV视差效果么?非常棒，我们用CSS和jQuery来实现它，尽量看起来和原效果一样。 最终效果图 本教程里，我将使用CSS,HTML和jQuery来创建一个近似Apple TV视差效果，如果你正在阅读，我假设你对上述三种技术都有基本的了解。 废话不多说，开始第一部分。 HTML页面 我们的页面结构像下面这样： 首先，需要一个样式类为 .poster 的 div ，在这个 div 里包含5个其他...
现如今在Web前端领域，BootStrap是一个最流行的UI库，其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式。 追究Bootstrap的内在原理，其实就是通过媒体查询来完成对不同屏幕大小、不同分辨率、不同设备导致的不同场景下的Css样式的选择。今天我就对媒体查询这一工具或者说方法来进行一个总结。 从 CSS 版本 2 开始，就可以通过媒体类型在 CSS 中获得媒体支持。 1、如何使用媒体查询： ...
1 动态创建节点 详细说明请查看点击此处查看 这是使用 jquery的第一个案例 .hh{ width: 200px; height:1 00px; padding: 10px; margin: 5px; float: left; border: 2px solid #ccc; background: #bbffaa; } 动态创建div节点 点击页面会动态创建元素节点