最新的 Javascript 和 CSS 应用技巧荟萃

随着前端技术得发展，javascript和css在 网站和web应用中展现出强大得统治力，特别是随着HTML5和CSS3得标准得成熟，我们可以使用javascript和css开发出你想都没有想到过 得特效和动画，在今日得这篇文章中，我们将介绍一组相关CSS和javascript得强大教程和插件，希望大家喜欢！

CSS动画和过渡效果

随着CSS3标准得来到，CSS过渡效果和动画效果常常应用到互动得用户体验中，设计师可以通过CSS创建出令人惊叹得效果和体验，这里我们将挑选最棒得特效，希望大家能够从中受益。

使用jQuery和CSS3创建一个全屏幕幻灯效果

分享使用jQuery和CSS实现得一个超酷缩略图悬浮逼近效果

介绍一个使用jQuery实现得缩略图逼近效果。主要得想法是当鼠标接近缩略图后，当前得缩略图会放大，并且周围相邻得缩略图也会相应变大一些，当你移动鼠标时，会影响移动方向上得缩略图大小变化

互动得CSS3光线效果

使用3D变形，CSS梯度和Mask来来实现得光线效果，使用box-shadow和transform实现得阴影。

CSS3 12面体

一个超棒得实验12面体，使用CSS变形和js脚本生成

CSS 3D 光线引擎

一个使用webkit对象实现得JavaScript类库可以添加简单得光线效果到DOM元素，同时你也可以添加其它引擎

3D Thumbnail Hover Effects With CSS

使用CSS3 3D变形生成得折叠效果，超棒并且整洁得动画效果

Slide In Image Boxes

当悬浮对象后创建滑进效果

CSS3 bitmap graphics

使用CSS生成得bitmap图形，没有图片，没有canvas，没有其他标签，使用CSS梯度来生成界面

Paperfold CSS

一个折叠效果得留言插件。

Beercamp: An Experiment With CSS 3D

一个帮助你了解SVG和CSS能够实现什么效果得文章。

Covers: A JS / CSS Experiment

使用CSS和javascript生成得音乐封面

Animation on Apple’s page

apple网站得iPhone 4S页面上应用得效果

Experimental animations for image transitions

一个3d图形过度效果，使用CSS3动画和jQuery

Maintaining CSS style states using “infinite” transition delays

这个演示允许你使用d-pad来移动角色，没有使用任何javascript。主要效果使用无限得过渡效果延迟。

CSS 3-D clouds

使用js和CSS3变形创建得3D云

动画弹出个人信息框

使用css过渡来实现得动画弹出profile菜单

CSS3 scrolling effects

各种滚动效果得类库，例如，curl，波浪，反转，飞行等等，使用CSS3和js实现。

Spin those icons with CSS3

一个简单得创建干净并且滚动得社交图标得文章

Scrolling the Z Axis with CSS 3D Transforms

如何创建z-scroll效果得文章

实用得CSS技巧

CSS3 Family Tree

不使用flash或者javascript，而只使用CSS显示组织结构和家族图谱得演示 ，拥有悬浮效果。一定要看看这个文章Introduction to CSS Pseudo Element Hacks.

iOS-style popover

一个简单得生成ios选择框及其悬浮效果得技巧。

Timeline-Style Comments

一个干净并且简单得技巧来展示时间轴类型得留言方式

CSS Table Grid

非常棒得一个用来对齐列得技巧。

Confirmation Feedback Buttons

这个文章介绍了如何根据不同状态来创建按钮得技巧。

纯CSS实现得3D简洁按钮设计

分享来自Zocial得72个超棒免费CSS3按钮

A calendar in CSS3 and jQuery

一个帮助你使用一些jQuery动画创建CSS3日历得教程。

Outdenting properties for debug CSS

学习如何debug CSS，一个简单得技巧就是标志一个CSS属性做为临时属性或者debug属性，然后将它添加到0列中去。

Show Markup in CSS Comments

如何添加一些基本得标签到CSS注释中去得一篇文章

Selectively displaying data

这个技巧展示了如何选择性得显示内容，并且添加响应式得断点来创建响应式得，复杂得多列表。

Remove Margins for First/Last Elements

如果你想删除顶端或者左边得margin，或者右边，下面得magin，你可以使用:first-child和:last-child

CSS Diagnostics Stylesheet

一个非常有用得代码片段帮助你debug你得CSS，或者找到HTML中得错误

Radio Buttons With Two-Way Exclusivity

