彬Go » 资源

你需要了解的21个CSS惊人技巧

暴风彬彬 — Mon, 26 Oct 2009 15:00:04 +0000

　　级联样式表(CSS)在当代Web设计中已经成为重要的环节，如果没有CSS现在的网站将像10年前一样不堪入目。随着CSS技术的普及，越来越多的高质量CSS教程涌入互联网，让我们的学习更加方便。下面彬Go向大家推荐21个惊人的CSS技巧，相信其中必有你想不到的。还等什么，继续往下看吧！

您还可以参考以下CSS相关教程及资源:
《CSS Sprites(CSS图像拼合技术)教程、工具集合》
《学无止境的CSS(xHTML+CSS技巧教程资源大全)》
《精选30个优秀的CSS技术和实例
《使用CSS为图片添加更多趣味的5种方法》

1.CSS跨浏览器幻灯片

点击上图查看清晰原图
演示了如何仅适用CSS打造一个跨浏览器的图片画廊

2.基于CSS的图片地图

这个教程演示了如何使用纯CSS创建一个”疯狂”的图片地图。

3.纯CSS无JavaScript的LightBox

点击上图查看清晰原图

4.CSS图片替换技术制作的按钮

使用CSS将表单提交按钮替换为图片，如果禁用CSS将变回普通按钮。

5.用CSS实现动画导航菜单

6.用CSS创建类似树形导航菜单

7.CSS渐变文字效果

8.CSS目录菜单设计

点击上图查看清晰原图
很容易理解的关于使用CSS border属性或CSS背景图属性实现目录菜单的教程。

9.使用CSS负margin创建自适应布局

10.使用CSS固定你的页脚

点击上图查看清晰原图
你也许会遇到这种情况:当你为每个页面设置相同的页脚后，有些页面的主题内容量很少，使得页脚自动向上移动，看上去的浏览器下面很空。这个教程将教你如何使用CSS固定页脚在页面底部来解决这个头疼的问题。

11.简单、灵活的CSS面包屑导航

12. 为你的博客创建时髦的引用(Pullquotes)

13.CSS实现的柱状图表

14.如何为链接列表创建块级悬停效果

15.CSS多列列表

16.用CSS Sprites技术实现日期显示

17.使用CSS美化你的日期和评论

18.使用CSS创建图片浏览器

点击上图查看清晰原图

19.创建CSS图片预载

无需JavaScript，仅使用CSS背景图属性实现图片的预载。

20.从页面底部淡出效果

点击上图查看清晰原图

21.创意且很酷的CSS边框属性

留意更新

订阅彬Go以查看CSS最新教程及资源。

英文原文:21 Amazing CSS Techniques You Should Know
翻译原文:你需要了解的21个CSS惊人技巧(彬Go)

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/21-amazing-css-techniques-you-should-know.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

99款高质量免费(X)HTML/CSS模板

暴风彬彬 — Fri, 23 Oct 2009 03:59:06 +0000

　　大家都清楚一个网站象征着你和你的品牌，这取决于你如何构建自己的网站。正因为Wordpress越来越受到互联网设计群体的关注，它并不代表最基本的(X)HTML/CSS很丑、很杂乱和单调。彬Go将向大家推荐99个高质量的免费(X)HTML/CSS模板，你可以用于自己或公司企业的网站。

您还可以参考以下(X)HTML/CSS相关教程及资源:
《30个基于CSS的导航和按钮优秀设计教程》
《2008年最佳Web设计/前端开发技巧、脚本及资源总结》
《精选30个优秀的CSS技术和实例》
《43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程》

高质量免费(X)HTML/CSS模板

留意更新

订阅彬Go以查看(X)HTML/CSS最新教程及资源。

英文原文:99 High-Quality Free (X)HTML/CSS Templates
翻译原文:99款高质量免费(X)HTML/CSS模板(彬Go)

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/99-high-quality-free-xhtml-css-div-templates.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

15款非常有用的前端开发CSS网格(grid system)生成器

暴风彬彬 — Fri, 03 Jul 2009 05:50:36 +0000

现在的互联网上已经有很多能帮助设计师们的各种在线生成器，比如:图标(icon)生成器、背景生成器、按钮生成器和标志生成器等。Balkhis曾经为我们写过一片很不错的关于各种实用的在线生成器的文章。

如果没有这些在线的生成器，设计师们可能就要浪费很多精力在重复性的工作中了。今天彬Go将向大家分享一系列(15款)CSS网格布局生成器。如果大家不了解CSS网格布局的话，可以先看看彬Go之前的文章《960网格系统》、《使用Photoshop+960 Grid System模板进行网页设计》、《960 Grid System 基本原理及使用方法》

