日期:2014-05-17  浏览次数:20627 次

常用设计元素的高级CSS技巧

在帕兰印象看到的关于CSS技巧的收集文章,转载一下,给自己收藏学习之用!

1. CSS布局和用户界面技巧

当前 CSS 主要应用于创建页面布局。利用 CSS 创造页面布局和用户界面,有几乎无限的可能性。下面是一些更有趣的CSSCSS技巧。

The simplest way to horizontally and vertically center a DIV
本文介绍用 CSS 方法使 DIV 纵向或横向居中。虽然有很多通过父 DIV 和子 DIV 实现居中的代码,但这个特殊方法仅使用一个 DIV 元素,并且简单得多。

New CSS Sticky Footer – 2009
一个棘手的完全跨浏览器兼容的页脚CSSCSS技巧,兼容 Google Chrome 浏览器,并且不需要空 DIV 辅助。

Simple Page Peel Effect with jQuery & CSS
此教程结合 jquery 和 CSS 创建网页剥离效果。大多数网站都使用 Flash 来实现这种效果。因此如果不热衷于 Flash 技巧,这会是一个不错的选择。

Equal height boxes with CSS
一个使用 CSS 创建等高栏式布局的基本实例,彻底抛弃表格布局的代码冗杂与混乱。

Adaptable view – how do they do it?
让用户手动改变网站的表现,似乎可以大大提高网站的易用性和用户粘度。本教程将介绍如何为网站实施和部署浏览器适应技巧。

CSS: The All-Expandable Box
一个创建自适应 CSS 容器的教程。容器会自动向各个方向扩大,以适应所包含的内容,而不只是垂直增长。适用于用户可控字号导致使 CSS 容器撑开的情况。

Four Methods to Create Equal Height Columns
一个使用 CSS 创建等高列的教程,共涉及四个不同的技巧。兼容所有主流浏览器(甚至 IE6 浏览器)。

Vertical Centering With CSS
这篇文章包括各种使 CSS 元素垂直居中于网页的最佳技巧。同时也介绍了如何利用这些CSS技巧,创建一个简单小巧的垂直居中的站点。

CSS vertical center using float and clear
使用浮动 (float) 和清除 (clear) 创建垂直居中的 CSS 容器,甚至兼容 IE5 版本。

Cross-Browser Inline-Block
本教程涵盖在多重内容情况下,创建一个内联块 (inline-block) 布局的方法,而不打破布局的完整性。

The CSS “Ah-ha!” Moment
谈论大多数设计师,在其职业生涯的某个时候发出 “Ah-Ha!” 感叹的时刻。以及一些重要的关于 CSS 容器布局的灵感突现。

An Indepth Coverage On CSS Layers, Z-Index, Relative And Absolute Positioning
本文给出了关于 CSS 层,相对和绝对定位。以及 Z-Index 属性的全面概述。

The CSS Overflow Property
详解了 CSS 溢出属性的工作流程。包括可见 (visible),隐藏 (hidden),滚动 (scroll),自动 (auto),以实例说明逐一说明。

Absolute, Relative, Fixed Positioning: How Do They Differ?
分析容易混淆的绝对 (absolute),相对 (relative),固定位置 (fixed) 之间的差异性,详细说明各个属性的区别。

display: inline-block
介绍在不同的样式中创建内联块 (inline-block) 的方法,并兼容不同的浏览器环境。

2. CSS导航和菜单技巧

良好的导航是网站中非常重要的一部分。良好的导航既方便用户使用,也补充和完整了网站的其他设计元素。以下是一些关于创建导航的CSS技巧和提示,使其两者兼备。

Create dropdown menus with CSS only
一份创建 CSS 下拉菜单的完整教程,该方法快速而且易于实施。

Simple scalable CSS based breadcrumbs
在网站上使用面包屑导航,可以方便访问者浏览。本教程介绍了一种创建基于 CSS 的,可伸缩面包屑导航的方法。

Horizontal Sub-nav with CSS & jQuery
一份关于使用 CSS 技巧创建横向导航子菜单的完整教程。如果希望正常工作于 IE6 浏览器,可能需要执行一些 jQuery 代码。

CSS Step Menu
建立一个阶梯式菜单(也称为“向导菜单”)可能会非常棘手,特别是当它需要根据实际应用做出一些改变的时候。本文给出了创建该类菜单的实例。

The Tabbed Breadcrumb Navigation
一份关于创建面包屑导航,并格式化为标签式的全面教程。

Apple’s Navigation bar using only CSS
该教程说明如何创建一个类似苹果网站的导航栏,仅仅使用 CSS 和 html 代码(不附加任何图片)。

Sitemap Celebration
一款跨浏览器兼容(即使是 IE5 版本),并且基于嵌套列表的网站地图 (Sitemap) 风格。

Nice CSS menu with feed reader icons list
使用 CSS 创建一个供稿 (Feed) 阅读器图标菜单。可以方便地适用于其他类型的菜单。

Multi-level Menus with jQuery and CSS
使用纯 CSS 以及 CSS/JS 创建多级联动菜单的技巧集锦。也涵盖了更先进和富有创造性的实例。

3. CSS图像样式和相册技巧

在网页设计中,图片造型是一个经常被忽视的因素。以下这些精选的的技巧和CSS技巧,将帮助你纠正和改善这种情况。

Centering images with CSS
一些关于图片居中的基本资料,使用 CSS 控制而不是过时的纯 HTML 布局。

Add a Custom “Trendy” Border Around Blog Images With CSS & JavaScript
一份关于如何在博客上,建立各种图片边框样式的完整纲要。使用 javascript 和 CSS 技巧相结合。

Sexy Music Album Overlays
为图像画廊增加更多风格样式的教程,文章使用专辑封面的制作过程作为一个实例。

Create CSS pin balloons with ease
这是一个强大的技巧,从简单的锚点标记,扩大过渡到为图像增加引脚气球、气泡提示或地图标示。

Create an Image Rotator with Description (CSS/jQuery)
一份关于如何使用 CSS 和 jQuery CSS技巧建立图片旋转/画廊的教程。本文将创建一个干净的界面,用于显示一般的或组合的图像廊。

5 Popular CSS Speech Bubbles
收集了使用 CSS 创建气泡提示的 5 个不同的技巧(有些纯粹用 CSS 实现)。

How to Make a Threadless Style T-Shirt Gallery
创建一种类似 Threadless 网站的图像画廊效果,以字幕或覆盖图片或缩略图的顶部。功能的实现技巧值得借鉴。

CSS image replacement for… images? It makes sense for print. (Ask the CSS Guy)
基于 CSS 样式表打造针对打印用途和屏幕显示优化的图像。

Beautiful new CSS: box-shadow
关于利用 CSS 创建容器阴影效果的教程,德文网站。

4. CSS字型排版技巧

CSS 擅长于字型排版设计。无论是字体类型