CSS

CSS最佳实践:为今后的项目制作空白CSS模板文件

css-模板

如果你曾经收藏过许多关于CSS的最佳实践但还没开始利用它们,那么这篇文章将帮助你制作一个很好且很有组织的CSS文件来应用于一些CSS最佳实践。在这里我将为为我的下一个项目制作一个基本的CSS模板文件。使用标准的重设(Reset)方法,定义一些基本的方便的类,命名一些常见的页面区域等…

(更多…)

网页设计, 资源

精选2008年最佳设计素材资源&灵感

  2008年已经接近尾声,暴风彬彬今天将同大家一起来回顾今年的一些网页设计共享资源,在这里我收集了一些2008年我很喜欢的免费资源。在这篇文章中您将看到涵盖网页设计图标素材、Wordpress主题、网页设计字体、网页设计材质素材乃至生成背景图案的网站应用程序的一些不错的资源,它们有的能对你的网站项目有所帮助,有的则会给你带来更多设计灵感。还等什么,继续往下看吧…

您还可以参考以下网页设计相关资源:
220个漂亮的免费Photoshop图层样式下载
推荐3个网页设计在线配色网站
精选30个免费高品质PSD源文件
网页设计必备的10套漂亮图标集》 

BB 免费字体:Conglomerfont

一款漂亮的免费英文字体。

英文字体-下载

免费图标: Function Icon Set

包含128个高质量图标的网页设计图标素材集。

网页设计-图标
(更多…)

CSS, HTML

简洁纯净的CSS表单设计实例

  很多CSS爱好者不喜欢HTML表格,尤其是在制作表单的时候,虽然现在已经是XHTML+CSS的年代,但表单的设计大多还在采用table来布局。那么,有没有更好的使用纯语义化XHTML+CSS设计表单方法呢?今天让我们一起来尝试这种更符合语义化的方法来代替Table嵌套的表单元素吧!

  在这里暴风彬彬要说,并不是要完全摒弃table的使用,它有它的语义化布局作用,尤其是在存储数据的时候。我在大多数情况下会使用纯CSS来设计表单,但是,我也很喜欢表格,只要我们能在正确的地方使用正确的元素就可以了,不要太过追求所谓的DIV+CSS。直接使用table要比使用CSS来”模拟”(display:table;)表格更方便更快速。下面暴风彬彬将分享一种使用纯CSS代替HTML表格元素设计表单的方法。

您还可以参考以下CSS相关教程及资源:
使用CSS创建三列固定布局结构
使用CSS完美实现垂直居中的方法
通过不同的CSS设计字体大小来提高用户体验
可用性研究:为文字链接扩大可点击区域》 

CSS-表单

(更多…)

JavaScript, 资源

10种JavaScript特效实例让你的网站更吸引人

  今天的话题是如何改进自己网站的界面或提高网站的视觉体验,从而让用户记忆犹新。

  我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预置好的脚本或那种从头开始开发的创建者。这篇文章适合那些打算提高工作效率或不愿意从头开发脚本的人阅读。

  这里收集了10种强大的且容易上手的JavaScript特效来改进您的网页站界面,从而得到更多的用户体验。这10种javaScript特效回味你的网站带来意想不到的视觉盛宴,而且安装和使用都比较容易。

您还可以参考以下JavaScript/Ajax相关教程及资源:
10个非常棒的Ajax及Javascript实例资源网站
12种Javascript解决常见浏览器兼容问题的方法
300+Jquery, CSS, MooTools 和 JS的导航菜单资源》 

1.GreyBox

JavaScript-greybox

  GreyBox 允许你以模式窗口的形式运行其它网站(类似于弹出式窗口,但又不运行新的浏览器窗口).如果你的网站上有一些其他网站的导出链接,但你又不想让你的用户离开你的网站或不想让他们打开另一个浏览器窗口的话,这真的是一个很好的解决方案。使用GreyBox 非常简单。

(更多…)

CSS, JavaScript