1.网格布局生成器 By Pagecolumn

2.网格生成器 By DesignByGrid

3.Blueprint CSS网格生成器

4.网格生成器 by netProtozo

5.Grid Designer (featured in Creative Review magazine)

6.网格系统生成器

7.YUI CSS 网格生成器

8.Variable Grid System

9.YAML 生成器

10.布局生成器 by Pagecolumn

11.Fisheye

12.CSS 布局生成器 by CSSCreator

13.Firdamatic

14.支持边框的CSS1~3列页面生成器

15.CSS 布局生成器 by CSSPortal

英文原文:15 Extremely Useful CSS Grid Layout Generator For Web Designers
翻译原文:15款非常有用的前端开发CSS网格(grid system)生成器

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/15-extremely-useful-css-grid-layout-generator.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

Web UI 设计(网页设计)命名规范

暴风彬彬 — Tue, 12 May 2009 03:34:36 +0000

最近工作实在是繁忙，所以好久没有更新自己的博客了，实在是对不起各位读者。今天好不容易闲下来半天，所以和大家分享一下我之前总结的一套Web UI 设计命名规范，也就是网站用户界面设计(俗称网页设计)命名规范。

这套规范并非单纯的CSS、html或JavaScript命名规范，它涉及了很多使用PhotoShop这类设计工具进行网页设计过程中的命名规范。(好久没写文章了，有点罗嗦，吼吼~)。首先我是出于公司几位美工的设计效果图源文件没有对图层命名而开始考虑总结一套的，还有一个原因就是网上大多命名规范都是关于编码的，也就是那些css、html、js和一些服务器端语言的，至于设计方面的命名规范实在是很少。但是毕竟设计师也是技术团队的成员，而且前端开发工程师是要使用设计师的效果图源文件的，所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。

这套WebUI设计命名规范总结自我的一些Web设计经验和国外设计师的命名方式推荐。

Web UI 设计命名规范

一.网站设计及基本框架结构:

1.   Container
“container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“.
2.   Header
“header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header” (或 pageHeader).
3.   Navbar
“navbar“等同于横向的导航栏，是最典型的网页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.
4.   Menu
“Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”.
5.   Main
“Main”是网站的主要区域，如果是博客的话它将包含的日志。这部分还可以命名为: “content“, “main-content” (或“mainContent”)。
6.   Sidebar
“Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.
7.   Footer
“Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright“.

二.需要注意的几点:

1.尽量考虑为元素命名其本身的作用或”用意”，达到语义化。不要使用表面形式的命名.
如:red/left/big等。

2.组合命名规则:
[元素类型]-[元素作用/内容]
如:搜索按钮: btn-search
登录表单:form-login
新闻列表:list-news

3.涉及到交互行为的元素命名:
凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:
鼠标悬停:：hover 点击：click 已浏览：visited
如:搜索按钮: btn-search、btn-search-hover、btn-search-visited

三.Photoshop图层结构规范:

Photoshop图层命名遵循树形结构，凡某元素组成的图层大于3层，即可形成组，所有图层尽量避免使用默认命名(图层+编号)。

第一级图层结构如下图:

第二级结构图例(医院网站):

第三级结构图例及效果图对比(医院新闻栏目)：

效果图

图层命名结构

四．常用命名汇总:

页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告条:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
下拉菜单:dropMenu
工具条: toolbar
表单:form
栏目:column
箭头:arrow
搜索:search
搜索按钮:btn-search
滚动条:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
链接:links
页脚:footer
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
版权:copyright
网站地图: sitemap

以上命名规范仅供参考。如果大家对于Web UI设计规范有自己的见解，欢迎大家在此留言一同讨论，互相学习，共同进步:)

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/web-ui-design-name-convention.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

30个运用纸类元素网页设计的创意实例欣赏

暴风彬彬 — Sun, 19 Apr 2009 07:03:35 +0000

将纸的材质融为设计元素现已成为当今网页设计最热门最流行的设计趋势之一。网页设计师可以使用纸屑、硬纸板纹理材质、笔记本和记事薄构成有趣而复杂的设计。今天，彬Go将带您一起学习国外30个优秀的纸类元素网页设计实例。通过这30个网页设计实例，您将了解到如何将纸类元素使用在网页中的各种组成元素中，如背景图、导航菜单、内容区域以及其他网页元素。希望大家能在这30个实例中找到更有创意的灵感。

您还可以参考以下JavaScript/CSS相关教程及资源:
《网页设计趋势之:星空和极光效果》
《70+漂亮且极具亲和力的导航菜单设计推荐》
《2008年国外最漂亮的50个网站欣赏》
《网页设计新趋势:云隙阳光和光线效果》
《精选31个网站界面设计实践教程》

