CSS:技术创新和实用的解决方案

虽然CSS是没有困难的,有用的CSS技术是不容易找到。有时发现一个跨浏览器的解决方案可能需要一些时间,但你不必每一次推倒重来。其他设计师可能有同样的问题,因此在过去的这一轮的主要目的是与大家分享新技术,希望你会觉得非常有益和有价值的金矿。我们也希望这些教程和文章将帮助您解决常见的设计问题,并找到新的方式接近棘手的CSS问题。

文章的主要目标是提出新的强大的CSS技术,鼓励在设计界的实验和向前推进的CSS。请注意,在这篇文章中,我们采用两个实验演示和实用技术。下周,我们将提供更加有用的新的前端开发工具和资源。设计界的努力,我们衷心感谢-谢谢你,伙计们!

有趣和原创技术

Wonder-Webkit: 3D Transforms
这是一个显着的例子使用CSS3 3D变换,可以做些什么。有趣的东西是任何DOM元素的变换矩阵操纵的可能性,在这种情况下,我们得到的矩阵元素只有四个终点。不要忘了点击的项目,太。谁想到几年前的东西一样,将是唯一的CSS可能吗?

001

 

 

CSS Box Shadow & Text Shadow Experiments
CSS box-shadow和 text-shadow使我们能够创造一些很酷的设计元素,甚至没有像阴影。关键是要思考的CSS阴影如何工作,并用它们来得到想要的效果。文章功能使用三个显着的例子 box-shadow财产,创造性地实现没有很多工作要做,与阴影的影响。

002

 

 

CSS3 Depth of Field
Hollenshead’s的实验是企图用CSS创建的“景深”的效果。使用 text-shadow与文字颜色设置为 transparent,模糊的文字完成。采取在看演示,不要忘了按“N”切换动画。

003

 

 

Art Deco Selectable Text
这是一个快速验证概念分割排版,基于皮埃尔修复Masseau的装饰艺术风格的。面临的挑战是有这样一种“分裂字母’作为一个网页布局的一部分,同时保留选择文本的能力。

004

 

 

CSS3 :toggle-button without JavaScript
此演示切换按钮没有JavaScript提出了CSS3的切换按钮,没有JavaScript。如果你需要它堆叠在彼此顶部 <a>s小号,然后禁用顶端的指针事件 <a>上 :target。

005

 

 

About War and Bananas
这名学生的项目,探索新途径的艺术造型和设计网站。梅尔茨在德国AKADEMIE学生用毕加索的“格尔尼卡”的画面,画面分隔成不同的层次和动画他们使用CSS。

006

 

 

WebKit Clock
是由该演示HTML5的画布,对CSS3,JavaScript的Web字体,SVG和无图像文件。CSS文件是巨大的,但结果是相当显着。

007

 

 

Pure CSS Slideshow
这种技术使用CSS转换和定位,创建基于CSS的纯幻灯片。不幸的是,没有文件是()。

008

 

 

CSS Dock
这是一个快速CSS3的实验,试图复制的OS X的Dock,标签,动画,反射和指标的完成。它的放大效应和使用 :target伪类和弹跳效果的CSS动画,CSS过渡。

009

 

 

Andrew Hoyer
由安德鲁·霍耶有趣的实验。走的人只使用CSS3的动画和简单的HTML实现。这一切背后的关键思想是一个事实,即一个CSS变换应用于元素也适用于所有其子女。作品只有在Webkit的浏览器。

010

 

 

Type study: An all CSS button
丹Cederholm介绍了如何通过使用 box-shadowtext-shadowborder-radius,,和CSS梯度,我们可以创建一个高度抛光立体,反应灵敏的按钮,不需要图像。

011

 

 

3D Text
这种技术使用多个 text-shadows到创建一个文本的任何HTML元素的3D外观。没有多余的标记。在野生动物园,铬,Firefox和Opera的最新版本的作品。

012

 

 

Spin those Icons with CSS3
Tom Kenny拥有一个整洁的效果,旋转一个CSS的转换和过渡,当你悬停在他们的帮助下,社会图标,这些图标用CSS3的自旋。一个很漂亮的增强。

013

 

 

The Shapes of CSS
文章介绍各种几何形状,全部使用CSS和一个单一的HTML元素创建的。下列形式:方形,长方形,圆形,椭圆形,三角形,平行四边形,梯形,明星,五角形,六角形,八角形,心和无限-只使用CSS。

014

 

 

CSS background image hacks
模拟背景图像作物,不透明的背景图片,背景变换,改进的背景定位。文章解释了几个黑客依靠CSS伪元素来模拟功能不可用,或现代的浏览器尚未广泛支持。

015

 

 

