【转载】最新的Javascript和CSS应用技巧荟萃

标签： HTML5 技术博文 业界新闻 | 发表时间：2012-07-06 10:13 | 作者：HTML5研究小组
出处：http://www.mhtml5.com

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

CSS动画和过渡效果

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

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

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

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

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

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

互动的CSS3光线效果

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

Interactive CSS3 Lighting Effects

CSS3 12面体

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

CSS3 Dodecahedron

CSS 3D 光线引擎

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

CSS 3D Lighting Engine Photon

3D Thumbnail Hover Effects With CSS

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

3D Thumbnail Hover Effects With CSS

Slide In Image Boxes

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

Slide In Image Boxes

CSS3 bitmap graphics

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

Pure CSS3 Bitmap Graphics

Paperfold CSS

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

Paperfold CSS

Beercamp: An Experiment With CSS 3D

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

Beercamp: An Experiment With CSS 3D

Covers: A JS / CSS Experiment

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

Covers: A JS / CSS Experiment

Animation on Apple’s page

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

An explanation of the CSS animation on Apple’s iPhone 4S webpage — John B. Hall

Experimental animations for image transitions

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

Experimental CSS3 Animations for Image Transitions

Maintaining CSS style states using “infinite” transition delays

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

Maintaining CSS Style States using “Infinite” Transition Delays

CSS 3-D clouds

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

CSS3D Clouds

动画弹出个人信息框

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

Animated Profile Popover With CSS

CSS3 scrolling effects

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

CSS3 Scroll Effects

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.

CSS3 Family Tree

iOS-style popover

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

iOS-style Popover

Timeline-Style Comments

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

Timeline-Style Comments

CSS Table Grid

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

CSS Table Grid

Confirmation Feedback Buttons

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

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

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

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

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

A calendar in CSS3 and jQuery

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

A clean calendar in CSS3 & jQuery : Finishing Touch

Outdenting properties for debug CSS

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

Outdenting properties for debug CSS

Show Markup in CSS Comments

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

Show Markup in CSS Comments

Selectively displaying data

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

Remove Margins for First/Last Elements

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

CSS Diagnostics Stylesheet

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

CSS Diagnostics Stylesheet

Radio Buttons With Two-Way Exclusivity

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

Radio Buttons with 2-Way Exclusivity

Tabbed Navigation With CSS

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

Tabbed Navigation With CSS

Menu With Notification Badges With CSS

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

Menu with Notification Badges With CSS

Styling based on sibling count (slides)

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

Styling based on sibling count (Slides)

Stuff you can do with the “Checkbox Hack”

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

CSS3 Facebook Buttons

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

YouTube Popup Buttons

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

YouTube Popup Buttons

Centering in the Unknown

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

Centering in the Unknown

Micro Clearfix: Force Element To Self-Clear its Children

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

Micro Clearfix: Force Element To Self-Clear its Children

Conditional CSS

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

* { box-sizing: border-box } FTW

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

Multiple Attribute Values

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

Multiple Attribute Values

Diagonal CSS Sprites

使用diagonal来创建sprite。

Double Click in CSS

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

Replacing the -9999px hack (new image replacement)

用来隐藏文本的代码

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是一个超酷的前端技术博客，经常发布超酷的前端特效教程，今天小编我给大家推荐五个超酷的幻灯效果，希望大家能有机会用在自己的网站和项目中

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

Circle Navigation Effect With CSS3

一个气泡式的CSS3导航

Circle Navigation Effect with CSS3

Create a CSS3 Image Gallery With a 3D Lightbox Animation

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

Create a CSS3 Image Gallery with a 3D Lightbox Animation – Inspect Element

3D Gallery With CSS3 and jQuery

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

3D Gallery with CSS3 and jQuery

Creative CSS3 animation menus

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

Creative CSS3 Animation Menus

How to spice up your menu with CSS3

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

How to spice up your menu with CSS3

Create a zoomable user interface

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