3种修复IE6 PNG图片透明度问题的方法

  当我在自己的网页设计项目中尝试使用据有透明度的PNG图片的各种方法时,我开始寻找各种能让PNG图片在IE6下正常工作的方法。我们都知道,IE6对于PNG的不透明度支持的并不好。暴风彬彬曾经发表过CSS完美实现垂直居中的方法,如果您有兴趣也可以参考。

1..htc文件的修复方法

下载.htc文件,然后指定你希望实现PNG支持的那个元素/标签。想了解更多的话,这有在线Demo安装说明.(都是英文)

(更多…)

CSS

使用CSS为图片添加更多趣味的5种方法

  今天暴风彬彬将向大家分享一些为你平淡乏味的图片添加更多趣味情调的简单技巧。使用Photoshop为每个图片添加某种样式虽然可行,但会是相当乏味且困难的长久工作。下面要介绍的CSS技巧将帮助你从痛苦中解脱出来!如果你也有自己独到的CSS技巧,希望能一同分享

  彬Go会经常更新前端开发/CSS技巧等相关技术及教程文章,欢迎订阅本博客来及时浏览本博客的最新教程及资源。

阴影效果

通过使用带有一些padding之的背景图来添加阴影效果。

效果预览

(更多…)

CSS, 网页设计

2008年国外50个最佳CSS设计欣赏

  今天,暴风彬彬将向大家推荐50个2008年的最佳CSS网站设计,这50个CSS网站是由WebDesignerWall评选出来的,很具参考价值。我们在欣赏的同时,也能从中吸取很多灵感,也能从它们的源代码中学习更高级的CSS技术。今年,越来越多的设计师开始使用超大的背景图片技术和一些JavaScript框架(如jQuery及MooTools)来提高用户体验。还有一些设计师将Flash和CSS混合使用。也许我们能从中发现2009年的新网页设计趋势?

您还可以参考以下CSS相关资源:

精选15个国外CSS框架
推荐20个让你学习并精通CSS的网站
20+漂亮的网站分类存档设计赏析(下)
20+漂亮的网站分类存档设计赏析(上)
推荐80个使用超大背景图片的网站设计》 

Let It Bleed

巨大而醒目的图片使得这个网站鹤立鸡群。

2009-网页设计-趋势

(更多…)

CSS

使用CSS创建三列固定布局结构

  今天暴风彬彬将向大家讲解如何通过设计一个HTML/CSS的基本结构,来创造一个简单且常用的三列式固定页面布局。

  我的讲解会包含一些标准元素,如logo、顶栏、导航栏、文本区域、用于文章分类的中列和用于插入Google Adsense 120X600广告的右侧列。所以您完全可以将这些代码快速拷贝并重新利用在自己的前端开发项目中。

HTML结构

下图说明了我在页面中添加的HTML/CSS元素。

网站-三列布局-实例

  这个结构其实已经可以直接使用了。您只需再重新定义字体、背景颜色、每个层和HTML标签的字体风格和一些其他自定义类。

(更多…)

CSS, 资源

精选30个优秀的CSS技术和实例

  今天,暴风彬彬为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集、阴影效果、可扩展按钮、菜单等…这些实例都是使用纯CSS和HTML实现的。

  单击每个实例的标题可以被转向到该技术实例的相关教程或说明页面(英文),单击每个实例的图片截图可以直接跳转到相应实例的Demo页面。

  彬Go会经常更新前端开发/CSS技巧等相关技术及教程文章,欢迎订阅本博客来及时浏览本博客的最新教程及资源。

1.Hoverbox 图片集

一个纯净的基于CSS的图片集,鼠标悬停缩略图就会显示放大效果。

CSS-实例

(更多…)

资源

Lunascape:将FireFox、Safari和IE合为一体的浏览器

Lunascape-3engine

  作为前端开发/网页设计师,电脑中总是安装着各种不同内核渲染引擎的浏览器,如IE(Internet Explorer)、FireFox、Safari、opera、Chrome等,在编写网页时要经常在不同的浏览器中进行测试,以便能在这些浏览器中有相同的显示效果。暴风彬彬曾经介绍过整合了IE5、IE6、IE7和IE8的浏览器IETester。今天暴风彬彬向大家推荐一款将FireFox、Safari和IE三大浏览器引擎整合在一起的浏览器:lunascape

(更多…)