网页设计

使用Photoshop+960 Grid System模板进行网页设计

960-grid-system-photoshop

前几天彬Go和大家一起讨论了960 Grid System这个CSS网格系统框架的基本原理和使用方法。今天,暴风彬彬将教大家使用Photoshop结合960 Grid System模板来设计一个真正符合960网格系统的网页效果图。

(更多…)

CSS

960 Grid System 基本原理及使用方法

960-网格系统

由于一些读者对于960 Grid System CSS Framework的原理和使用方法比较感兴趣,暴风彬彬今天将和大家一同分享这篇关于960 grid CSS Framework的基本原理和简单的使用方法。

关于CSS框架其实一直是一个比较热门且很有争议的话题,的确,国内的一些前端er们越来越关注CSS框架,并都开始尝试使用,觉得CSS框架能够节省更多的开发时间,显著提高工作效率。当然,还有很多人持相反意见,认为CSS并没有这么高级以至于要涉及到框架!我记得在cnBeta上曾经有位程序员讽刺道:”这年头,连CSS都有框架了?!”。今天暴风彬彬并不是要向大家介绍什么是CSS框架,也不会介绍各种CSS框架的优缺点。只是要讲解一下目前在国外很热门的一个框架,严格讲是网格系统,那就是960 Grid System。通过这篇教程你会知道使用960框架之后,你的开发工作会更快的开展。
(更多…)

CSS

你应当了解的5个CSS3新技术

css3-教程

CSS是众所周知且应用广泛的网站样式语言,在它的版本三(CSS3)计划中,新增了一些能够节省时间的特性。尽管只有当前最新了浏览器版本才能支持这些效果,但了解它们还是必须且很有趣味性的。暴风彬彬将在这篇文章向大家展示CSS中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小。

(更多…)

网页设计

浅谈网页设计中的黄金分割

网页设计-黄金分割数学是优美的. 听上去有点奇怪? 当我第一次开始设计的时候,我确信如此。数学如此刻板乏味。你可能会惊讶的发现,最美观的设计,艺术作品,物体,甚至人都有数学上的共同点。尤其是黄金分割,也被称为神之比例,希腊字母表示其为 Φ (phi). 本教程会剖析一个网站的布局,以及如何对其黄金分割。

(更多…)

CSS

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

css-模板

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

(更多…)

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-表单

(更多…)

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, 资源

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

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

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

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

1.Hoverbox 图片集

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

CSS-实例

(更多…)

CSS

CSS代码命名惯例语义化的方法

  CSS代码的命名惯例一直是大家热门讨论的话题。今天暴风彬彬想通过分析一个流行三栏布局中的必要元素,来为大家讲解关于使用语义化方法替代结构化方法来命名CSS类的建议和指导。

您还可以参考彬Go的相关文章:
整理及优化CSS代码的7个原则
10个CSS简写技巧让你永远受用
DIV+CSS网页布局常用的一些基础知识整理》 

CSS类命名的语义化VS结构化方式

  一般而言,CSS类名的语义化声明方式应当考虑你的页面中某个相对元素的”用意”,独立于它的”定位”或确切的特性(结构化方式)。像left-bar, red-text, small-title…这些都属于结构化定义的例子。

让我们看看下面这个例子:

CSS-语义化-结构化

  …而现在我们想把页面中的元素调换一下位置,如果你使用的是结构化方式(1),那么你就要把所有CSS类名重新进行定义,因为它们的位置变了。在布局(3)中,我们看到元素都倒转了: right-bar 现在成了 “left-bar”,而 left-content 成了 “right-content”。如果你使用语义化方式则避免了此类问题。

(更多…)