新的强大的CSS技术和工具

前端设计师的辛勤工作从未停止惊奇我们。在过去几个月中,我们看到的网页设计师创建,并提出了过多的真正了不起的CSS技术和工具。我们收集,分析,策划,并配备最新的有用的资源,为了您的方便,让你可以使用他们的权利或保存以供日​​后参考。

请不要犹豫,在这篇文章发表评论,并让我们知道究竟是如何使用它们在您的工作流程。不过,请避免链路滴,但分享您的见解和经验,而不是。此外,一些技巧,不仅是基于CSS的,但使用的HTML5,JavaScript或JavaScript的库以及通知。由于所有功能的设计人员和开发激励,努力工作。

CSS技术

Rotational Sliders
Eric Meyer的股份他是能够左右滑动与非中心变换起源的特别程度的动画变换6。

001

Generating Organic Randomness with Prime Numbers and CSS
起初,你可能想知道到底是为什么沃克说亚历克斯蝉和网页设计。一旦仔细一看,一种连接两个演变和“蝉原则”之间出生。

 

 

002

 

 

CSS3 3D Hologram
全息效果,可实现与HTML / CSS的,哈基姆厄尔尼诺Hattab开发自己的3D方块,这取决于设备的方向改变角度的启发。请注意,这需要一个Webkit浏览器,只在iPhone上测试。另外,确保访问哈基姆的CSS/HTML5实验

003

 

 

Checkerboard, striped & other background patterns with CSS3 gradients
你可能熟悉的CSS3梯度现在,包括标准的Mozilla语法和详细的Webkit。我假设你知道如何添加多个色站,使您的梯度角度或创建径向渐变。你可能不知道,什么是CSS3的梯度可以用来创建多种,通常需要的模式,包括格仔图案,条纹和更多。此外,检查出Lea的CSS3的模式库</ a。

004

 

 

CSS3 Keyboard
在框中点击并启动您的计算机的键盘上打字。巧妙地开发由达斯汀·卡特赖特和达斯汀·霍夫曼。你要尊重生产这个演示了时间和精力的金额。

005

 

 

CSS3 Progress Bars
几个不错的进展由克里斯Coyier创建的酒吧,不使用图像-只是CSS3的幻想。在浏览器不支持CSS3,这些进度条会显得更加简化。

006

 

 

Hover on “Everything But”
由克里斯Coyier教程,这说明我们多么容易元素添加一个悬停状态,可以。在这种情况下,悬停状态适用于一切,但实际上元素正在上空盘旋。

007

 

 

Creating a Sphere With 3D CSS
CSS3的3D转换,尽管与许多元素创建一个球体状的对象,这是可能的。保罗·海斯分享他的三维CSS领域(在最新的Safari和IOS)版本,并为我们提供编码需要。

008

 

 

CSS3 Planetarium
该演示突出领先CSS3和HTML5功能,Mozilla Firefox和社区推到现代的Web浏览器打开的网页。

009

 

 

Natural Object-Rotation with CSS3 3D
教程,教我们如何应用一些CSS 3D的转换,建立在HTML和CSS 3D packshot由德克·韦伯。通过添加一些JavaScript,我们可以使对象在三维空间自由旋转。我们将加强我们的JavaScript与一些触摸交互,packshot也将工作在Safari很好地像iPhone或iPad的iOS平台。

010

 

 

CSS Drop-Shadows Without Images
尼古拉斯·加拉格尔股提出他的CSS下拉阴影,没有任何图像。

011

 

 

Incrementable Length Values in Text Fields
LEA Verou介绍了如何实现一个功能,使您可以递增或递减1 <length>个值,按向上和向下插入符号,它是键盘箭头。

012

 

 

Beveled Corners & Negative Border-Radius with CSS3 Gradients
切角和模拟图像无负边界半径,再次利用CSS3的梯度- LEA Verou惊奇多少CSS问题都可以单独解决的梯度。作品在Firefox 3.6 +最新的WebKit每晚构建,铬和Opera 11.10。

013

 

 

Flexible Height Vertical lefting With CSS, Beyond IE7
罗杰·约翰森分享他的想法,就如何提高围绕横向和纵向的元素显示:表替代。

014

 

 

Coding up a semantic, lean timeline
本文告诉你如何创建一个语义精益时间表。

015

 

 

CSS Border Tricks with Collapsed Boxes
这些边境过关的技巧将帮助你以外的内容“框中显示的内容,超过边界,不使用图像,CSS3的梯度或无关的标记,。

