资源

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

Lunascape-3engine

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

(更多…)

JavaScript

JavaScript编写的胸罩罩杯尺寸计算器

  JavaScript出能能为网页添加更多互动元素、为网页的视觉效果锦上添花之外,还能干些什么?今天这个答案也许会出乎你的意料,外国一位设计师Ed Spencer用JavaScript为一个内衣网站编写了胸罩罩杯尺寸计算器。我们在使用JavaScript完成日常工作之余,其实也能编写这种有趣的程序。

  只在周末放松一下。

  近来Ed Spencer为一个更具诱惑性网站中的一个工作,这家网站是专卖女性内衣的。 除了不得不一整天去看只穿内衣的女人的图片这个不值得羡慕的任务之外,Ed Spencer还被迫去写一个胸罩尺寸计算器。

  胸罩尺寸计算器背后的理论是有点神秘和神奇了。 让一个男人或野兽理解它并不容易,所以它是幸运的,Ed Spencer完全不属于那两类, 他通过了痛苦和折磨的考验节省了广大女性的麻烦。

  下面来学习学习这个JavaScript有趣实例吧…

(更多…)

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列,他们可以独立使用或是协同使用。

(更多…)

JavaScript, 资源

15个前端开发/网页设计师必备的Bookmarklet

  Bookmarklet(书签工具)是节省网页设计/前端开发时间的最佳工具。仅需点击一下,它就能提供很多信息或帮助。Bookmarklet是使用一段Javascript代码编辑而成的书签,当你在浏览器中点击已经预存的Bookmarklet(书签工具)时,其中的Javascript程序就会运行,从而起到书签相应的辅助功能。

  今天暴风彬彬要向大家推荐15个有助于网页设计/前端开发的Bookmarklet,他们的功能涵盖了:

  • 了解颜色的运用。
  • 为网页插入标尺。
  • 在未重载网页的情况下重载CSS
  • 修改网页元素等功能…

Bookmarklet使用方法:您可以用鼠标将”使用”链接拖到书签栏中(适用于FF、Chrome),在IE中可以右击”使用”链接,选择”添加到收藏夹”就可以了,记得添加以后重新命名哦。如果没有”使用”链接,那么您可以点击相应链接到该工具的作者网站寻找添加的链接。

点击这里下载适用于导入Firefox的书签文件夹。(点击FF的”书签”–>”管理书签”–>”导入&备份”–>选择导入下载的html文件即可)

提示:如果您很少或不习惯使用这种Bookmarklet工具,您也可以考虑使用Firefox的Web Developer工具栏(扩展),它包含了部分Bookmarklet的功能,也是非常棒的网页开发辅助工具。

您还可以参考以下网页设计/前端开发相关资源:
推荐12款可用于前端开发的免费文本编辑器
Web前端开发必备手册下载》 
推荐3个网页设计在线配色网站
10个非常棒的Ajax及Javascript实例资源网站
20个免费的SEO网站分析工具》 

1.WTFramework

用于学习JavaScipt框架的Bookmarklet工具

wtf-bookmarklet

  当你好奇某个网站在使用哪个JavaScript框架的时候,相比查看网页源文件,点击以下书签就能查看网站使用的什么JavaScript框架要容易得多。

(更多…)

CSS, HTML, 网页设计

中国的Web标准现状

  在十月初的时候,我有幸在中国呆上了一段时间,与Web领域的专家、学生等交流Web标准以及他们的现状。很有意思的几个礼拜,也让我大开眼界。印象最深 刻的,在中国推行Web标准的仍在少数,并且通常是孤立无援的,无法实施、无法去解释为何需要标准及标准的价值。所以这里我想写一下我所了解的情况、面对 的挑战和一些希望能有效的方法。

  如果你有任何意见建议,欢迎留言!如果你有相关内容链接,也欢迎提供,我会更新文末的资源列表。

(更多…)

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

(更多…)

网页设计, 资源

220个漂亮的免费Photoshop图层样式下载

网页设计-样式

  Photoshop图层样式一直是一种很常用的提高平面/网页设计效率的工具。今天暴风彬彬向大家推荐220个Photoshop图层样式,可以说是对网页设计有很大的帮助,可以大大提高工作效率。你可以将它们应用到标题栏、导航栏等需要各种质感的网页设计区域。其中有很多图层样式是很适合当今Web2.0时代的应用的,还等什么,快收藏起来吧!

(更多…)

CSS, HTML, JavaScript, 资源

推荐12款可用于前端开发的免费文本编辑器

  作为前端开发工程师,你有能力编写复杂的代码,但你真正需要的是你最喜爱的,可信赖的文本编辑器。你可以使用一个简单的,如微软的记事本,但往往比较有益的文字编辑器具有语法突出/高亮功能,支持多种语言,包含一个强大的查找和替换功能,和其他功能和选项,让你在编写代码的时候更加容易。

  如果你在寻找一个优秀的,免费的文本编辑器。下面收集了20款免费的文本编辑器,包含适用于Windows , Mac或Linux操作系统的。一句话,你能找到你想要的文本编辑器。

您还可以参考以下前端开发相关资源:
15个前端开发/网页设计师必备的Bookmarklet
精选15个国外CSS框架》 
Web前端开发必备手册下载》 
10个非常棒的Ajax及Javascript实例资源网站》 

1.Bluefish Editor

(Mac, Linux)

css-文本-编辑器

  Bluefish Editor 是一个面向程序员和网页设计师、强大开源的文本编辑器。作为一种快速,轻巧的文本编辑器,它支持500多种文件格式。它有一个内置的函数参考浏览器( PHP,Python,CSS和HTML ) ,这样你可以快速地了解特别的语法。

(更多…)

CSS, HTML, JavaScript, 资源

Web前端开发必备手册下载

前端开发-手册

今天暴风彬彬要向大家推荐一些前端开发时必备的参考手册,它们能够让你在开发页面的时候查询一些必要的语法。这些手册(Cheat sheet)包括目前比较流行的编程语言,比如jQuery, Mootools, Prototype, CSS,HTML,Django等…Cheat sheet这个词组如果直译成中文,意思大概是”作弊小抄”之类的词,但Cheat sheet这个词的实际意思已经并非是贬义了,虽然中文还没有实际的对应词能够很好的翻译”Cheat sheet”,但大致意思就是用于参考的简洁手册,就像是考试作弊时将必备的数学公式等写在一张纸上,以便考试时查询。

(更多…)