Create a zoomable user interface with CSS3

Flipboard Navigation

一个实验性的页面布局

Flipboard Page Layout

Multi-direction hover

不同方向的hover效果展示

Multi-direction hover

Experimental Hover Effects

悬浮效果的实验性展示

Share JavaScript, HTML5 and CSS

Over-the-top hover effect

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

Accordion With CSS3

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

Accordion with CSS3

Expanding Text Areas Made Elegant

一个可自动扩展的textarea实现

Filter Functionality With CSS3

使用CSS3实现的过滤特效

Filter Functionality with CSS3

An accessible, keyboard-friendly custom select menu

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

视觉技巧

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

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements

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

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements – Inspect Element

CSS3 Unfold Map with Pins

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

CSS3 Unfold Map with Pins

Turn Images Into Postage Stamps With CSS3 border-image

使用简单的方法实现图片邮戳

Turn Images Into Postage Stamps With CSS3 border-image

Slopy elements with CSS3

使用css3利用对角线来创建特殊的视觉体验

Slopy Elements with CSS3

CSS Flip Clock

一个翻转的时钟实现显示特效

CSS Flip Clock

CSS3 Image Styles

如何使用CSS来实现完美的动态圆角图片，这里是 第二部分

CSS3 Image Styles – Part 2

Creating Reusable and Versatile Background Patterns

CSS和PS创建漂亮的背景图案

Creating Reusable & Versatile Background Patterns

Diagonal Graph Paper Gradient

一个非常不错的CSS技巧创建带有梯度的对角线图形

Diagonal Graph Paper Gradient

Tucked Corner Effect

一个非常干净的CSS技巧用来创建扁角特效，使用:after和:before来实现。

CSS Tucked Corner Effect

Scrolling… shadows!

一个CSS实现的滚动阴影特效

Scrolling shadows

Multi-colored CSS progress bars

一个CSS实现的多颜色进度条

Multi-colored CSS Progress Bars

CSS3 breadcrumbs

CSS3实现的漂亮当前位置特效

CSS3 breadcrumbs

Adobe-like Arrow Headers

A detailed article about the technique Adobe uses to create header bars for modules on its website.

一个adobe风格的箭头标题

Adobe-like Arrow Headers

Adding a Top Shadow to a website

使用body:before来添加阴影特效。

Adding a Top Shadow to a website

A flexible shadow with background-size

一个灵活的可自适应的阴影特效

Star Ratings With Very Little CSS

使用CSS实现的漂亮评级系统

Convert Images to Black And White With CSS

使用转化图片成为白色或者黑色

Punching Holes With CSS

一个简单聪明的技巧来展示背景图片。

Simple Styles for Horizontal Rules

简单样式的水平线。

Simple Styles for Horizontal Rules

Optimizing Graphics With CSS Masks

这个视频将展示使用CSS mask来帮助高效处理并且使用fallback来支持非webkit浏览器。

Browser-Specific CSS Hacks

一个非常实用的指定浏览器css hack ，很多都是我们需要常用的哦。

其它相关

CSS3 Lasers!

一个悬浮的激光特效

CSS3 Lasers!

The DOM Tree

超酷的自动通过js生成的页面dom树，绝对非常值得你一看！

DOM Tree

转载自： http://www.gbin1.com/technology/css/20120706-js-css-tips/

相关 [javascript css 应用] 推荐：

【转载】最新的Javascript和CSS应用技巧荟萃

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

解耦 HTML、CSS和JavaScript

- - ITeye资讯频道
当前在互联网上，任何一个稍微复杂的网站或者应用程序都会包含许多HTML、CSS和JavaScript. 随着互联网运用的发展以及我们对它的依赖性日益增加，设定一个关于组织和维护你的前端代码的计划是绝对需要的. 当今的一些大型互联网公司，由于越来越多的人会接触到日益增加的前端代码，它们会试图去坚持代码的模块化.

Javascript和CSS浏览器兼容总结