Making Better Select Elements with CSS3 and jQuery
本教程介绍了如何把一个普通的 select元素,并更换一个更好的版本,同时保持所有功能完好。它使用CSS3的多重背景和透明PNG图像作为一个精灵。目前,多个背景支持火狐,Safari,Chrome和Opera。对于Internet Explorer和旧版本的第一个浏览器,一个备用的定义,这基本上只是一个背景的普通版。不明白多重背景的浏览器解析CSS文件时,将不理会规则和使用普通的。

016

 

 

CSS-Only 3D Slideshow
本教程的CSS-3D幻灯片演示如何创建一个3D的幻灯片,仅使用HTML和CSS。没有JavaScript。你就能够模仿与CSS的使用click事件 :focus伪类和HTML5元素<figcaption>,但这个想法是相同的。由于笔者承认,这种方法不一定比使用JavaScript“更好”,但只是一个整洁的替代方案,采用最新的HTML5元素的优点。

017

 

 

Have Fun with Borders
本教程介绍了三个简单的添加光影技术,“按下”和“斜面”国文本块和图像。由苏先生田中。

018

 

 

Animated CSS3 Owl
“猫头鹰感动了每隔一段时间,他的眼睛时,会提高他的翅膀,而一些光线会在后台旋转徘徊。有点过分?也许吧。有必要吗?不尽然。然而,这正是我一直在寻找做CSS3的变换,转换和动画。“一个有趣的实验,最好在Safari或Chrome浏览。

019

 

 

CSS Social Sign-in Buttons
此博客文章介绍了 border-radius为创造很好的响应CSS按钮使用CSS精灵,非常简单的技术,阴影和CSS渐变。

020

 

 

Rotating color cube box with CSS3 animation, transforms and gradients
一个又一个显着的实验,提出了一个旋转的彩色立方体,使用CSS3动画和转换。要知道,浏览器可能放慢位加载演示时。

021

 

 

CSS3 Demo: 3D Interactive Galaxy
一个CSS3的演示,在那里你可以用程序生成的三维星系交互。为了营造效果,设计师在Safari 5和iPhone和iPad使用3D CSS属性。

022

 

 

Getting Hardboiled with CSS3 2D Transforms
安迪·克拉克解释如何使用CSS3二维转换到现实主义的一个无情的私家侦探的名片行。以及工作演示

023

 

 

How to create Microsoft Office Minibar with jQuery and CSS3
扬科·约万诺维奇介绍了如何创建一个Microsoft Office拖鞋公开上下文相关的功能。在MS Word的情况下,背景是一个文本选择。由于拖鞋总是弹出鼠标指针附近,它使用户能够快速执行选择的动作。

024

 

 

Angled Content Mask with CSS
本文介绍了如何创建直角CSS内容“面具”。这个想法是很简单,使用CSS transform属性(旋转,更精确)。

025

 

 

Rotating Feature Boxes
这里所有的动画旋转功能盒 CSS3的过渡。只手表的JavaScript的点击,并适用于和删除需要的类。所以,当你点击一个块,该块类的’调整。新的阶级有不同的大小和位置值。因为块过渡CSS的应用,这些新的尺寸和现在的位置值,以及动画。

026

 

 

Pure CSS3 box-shadow page curl effect
好了,这里的CSS3的代码是古怪的,看起来有点臃肿第一,但它是一个很好的例子使用各种CSS3功能,共同创造的效果,通常会要求图像。

027

 

 

Pure CSS Folded-Corner Effect
了解如何创建一个简单的CSS折叠角的影响,没有图像或额外的标记。它的工作原理以及在所有的现代浏览器和简单的颜色背景的设计是最适合Firefox 3.5的支持,铬4 +,Safari 4的+,歌剧10,IE浏览器8。

028

 

 

有用的实用技术

Smooth Fading Image Captions with Pure CSS3
了解如何使用CSS3过渡到创造不错,动画,半透明的图片说明。包括完整的例子和代码下载。

029

 

 

Fade Image Into Another
了解如何创建元素的背景图像,图像翻转。有三种方式消失在混浊。点击这里了解更多信息:

030

 

 

New @Font-Face Syntax: Simpler, Easier
使用即将发布IE9和FF4,伊桑邓纳姆从字体松鼠重新跨浏览器的CSS @ font-face的语法问题,并发现了一个新的和简单的解决方案。在这篇文章中,理查德·芬克解释新的语法及其变化,并提出最合理的使用语法。此外,检查FontSpring 新防弹@ font-face的语法。请注意,该技术不再在Internet Explorer 9。

031

 

 