016

 

 

Quick Tip: Nonintrusive CSS Text Gradients
杰弗里方式显示了一些方法,创建纯CSS文本梯度与权谋位。关键是要使用属性选择器,WebKit的特定属性,自定义的HTML属性的组合。

017

 

 

Bokeh with CSS3 Gradients
迪夫亚Manian使用CSS的梯度,结果显示他的工作作为装饰背景的一个项目,它使用了一堆圆。

018

 

 

Different Transitions for Hover On / Hover Off
克里斯Coyier试图以acchieve“MouseEnter和MouseLeave不同转变”,但他不使用JavaScript在这里,我们所说的关于CSS:悬停状态和CSS3的过渡。上盘旋,一些CSS属性的动画本身到一个新的价值;徘徊过,不同的CSS属性的动画。

019

 

 

Styling children based on their number, with CSS3
LEA Verou显示元素的风格儿童根据他们的总人数(即是,他们的总数)。

020

 

 

CSS Modal
使用模态框CSS3技巧,可以创建没有JavaScript或图像。与动画,过渡和转换位,可一点特别。问题:当你打的“返回”按钮后弹出模态已被关闭,你会看到模态。但也许你会想出办法解决它?

021

 

 

Rotating Feature Boxes
它的全面影响(过渡动画)旋转功能盒将在稍新的WebKit和Opera浏览器和Firefox 4(在今天的实际测试)。任何其他浏览器将旋转块,没有过渡动画。

022

 

 

When and How to Visually Hide Content
视觉隐藏在网页上的内容,通常是文本内容,有时在网页设计和开发的可行的技术。这是可以做到的有几个原因,最重要的是,以改善屏幕阅读器用户的经验。其他原因包括提高可读性CSS不能渲染,提高搜索引擎优化(SEO)。有关使用的视觉隐藏的内容的其他exaples在这篇文章中所示。

023

 

 

How to avoid common CSS3 mistakes
对CSS3的新功能,使我们与他们的复杂性和新的事情搞砸了。本文将帮助我们在检查当我们开始使用这些新功能。

024

 

 

Introduction to CSS Escape Sequences
转义序列是有用的,因为它们允许样式表作者代表,通常会被忽略,或由传统的CSS解析规则的不同解释的字符。MERT托尔在这篇文章中说明了如何使用这些序列。

025

 

 

Wrapping Long URLs and Text Content with CSS
包长的网址,文本字符串和其他内容,你可以申请任何块级元素的CSS代码块精心制作的。

026

 

 

CSS Generated Content
特雷弗·戴维斯在一些例子,你可以做什么用的CSS生成内容显示。

027

 

 

Controlling width with CSS3 box-sizing
CSS3的一个非常有用的功能,当你创建彩车列的CSS3盒大小的宽度盒大小。它可以让你选择使用这盒大小模型-元素的宽度和高度是否包括填充和边界或不。这使得更容易定义灵活的宽度,你还需要填充和/或边界。一个典型的例子是铺设形式,它可以是一个真正的痛苦,当你想灵活的宽度。

028

 

 

Revisit Hardboiled CSS3 Media Queries
石川,在boilerplates的密切关注和帮助我们理解数学,我们需要调整一个良好的解决任何特定设备所需的宽度。

 

 

iPad Orientation CSS
凯斯楚修改四云的工作,并找到一种方法来减轻额外的HTTP请求,而不是特定的iPad以及缺乏可重用性。在这篇文章中,他与我们分享他的iPad定位的CSS的修订建议。

 

 

CSS Value Lengths, Times, Frequencies and Angles
角度这篇文章的作者去了所有的CSS属性值,可作为应用数学类型单位。

 

 

CSS工具

320 and up
‘320和“防止移动设备下载桌面资产作为出发点,通过一个小屏幕的样式。尝试在不同的窗口大小和不同设备上的这一页,看到它在行动。

029

 

 

CSS3 Generator – By Eric Hoffman and Peter Funk
发电机自豪地由埃里克·霍夫曼设计的,由彼得·芬克编码。

030

 

 

CSS Pattern Generator
Patternify是一个简单的模式发生器,使您不仅在网上建立你的模式,但他们出口的base64代码,所以你甚至不需要一个图像文件了。只是在你的CSS代码,你准备好了。创建由萨沙·格雷夫。

031

 

 