1.Peace River Excursion

2.Team Green

3.Diego Latorre

4.DK Publishing

5.The Chernobyl Nuclear Disaster

6.Church on the Rock

7.Dawghouse Design Studio

8.BlackWave Creative Branding and Design Services

9.L’Antidote

10.Gardening With Children

11.Revolution Driving Tuition

12.Pain is Good

13.kayintveen.com

14.Sprocket House

15.vSplash

16.Eric’s Empire

17.Callum Rimmer

18.NotYourAverageJoe

19.Summer Day Camps MD

20.A Round Dorset Walk

21.HRNYC

22.Emarts

23.adf.lt

24.Narfstuff

25.Repair Jeans

26.PLEJ

27.Luc Espace

28.iPhone Development

29.Hillwood Residential

30.Simply Fired

英文原文:30 Creative Examples of Using Paper in Web Designs
翻译原文:30个运用纸类元素网页设计的创意实例欣赏

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/30-examples-paper-web-ui-designs.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

暴风彬彬 — Sun, 15 Mar 2009 09:55:25 +0000

花好几百买的空间，架起了自己的博客或网站，有没有想过自己的博客和网站价值是不是比自己每年的空间成本要高呢？今天彬Go要向大家推荐一个专业实时为您的网站评估价值的网站系统：Stimator。

只要在文本输入框输入要评估的网站地址，Stimator就会开始实时未提交的网站进行价值评估，货币单位是美元(默认)和欧元(可选)，呵呵，很有意思的网站，彬Go目前价值1838美元…吼吼…大家快去试试吧。

Ajax Loading进度条gif在线生成网站Preloaders.net

暴风彬彬 — Wed, 04 Mar 2009 14:20:10 +0000

在这个被Ajax技术统治的互联网时代，很多Ajax程序都会在异步读取数据的同时，显示一个正在读取或Loading的动画，今天彬Go要向大家推荐一个在线生成Loading预载动画Gif图片的网站，它不但提供了超多的Loading动画样式供你选择，而且你还可以自定义尺寸、颜色等参数，可谓方便到家，最最重要的是，PreLoaders.net提供的Loading预载动画生成服务完全免费，心动了吧.

Loading预载动画图片生成界面如下:

Loading预载动画图片生成样例：

留意更新

订阅彬Go以查看前端开发/CSS兼容性相关最新教程及资源。

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/preloaders-net-loading-gif-maker.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

彬Go » 资源

你需要了解的21个CSS惊人技巧

1.CSS跨浏览器幻灯片

2.基于CSS的图片地图

3.纯CSS无JavaScript的LightBox

4.CSS图片替换技术制作的按钮

5.用CSS实现动画导航菜单

6.用CSS创建类似树形导航菜单

7.CSS渐变文字效果

8.CSS目录菜单设计

9.使用CSS负margin创建自适应布局

10.使用CSS固定你的页脚

11.简单、灵活的CSS面包屑导航

12. 为你的博客创建时髦的引用(Pullquotes)

13.CSS实现的柱状图表

14.如何为链接列表创建块级悬停效果

15.CSS多列列表

16.用CSS Sprites技术实现日期显示

17.使用CSS美化你的日期和评论

18.使用CSS创建图片浏览器

19.创建CSS图片预载

20.从页面底部淡出效果

21.创意且很酷的CSS边框属性

留意更新

相关日志

99款高质量免费(X)HTML/CSS模板

高质量免费(X)HTML/CSS模板

01. T-20

02. Shape

03. Your Business

04.Solitude

05. Fashion Club (Registration Required)

06. O’No! Typography

07.Projection

08.Fresh Restaurant

09.Jungleland 1.0

10.SindromK

11. Environment Brand Design

12.Colourise 1.0

13.Charcoal (Registration Required)

14.H Free Software

15. Dark and Sleek Web Design

16.Photo Portfolio

17. FACING

18.Symisun

19.Luvbold

20.freetemplates

21.2 Breed

22.Extreme Georgia

23.Electronix

24.Catalogio

25.theARTofTYPE

26.Alexx C

27. Greefies

28. FreshMedia 1.0

29.Dusky

30.Creative Media

31.Package (Registration Required)

32.Internet Music

33.Typographic Times

34. Turrion

35.David Kruger

36. Clean Web 2.0 Style Web Design

37.FreshPick 1.0

38. Artificial Casting

39.Business Company

40.JavaScript Tricks

41.Treasure hunters

42.Dating & Wedding (Registration Required)

43.TEMPER

44.EXTREME UPDATES

45. Experimental

46.Maintenance

47.Ubly

48.Shalom Typo

49.Beez design

50.MiniCon

51.ec mania

52.Tool shop

53.REDISH