The New Clearfix Method
clearfix劈,或“易结算”黑客是一个有用的方法清除浮动。original clearfix的伟大工程,但浏览器,它的目标是过时或对他们的方式。clearfix的新方法适用结算规则,以符合标准的浏览器使用:after伪类。对于IE6和IE7,clearfix的新方法触发 hasLayout的一些专有的CSS。因此,新Clearfix方法,有效地清除所有目前使用的浏览器中不使用任何黑客彩车。

032

 

 

Quick Tip: Mimic a Click Event with CSS
杰弗里方式与我们共享同一个视频,将展示一个漂亮的技术,通过使用简单明了的CSS模仿click事件的快速提示。

 

Breadcrumb Navigation with CSS Triangles
本文介绍了一种用纯CSS创建三角形相当简单的技术。您只需打一个零宽度和高度,对一方的彩色边框,透明的边界上两个相邻双方的块级元素。小箭头讲话气泡,导航指针,坚持从有用的。

033

 

 

Responsive Images: Experimenting with Context-Aware Image Sizing
由于伊桑Marcotte创造的长期,反应灵敏的Web设计已经获得的网页设计社区中大量的关注,主要原因是其灵活的布局显着的潜力,应对的最佳浏览器的视口进行实验用户体验。然而,这种设计的主要问题,找出如何为移动设备和片和大量的桌面显示的小图片。这项技术的目标是提供在不同的分辨率,利用显着不同的图像大小的响应布局的优化,为上下文图像大小。

034

 

 

CSS powered ribbons the clean way
哈利·罗伯茨提出了一个简单的技术,采用图像和CSS来创建清洁色带的清洁方式这种技术创建白色 <h2>,粉色的背景,拉出来的内容区域与负缘<H2>,然后把图像在一个绝对的左下角 <h2>:before伪元素。

035

 

 

Create a centred horizontal navigation
定心块级元素很简单,只要定义一个 width和集 margin: 0 auto,但如果你不知道,固定宽度?你可以使用 text-align: left;,但不会100%宽度的块级元素。然而,有办法有一个明确的宽度不知道,没有添加CSS居中的水平导航。

 

Keep Margins Out of Link Lists
  当建立链接菜单或其他列表,它通常一个很好的做法,使用 display: block;或 display: inline-block;这样您就可以增加链接目标的大小。一个简单的事实:更大的链接目标是让人们更容易点击,并导致更好的用户体验。确保列表项不填充,但链接和不使用的利润,所以有没有联合国点击的差距。

036

 

 

Pure CSS3 Post Tags
这是一个相当简单的纯CSS技巧,你可以使用的风格你的博客文章标签,通常放置在底部的职位。也看到图像的标签形状

037

 

 

Styling children based on their number, with CSS3
LEA Verou提出一个有趣的技术,根据其数量造型儿童。它是基于之间的关系 :nth-child  和:nth-last-child.。与技术,规则总数仍然为O(N),但在每一个规则的选择变得只有2,使这一招大得多儿童的实际。

038

 

 

Wrapping Long URLs and Text Content with CSS
  包长的网址,文本字符串和其他内容,但它足以适用任何块级元素精心制作的CSS代码块(例如,完美 <pre>标签)。非常有用的代码片段时,需要在一个固定的内容宽度的博客文章中提出的案件。

039

 

 

Pure CSS(3) accordion
使用任何一个有趣的手风琴技术,但语义的HTML,CSS和一些进步的CSS3。也有两个版本,水平和垂直。

040

 

 

Target iPhone and iPad with CSS3 Media Queries
一个如何SE CSS3媒体查询到CSS样式应用在移动设备,如iPad或iPhone的纵向和横向模式的详细解释。

 

 

Rein In Fluid Width By Limiting HTML Width
  如果你正在流体宽度站点,但要限制它可以扩大,可以做这么容易从字面上应用 max-width的 html元素的最大宽度。快速和有用的技巧。

041

 

 

Inline Boxes with Bottom Alignment
试想一下,你要保持行框底部的“提交”按钮内嵌盒底对齐形式对齐控制低于其标签的位置(见下文)。如果包含块是没有足够宽的“提交”按钮流入旁边的其他控件,按钮必须在开始的下一行中显示,上面最小的空间。文章阐述了这个问题的解决方案。

042

 

 

Transparent CSS Sprites
该技术的想法是创建一个透明的精灵,让 background-color显示通过。如果你熟悉CSS精灵,你应该能够抓住这个扭转相对容易。简单,图像与透明的“敲”的背景颜色上放置透明的中心。改变背景颜色改变元素的外观。

 

 

Jump links and viewport positioning
“使用页内链接印刷机跃升到内容的权利,在视口顶部,这可能是一个问题,当使用一个固定的头位的两轮牛车,有一些CSS的方法来插入视口的顶部和内页的目标元素之间的空间。“