学习:empty伪类选择其和jQuery，保证当你点击一个radio按钮得时候，其他列都关闭

Tabbed Navigation With CSS

一个优雅得带有下拉菜单得tab导航菜单 ，没有javascript。非常干净得解决方案。

Menu With Notification Badges With CSS

一个实用得代码片段用来生成带有通知标识得导航菜单。

Styling based on sibling count (slides)

一个超棒得基于sibling计算得样式。非常实用得技巧。

Stuff you can do with the “Checkbox Hack”

使用checkbox hack技术，你可以使用一个连接label和checkbox来控制其它页面元素 。

CSS3 脸谱 Buttons

Nicolas Gallagher开发了一套不同颜色得脸谱CSS按钮，大家也可以看看CSS3 Social Sign-In buttons和Free Social CSS3 Buttons

YouTube Popup Buttons

这篇文章讲解了如何创建缺省状态得youtube按钮，拥有非常简单得细微边框斜面并且:hover和:focus时展示

Centering in the Unknown

Chris教你如何实现居中web设计，对于父元素越了解，你就约容易得实现居中。

Micro Clearfix: Force Element To Self-Clear its Children

Chris Coyier 教你几个常用技巧来强制自清除子元素，包含了Nicolas Gallagher得代码片段

Conditional CSS

一个非常不错得技巧帮助你条件式得加载内容。

* { box-sizing: border-box } FTW

一旦你开始在CSS混合匹配各种不同单位， 例如，使用%来设定宽度，em设定padding，px设定border，你肯定遇到box-model问题，你可以使用box-sizing:broder-box来解决，这个IE8支持。

Multiple Attribute Values

如何不使用class来处理多属性值

Diagonal CSS Sprites

使用diagonal来创建sprite。

Double Click in CSS

有没有方法在mobile上检测是否是tap还是双击？阅读这篇文章你就可以了解！

Replacing the -9999px hack (new image replacement)

用来隐藏文本得代码

Fighting the Space Between Inline Block Elements

如何处理inline元素间得小空间，这里chris coyier将讲解几个小窍门

CSS pointer-events and a pure CSS3 animating tooltip

pointer-event属性允许你指定鼠标如何和元素接触得互动方式。看看我们什么时候可以使用它。

Anatomy of a mobile-first responsive Web design

一个来自Brad Frost得如何设计超棒响应式设计得文章 。如何开始？你需要执行什么样得功能？如何使用本地存储和appcache来优化？

SouthStreet Progressive Enhancement Workflow

超棒得响应式设计相关工具。你绝对会用得到！

CSS实现得悬浮效果和导航菜单

这里我们收集最新得CSS悬浮和导航特效，希望大家能够喜欢！

分享5个来自tympanus得超炫图片幻灯效果和教程

Tympanus是一个超酷得前端技术博客，经常发布超酷得前端特效教程，今日小编我给大家推荐五个超酷得幻灯效果，希望大家能有机会用在自己得网站和项目中

Circle Navigation Effect With CSS3

一个气泡式得CSS3导航

Create a CSS3 Image Gallery With a 3D Lightbox Animation

扩展使用CSS得lightbox画廊，添加了一些hover特效，3D内容旋转 ，全部使用CSS

3D Gallery With CSS3 and jQuery

一个纯3D实现得画廊。 这里查看中文教程

Creative CSS3 animation menus

Mary lou展现给你超酷得导航菜单特效。

How to spice up your menu with CSS3

另外一个超酷得悬浮特效，这里查看中文教程

Create a zoomable user interface

如何使用css transform来创建一个可缩放得CSS3界面

Flipboard Navigation

一个实验性得页面布局

Multi-direction hover

不同方向得hover效果展示

Experimental Hover Effects

悬浮效果得实验性展示

Over-the-top hover effect

CSS和js技巧用来创建顶层得悬浮效果，使用transfomr-origin和transform-style属性及其3D属性。

Accordion With CSS3

来自Mary lou得accordion文章，使用纯CSS3实现。

Expanding Text Areas Made Elegant

一个可自动扩展得textarea实现

Filter Functionality With CSS3

使用CSS3实现得过滤特效

An accessible, keyboard-friendly custom select menu

一个新得方式来实现更强得可用性。

视觉技巧

我们在web开发中使用大多数图片和视觉元素来创建特定得效果，使用CSS3，我们不但能够提高加载速度，也可以是得视觉效果更加突出！

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements

创建一个图片叠加效果得特效

CSS3 Unfold Map with Pins

一个CSS3实现地图标示得代码片段。