CSS

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

css3-教程

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

(更多…)

CSS

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

css-模板

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

(更多…)

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-实例

(更多…)

CSS, 资源

精选15个国外CSS框架

什么是css框架

实际上还是让我们从框架说起吧。
框架就是一个你可以用于你的网站项目的基本的概念上的结构体。

css框架通常只是一些css文件的集合,这些文件包括基本布局、表单样式、网格或简单结构、以及样式重置。比如:

  • typography.css 基本排版规则
  • grid.css 基于网格的布局
  • layout.css 通常的布局
  • form.css for 表单样式
  • general.css 更多通用规则

您还可以参考以下前端开发/CSS相关资源:
使用CSS3开启GPU硬件加速提升网站动画渲染性能
推荐12款可用于前端开发的免费文本编辑器
Web前端开发必备手册下载
推荐20个让你学习并精通CSS的网站
300+Jquery, CSS, MooTools 和 JS的导航菜单资源

下面一起来了解一下各种不同的CSS框架吧:

1.960 Grid System

CSS-框架-960

960网格系统是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果,基于960像素的页面宽度。它有两种类型,12和16列,他们可以独立使用或是协同使用。

(更多…)

CSS, 资源

目前比较全的CSS重设(reset)方法总结

  在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视觉效果(没有兼容性问题)。但是,我们并没有生活在这个完美的世界,现实中发生的失窃却总是恰恰相反,很多CSS样式在不同的浏览器中有着不同的解释和呈现。

  当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中,有一些都是以自己的方式去理解CSS规范,这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突,使得网页的样子在某些浏览器下能正确按照设计师的想法显示,但有些浏览器却并没有按照设计师想要的样子显示出来,这就导致浏览器的兼容性问题。更糟的是,有的浏览器完全无视CSS的一些声明和属性。

  正因为上述冲突和问题依然存在于这个”不完美的世界”,所以一些设计师想到了一种避免浏览器兼容性问题的方法,那就是CSS Reset,什么是CSS Reset?我们可以把它叫做CSS重设,也有人叫做CSS复位、默认CSS、CSS重置等。CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的规则解释CSS,这样就能避免发生这种问题。

  今天暴风彬彬总结收集了15套CSS重设实例,您可以在前端开发工作中进行参考和使用,有些是很简化的CSS Reset,有些则是非常复杂非常全面的CSS Reset,至于使用哪套,全看您的爱好或需要。

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

一.最简化的CSS Reset(重设) :

* {
      padding: 0;
      margin: 0;
}

  这是最普遍最简单的CSS重设,将所有元素的padding和margin值都设为0,可以避免一些浏览器在理解这两个属性默认值上的”分歧”。

* {
       padding: 0;
       margin: 0;
       border: 0;
}

  这是在上一个重设的基础上添加了对border属性的重设,初始值为0的确能避免一些问题。

* {
       outline: 0;
       padding: 0;
       margin: 0;
       border: 0;
}

  在前两个的基础上添加了outline属性的重设,防止一些冲突。

(更多…)

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”。如果你使用语义化方式则避免了此类问题。

(更多…)