043

 

 

Mimic Equal Columns with CSS3 Gradients
“会发生什么事时,你的主要内容区域需要两个特定的背景颜色:如果你曾经尝试过申请的背景,每个容器本身的主要内容之一,另一侧边栏,你会不无疑已经意识到,你的布局很快变得支离破碎尽快为主要内容的部分超过了侧边栏的高度。一般情况下,解决的办法是设置父元素的背景图像,并将其设置垂直重复。然而,如果我们得到巧用CSS3梯度,我们可以实现零图像相同的效果。“ 一件由杰弗里路。

 

 

Double Click in CSS
已经如何,我们基本上失去了一些有趣的谈话:hover伪类在CSS以及JavaScript中的MouseEnter,mouseleave,MouseMove事件。现在,这里的理念是:我们可以以某种方式拉断双击一个纯CSS?是的,我们能做到,如果输入占地面积链接,埋焦点,触发保持它上面悬停在链接。WebKit的(包括手机)和Firefox上工作。所以,我们基本上建立了一个“轻”另类悬停序列自来水→状态改变/激活链接→再次点击访问链接。

044

 

 

left Multiple DIVs with CSS
在某些时候,你可能有情况下,你想中心的多个元素(也许 «div»元素在一个固定宽度的区域单行,或其他块元素)。围绕在一个固定区域的单个元素是很容易的。只是要居中的元素,增加 margin: auto和一个固定的宽度和利润率将迫使中心的元素。可以实现类似的东西,“重铸”元素的CSS的flexibity优势。

045

 

 

Clearing Floats with Overflow
编码与基于浮动的布局时,我们所面临的共同问题之一是,包装容器不扩展到孩子的浮动元素的高度。典型的解决方案来解决这个问题是加入后的浮动元素有明确的持股量元素或加入clearfix包装。但你也可以用 overflow属性来解决这个问题。这不是一个新的花招,但仍然非常有用。

046

 

 

Different Transitions for Hover On / Hover Off
这项技术的想法是要解决一个有趣的问题:怎么样使用和关闭悬停在不同的过渡?在这个例子中,当你悬停,:hover过渡覆盖在常规状态的过渡,以及属性的动画。当你徘徊了,从正常状态的过渡需要和财产的动画。有用的。

 

Stretch a Box to its Parent’s Bounds
一个强大的功能,使绵延一箱的绝对定位最流行 ​​的用途是定位在任一箱 top或 bottom right left坐标。

 

 

Equal Height Column Layouts with Borders and Negative Margins in CSS
本文演示了不同的构造技术和刷子上你可能会错过一些概念。

047

 

 

Using CSS Text-Shadow to Create Cool Text Effects
CSS3的文字阴影属性已经有一段时间了现在,并且被普遍使用,以重新Photoshop的掉落阴影类型阴影添加微妙的阴影这有助于增加深度,尺寸和以解除元素从页面。演示是可用的,如果你想看看它看起来像以前一样,你给它一个尝试自己。

048

 

 

Fluid Width Equal Height Columns
高度相等列已经永远需要一个网页设计师。如果所有列都有相同的背景,高度相等是无关紧要的,因为你可以设置这样的背景下,对父元素。

049

 

 

CSS Box-Shadow:Inset
它总是很高兴能够添加暗角效果SANS-Photoshop的照片,但一路浏览器解释框阴影:插图是抛出的形象背后的阴影,使其无形。虽然这似乎是相当无用的,它有一定道理,当你考虑其他类型的内容。

050

 

 

Flexible Navigation
导航使用唯一的CSS的转换和过渡,并没有JavaScript的一个有趣的技术。

051

 

 

Circle Zoom
一个非常漂亮的悬停效果:Twitter的图标有一个作为背景的圆圈圈,增加它的半径,当用户的鼠标悬停。

052

 

 

最后点击

CSS3 Memory
记忆游戏,您将在其中找到匹配的卡(如CSS过渡致敬)。

053

 

 

CSS 3D Scrolling @ BeerCamp at SXSW 2011
现在,这就是创新:当你向下滚动页面,该网站似乎有一个3D的滚动效应。它有一个很好的初始参考。你能发现它吗?

054

 

 

50 New Useful CSS Techniques, Tutorials and Tools
CSS技术的碎杂志上一轮50个新的有用的CSS技术,教程和工具。在这篇文章中,我们提出最近发布的CSS技术,教程和工具,为您使用和提高您的工作流程,从而提高你的技能。

055

 

 

原文:http://coding.smashingmagazine.com/2011/02/16/css-useful-coding-techniques-and-design-solutions