- Keel - ITeye资讯频道
这篇文章重点总结了Javascript和CSS浏览器兼容性问题. document.form.item 问题. 代码中存在 document.formName.item(“itemName”). 这样的语句，不能在FIREFOX下运行. 改用 document.formName.elements["elementName"].

Groundwork：响应式 HTML5，CSS & JavaScript 工具包

- - 博客园_梦想天空
　　Groundwork 是基于强大的 CSS 预处理器 Sass & Compass 的响应式 HTML5，CSS & JavaScript 工具包. 使用 Groundwork，您可以快速构建 Web 应用程序. Groundwork 拥有一个令人难以置信的灵活，可嵌套，流体的网格系统，是 Github 上的开源项目.

翻译：谷歌HTML、CSS和JavaScript风格规范

- - 张鑫旭-鑫空间-鑫生活
本文地址： http://www.zhangxinxu.com/wordpress/?p=2511. 原文地址： http://…style-guides/. 原文作者： Craig Buckler. 注：本文翻译的内容并不是谷歌官方提供的完整HTML/CSS风格规范，而是一种带有总结性质的简单称述.

用javascript预加载图片、css、js的方法研究

- - 博客园_Ruby's Louvre
预加载的好处可以让网页更快的呈现给用户，缺点就是可能会增加无用的请求（但图片、css、js这些静态文件可以被缓存），如果用户访问的页面里面的 css、js、图片被预加载了，用户打开页面的速度会快很多，提升用户体验. 在用到一些大图片展示的时候，预加载大图是很不错的方法，图片更快的被呈现给用户. 不多说了，作为一个前端攻城师都懂的，下面分享我做的测试和得到的结果.

Conditioniz – 探测浏览器并条件加载 JavaScript 和 CSS

- - 博客园_梦想天空
　　Conditioniz 是一个快速、轻量级（3KB）的 JavaScript 工具，用于探测浏览器和分辨率并条件加载 JavaScript 和 CSS 文件. Conditioniz 从它的 jQuery 前身重建，现在速度要快50%. 结合类名添加和 Conditionizr 集成的脚本和样式加载功能，允许你为不同的浏览器指定想加载的脚本和样式.

从一行CSS调试代码中学到的JavaScript知识

- - JavaScript - Web前端 - ITeye博客
现在到处都是JavaScript，每天都能知道点新东西. 一旦你入了门，你总能从这里或是那里领悟到很多知识. 一旦我发现一些有意思的东西，我喜欢去感觉他们的源代码，看一看它是怎么办到的. 今天我想分享Addy Osmani的 一行代码，这行代码对于你调试你的CSS是很有用的. 注* Addy Osmani 是Google Chrome开发工程师，他前几天开发的 字符串解析模板，马上被兼容最新ES6标准的io.js采纳.

Yahoo!网站性能最佳体验的34条黄金守则——JavaScript和CSS

- - 蓝飞技术部落格
在 第一部分和 第二部分中我们分别介绍了改善网站性能中 页面内容和 服务器的几条守则，除此之外，JavaScript和CSS也是我们页面中经常用到的内容，对它们的优化也提高网站性能的重要方面：. 避免使用CSS表达式（Expression）. 使用外部JavaScript和CSS. 削减JavaScript和CSS.

为什么 Web 前端开发不抛弃 HTML 和 CSS，用纯 JavaScript 开发？

- - 知乎每日精选
首先要确定，即使抛开游戏不论，一般的Web应用或者网站，完全用JavaScript开发也是可行的. 比如ExtJS、webOS的Enyo等. 但是主流Web开发很少采用全JS的方案. 注重考虑那些无法运行JS的用户代理. 用户使用不支持JS的浏览器（比如较老的手机浏览器），或者禁用脚本. 当然你可以选择忽略这一小撮用户，尤其是现在绝大多数网站和应用也是如此选择的，但是至少我们应该对坚持考虑无JS情况的开发者予以基本的尊重.