Griddle.it – Web page alignment made easy
容易清洁和简单的方法,以帮助您对齐布局。没有复杂的网格框架necessary.Just放在我们的网址后,你的尺寸,以获得背景指导图像工作在您的浏览器。创建网格上的苍蝇,所以应该任意组合。

032

 

 

The 1140px Grid: Fluid down to mobile
1140格流体下降到移动完美地融入了1280显示器。在较小的显示器,它变成液体和适应浏览器的宽度。

033

 

 

Fighting the @font-face FOUT
保罗爱尔兰的2011年为@字体面对面的FOUT问题的更新。好消息:火狐4有没有的FOUT,IE9的不和的FOUT-B-了会帮你出。

034

 

 

CSS3 Github Buttons
CSS3的按钮是简单的框架,为创造良好的前瞻性GitHub的样式按钮链接。

035

 

 

CSS3 Facebook Buttons
CSS3的Facebook的按钮

036

 

 

Minimee
在因特网速度就是一切-这意味着,当涉及到CSS和Javascript文件,尺寸的确很重要。通过自动最小化,并结合为您的文件,Minimee繁重,保持文件苗条。

037

 

 

Live.js
1脚本在浏览器中的设计。

038

 

 

Bootstrap.less
引导是一包少,一个CSS预处理结合用于网络发展更快,更容易的混入和变量。

039

 

 

Animatable: Create CSS3 animations and advertising for Webkit browsers
动画的为Webkit浏览器是最简单的方式来创建Webkit浏览器CSS3动画和广告上的任何平台或设备-包括Android,黑莓,iOS和WebOS的。

040

 

 

Ceaser: CSS Easing Animation Tool
凯撒是一个CSS宽松的动画工具。

041

 

 

Shower
这是提供无担保,保证或解释。

042

 

 

CSS Pivot
此工具允许您添加CSS样式,任何网站,每股(调整)与短链接的结果。

043

 

 

Roots WordPress Theme
根是一个开始的WordPress主题开 ​​发基于HTML5的样板,蓝图CSS(或960.gs)的和Starkers,这将有助于你迅速创建小册子的网站和博客上。

044

 

 

Free Online CSS3 Typeset Style Generator
先进的发电机发电机的CSS按钮的工具,允许你定义的字体和颜色的变化,阴影,边框,边角等

045

 

 

CSSPrefixer
你讨厌写所有的浏览器供应商的前缀?该CSSPrefixer确实为你。

046

 

 

Type-a-file
这个工具会给你的网页排版一个良好的开端。键入一个文件本质上是一个CSS样式表的小集合,丰富和漂亮的印刷字体的重重点。工具使用Typekit预览样式,所以如果你有一个Typekit帐户,你可以购买字体许可证和有确切您网站上相同的版式。

047

 

 

A Best Practice Baseline for Your Mobile Web App
移动的样板,是您值得信赖的模板,用于创建丰富和高性能的移动网络应用程序自定义。你跨浏览器的A级智能手机之间的一致性,和传统的黑莓,Symbian,即移动的后援支持。

048

 

 

Code Beautifier
这个工具允许你格式化,清理和优化您的样式。

049

 

 

Markup Generator
标记发生器是一个简单的工具创建的HTML / CSS编码,厌倦了枯燥的框架代码写在开始的切片工作。

050

 

 

CSS Sprite Generator
此工具允许您创建和维护您的CSS sprites的。

051

 

 

Respond
快速、轻量级的最小/最大宽度CSS3媒体查询polyfill(因为IE 6-8等等)。

 

 

Adapt.js – Adaptive CSS
Adapt.js只是检查浏览器的宽度,并只提供所需要的,在需要时的CSS。

 

 

Firmin, a JavaScript animation library using CSS transforms and transitions
菲尔曼是一个JavaScript动画库,使用CSS的转换和过渡,以创建平滑的,硬件加速的动画。

 

 

Command-line CSS spriting
撰文表明,如何从单独的命令行创建CSS sprites的。

 

 

最后点击

Code Standards
本文件包含的,安索帕北美(以前的分子)的接口开发实践构建的Web应用程序的规范准则。这是任何人要检查我们的最佳做法的迭代进展一应俱全。

052

 

 

How to Manage CSS Explosion
如何保持CSS文件组织和干净的一个非常有用的StackOverflow线程。

053

 

原文: http://coding.smashingmagazine.com/2011/04/18/powerful-new-css-techniques-and-tools