CSS

5步让你的CSS样式表成功减肥

css-压缩-减肥

你有没有觉得你的CSS样式表文件过于臃肿?其实如果你注意并培养一些比较好的CSS书写习惯,我想你的CSS样式表过于”肥胖”的问题会得到很好的改善的。来看看下面的简单5步吧,掌握之后你便能立即为你的CSS样式表修身了。
(更多…)

CSS

提升你设计水平的CSS3新技术

CSS3新技术

前些日子在SmashingMagazine看到一篇关于CSS3新技术不错的文章,它详细介绍了CSS3的新特性和它的使用方法,它包括:浏览器专有属性、选择器(属性选择器、连字符、伪类、伪元素)、RGBA和透明度属性、多栏布局、多背景图、Word Wrap、文字阴影、CSS圆角、边框图片、盒阴影、盒尺寸、媒体查询、语音,并详细说明了每个新技术目前有哪些浏览器兼容。彬Go本想将本文翻译成中文版和大家分享,但发现已有国人完成翻译,所以就偷个小懒,转载一下人家的翻译,在此感谢前端观察的博主辛苦翻译本文,为大家贡献了如此珍贵的学习资料。

如果你热爱前端开发,你对CSS感兴趣,那么你肯定不可错过这篇文章。
(更多…)

CSS, HTML

学无止境的CSS(xHTML+CSS技巧教程资源大全)

学无止境的CSS(xHTML+CSS技巧教程资源大全)

今天在看我博客的访问统计的时候,看到了一个比较熟悉的网址,就是帕兰映像的博客,遂点击链接过去看看,结果发现了一个非常非常值得收藏的文章,这篇文章总结了许许多多CSS(xHTML+CSS或称DIV+CSS)的技巧、教程及资源。其中也有很多值得我学习的知识,相信这些资源对大家来说也是非常值得收藏的,看过之后收获是一定滴!所以转载到自己的博客上跟大家分享一下,在这里先感谢帕兰映像的辛苦总结。值得高兴的是,这篇文章中也包含了很多彬Go以前发表过的一些CSS教程或资源等。各位读者瞪大眼睛准备好哦,以下是原文:

(更多…)

CSS, 网页设计

CSS Sprites(CSS图像拼合技术)教程、工具集合

css-sprites-教程

今天彬Go将向大家推荐目前为止最全的CSS Sprites(CSS图像拼合技术)技巧、工具和教程集合,该集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献。CSS Sprites技术在国外并不是什么新技术,只不过近两年(尤其08年开始)中国开始流行这个词,大家也开始越来越关注CSS Sprites这个没有标准中文翻译的技术。CSS Sprites这个词如果直译的话是”CSS精灵”的意思,它显然无法表达其技术的内涵。通常我们把它叫做CSS图像拼合技术,当然还有人把CSS Sprites叫做”CSS贴图定位”。无论怎么叫,它的技术核心是不变的,下面让我们来了解一下这篇CSS Sprites(CSS图像拼合技术)技巧、工具和教程集合吧。
(更多…)

CSS, HTML

43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程

div+css-教程

在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的,很明显如果单从字面上去理解,DIV+CSS的网页就要全都是div,很明显是无法达到语义化标准的。彬Go也希望通过博客让所有读者正视代码语义化的重要性,请把”DIV+CSS”这个词从脑子中删除,用”xHTML+CSS”替代吧!

今天彬Go将向大家推荐43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程,在国外也可以叫做PSD2XHTML。如果你是以为网页设计师,可能会对将自己的效果图实现成语义化的xHTML页面感到头痛,还有一些CSS初学者对于xHTML+CSS处于懵懂状态,希望大家通过这43个”DIV+CSS”实例教程学习到语义化xHTML+CSS布局的精髓,即使你已经成为高手,我也相信其中有你值得学习的地方。
(更多…)

网页设计

网页设计趋势之:星空和极光效果

网页设计-趋势-教程

今天彬Go将和大家一同分享Web设计新趋势中的又一新颖元素,那就是星空和极光效果,首先引领这个网页设计趋势的时苹果Leopard OSX,它的极光/星空效果让人眼前一亮且深入人心,深深的吸引了大量从事Web设计工作的设计师们的眼球。如果将这种简单的星空或极光设计效果添加到你的网站、博客的背景图或页头中,马上会令富有新的生命力!

下面我们来一起欣赏一下彬Go为大家收集的20个使用了星空/极光效果的网站吧,最后还会为大家加提供一些该效果相关的网页设计教程。
(更多…)

CSS, 网页设计, 资源

30个基于CSS的导航和按钮优秀设计教程

css-导航菜单-教程

在当今标准的Web设计中,CSS是最重要的组成部分。为了让大家更好的理解如何通过CSS来设计,彬Go为大家收集了30个基于CSS的导航菜单和按钮的CSS设计教程,通过这些教程,您可以在您今后的项目中更方便的直接使用或参考,当然也可以用作平时的实践练习。希望大家能从中学到些什么。
(更多…)

CSS, HTML

为你的有序列表添加个性样式

在默认情况下,大多数浏览器都会将有序列表中的数字序列的与其列表文字内容显示为相同的字体。这篇快速教程将教你如何使用有序列表(ol)和段落(p)来设计华丽的列表数字。

预览

基本上讲,你需要做的只是为ol元素定义Georgia字体,然后为p元素(在ol内)定义Arial字体。

CSS-有序列表

(更多…)

CSS

960网格系统

随着CSS 框架的流行升温不断,前端er们也越来越关注CSS框架的使用,国内也有很多关于各种CSS框架的使用技巧和教程,彬Go一直关注着各种CSS框架,尤其是960 grid system(960网格系统),由于国内关于960网格系统的文章并不多,所以彬Go会尽量多的去帮助大家翻译和收集一些相关的教程和技巧,今天这篇关于960 grid system的文章转自译言,简单介绍了960网格系统(960 Grid System)问世的过程及960网格系统的特性及使用方法等。希望对大家有所帮助。同时彬Go在此祝大家Happy 牛 year!

更新:

Bryan Veloso 在最近在他重新发布的网站Avalonstar 上应用了960网格系统(960 Grid System)中的16列的PS模板开发。

在这同时感谢他给960.gs提供了网站的截图以供使用。

960-grid-system

(更多…)

网页设计

网页设计趋势之:”勾引”用户的按钮

今天彬Go将和大家一起讨论网页设计趋势中很重要的环节,那就是”勾引”用户的按钮。所谓”勾引”用户的按钮,其实对于Web设计师来说,就是如何设计出一个能让大多来访的用户都有点击欲望的按钮。通常这些按钮被链接到下载注册购买等功能。

国外设计师 Seth Godin 将按钮比喻成香蕉,而你的用户则会被比喻成可爱的小猴子。我们的目标是能够让小猴子在3秒之内快速找到它们想要的香蕉(也就是在用户放弃并离开你的网站之前)。强迫你自己在设计每个网页的时候都要遵循一个且仅有一个的目标,那就是”香蕉”!让它更大、更醒目、更美观!

网页-按钮-设计

这篇文章将和大家一起讨论如何设计完美”勾引”用户点击的按钮并会为大家展示30个不错的网页按钮设计实例
(更多…)