100个惊人的CSS、JS代码技术
- - 设计达人最近在Codepen看到Top Pens of 2013这个专题，专题内容为2013年上最优秀的前100个CSS、HTML5和Javascript Pens，在惊叹技术人员的创造力同时我们还能学习这些技术，对交互设计师而言还能获取灵感哦. Top Pens of 2013专题地址： http://codepen.io/2013/popular.
100个惊人的CSS、JS代码技术
标签：
HTML
&
CSS
CSS3
HTML5
| 发表时间：2014-01-20 17:09 | 作者：设计 达人
出处：http://www.shejidaren.com
最近在Codepen看到Top Pens of 2013这个专题，专题内容为2013年上最优秀的前100个CSS、HTML5和Javascript Pens，在惊叹技术人员的创造力同时我们还能学习这些技术，对交互设计师而言还能获取灵感哦！
Top Pens of 2013专题地址： http://codepen.io/2013/popular
这里我们选出排名前10名的Pens，无论是前端人员还是设计师，我觉得还是值得一看的。PS:在浏览这些技术记得使用兼容CSS3/ HTML5的浏览器哦，否则有些效果你看不出来。
TOP 10: CSS 绝对居中（水平垂直居中）
一个CSS居中的新写法，这个我觉得比较实用，因为兼容IE8呢，IE6就不说了，一边去吧。
TOP 9: 跟随移动鼠标HOVER特效
这个中文有点难解释，大家自己看案例才知道是什么效果…挺新鲜的效果。
TOP 8: 拟实化倒计时实例
这个倒计时设计图出来的时候，第一眼就很喜欢了，现在代码版了，些DEMO由CSS+JS写的。
TOP 7: CSS 3D效果
这个在实际项目中没什么有，但可以用来学习研究，看看能否在其它项目上使用。
TOP 6: CSS+jQuery实现WIN8风格的效果切换
效果确实真的不错，动画也流畅，如果用在个人博客还是挺个性化的。
TOP 5: 创意CSS菜单
这个CSS写的菜单真的很有创新，点击后会以动画形式改变成形状的图标，NICE!
TOP 4: 拟实化CSS按钮
使用 CSS3编写，效果不错。
TOP 3: 创新CSS按钮
鼠标移到按钮上的打开面板效果很不错，带3D感，还有阴影啊，做得真细节。
TOP 2: 触摸设备菜单概念设计
设计可爱，动画效果也很棒，赞！
TOP 1: Tearable Cloth
十分强大的js技术特效，PS: 用右键可以把网切开哦！
Copyright ©2010-2013 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
相关 [css js 代码] 推荐：
在线调试并共享HTML,CSS,JS
- Albert - [米随随] s5s5如题，以后同人讲代码时可以用到. 2004年04月9日 -- MSN中文专业站 (0). 2006年06月5日 -- 读“疲倦的博客们”有感 (9). 2005年07月20日 -- 基于web2.0的网站创意 (33).
[html/css/js]搜索建议提示
- - CSDN博客推荐文章// 根据id获取dom元素. // 将label绑定到input上作为输入提示. // 获取输入焦点时，隐藏提示标签. // 失去输入焦点时，判断输入框的是否有值，有则显示提示标签. // 窗口加载完dom结构时. .
js和css的顺序关系
- - Kejun's Bloghead里的顺序如下，考虑会对请求有何影响：. a,b – head里出现外联js，无论如何放，css文件都不能和body里的请求并行 （图1）. c – head里的内联js只要在所有外联css前面，css文件可以和body里的请求并行（图2）. d – head里的内联js只要在任一外联css后面，css文件就不能和body里的请求并行（图1）.
ajax核心js代码
- - ITeye博客 //针对firefox,mozillar,opera,safari,IE7,IE8. //针对某些特定版本的mozillar浏览器的bug进行修正. //针对IE6,IE5.5,IE5.
用javascript预加载图片、css、js的方法研究
- - 博客园_Ruby's Louvre预加载的好处可以让网页更快的呈现给用户，缺点就是可能会增加无用的请求（但图片、css、js这些静态文件可以被缓存），如果用户访问的页面里面的 css、js、图片被预加载了，用户打开页面的速度会快很多，提升用户体验. 在用到一些大图片展示的时候，预加载大图是很不错的方法，图片更快的被呈现给用户. 不多说了，作为一个前端攻城师都懂的，下面分享我做的测试和得到的结果.
收集免费的HTML/CSS/JS UI工具包
- - Jackchen Design 1984随着HTML5和CSS3以及网页设计布局的全面翻新创新改革. 让很多网页设计者和界面设计师都知道一个道理. 这不仅仅是未来提高工作的效率，还能更好的去处理网页整体视觉效果. 优秀的工具包可以让您的工作事半功倍是肯定. 重要的是可以让流程更加清晰快速的呈现出来. 所以对于很多好的网站（比如Facebook，twitter，YaHOO等）你看第一眼就能知道他们所属的风格指向.
Ratchet：使用 HTML，JS，CSS 创建 iPhone App 原型
- - 我爱水煮鱼Ratchet 是一个免费的开源的工具，它主要的功能就是可以使用最简单的 HTML，CSS，JavaScript 这些 Web 技术就能很容易创建 iPhone 应用原型. Ratchet 使用非常简单，只需要简单的几行代码就能创建绝大部分 iOS 的组件，如：Bars, Lists, Buttons, Segmented controllers, Counts, Forms, Toggles, Popovers, Sliders, Push 等等.
支付宝下拉菜单JS代码
- - 网页素材大全_网页素材大全支付宝下拉菜单JS代码是一款来自支付宝首页的JS下拉菜单特效代码. jQuery火箭图标返回顶部代码. JS淘宝网产品图片局部放大代码. 文字阴影插件shine.js.
CSSでカーニング（文字詰め）等を可能にするJSライブラリ・kerning.js
- 三十不归 - かちびと.netゆっくり過ごす方も多そうですね. さて、休みですし、ちょっとネタ的. をCSSで出来るようにしたJSライブラ. jQueryやmootoolsなどにも依存していないようです. これだけ聞くとかなり使えそうなんですけど. でも個人的にこういうチャレンジは称えたいので敬意を示すつもりで記事にします. CSSで出来る、と言っても独自の記述法を加える事でテキストコンテンツでのカーニングを実現するタイプなので好みが分かれそうですね.