Archive for the ‘HTML/CSS’ Category

CSS Nuggets

December 1, 2009 by SLJ | Category:HTML/CSS | No Comment 954

Css Nuggets 是一个CSS3指导的趣味性的ppt,建议前端开发人士学习研究。

转载自:唯他视觉 http://www.vitavisual.com/archives/css-nuggets.html

20个Web设计师必要的Firefox插件

November 17, 2009 by SLJ | Category:HTML/CSS | No Comment 1,485

当下Mozilla Firefox 是主流浏览器之一, 尤其在Web设计人员中广泛使用.

在茫茫的插件列表中,有一些很卓越的插件能够提高你的工作效率

1. Web Developer

Web Developer
More »

CSS在Internet Explorer 6, 7 和8中的差别

October 21, 2009 by SLJ | Category:HTML/CSS | 1 Comment 1,207

关于浏览器的最离奇的统计结果之一就是Internet Explorer 版本6,7和8共存。截至本文,Internet Explorer各个版本总共占据了大约65%的市场份额。在网站开发社区,这个数字要小很多,统计显示大概只有40%

ie

More »

揭开iPhone版Google,Gmail,Google Reader神秘面纱的方法

October 11, 2009 by SLJ | Category:HTML/CSS, iPhone/Android | No Comment 1,649

今晚做了一些有意义的事:

用iPod Touch已有两月有余,感谢它为我带来很便捷的网络体验和功能。

在使用的两个月来,所上的网站几乎99%能显示正常且布局正常(无Flash插件是缺憾),其中让我觉得最神奇的、体验最棒的页面就是GOOGLE的一系列页面。其中包括Google Reader和Gmail。

iphone-google1 iphone-google2

More »

中文字体的选择

by 龙 | Category:HTML/CSS | 2 Comments 397

对设计师来说,中文字体的确不是那么好选择.下面列出几个中文字体的看点特点.
宋体:风格典雅、工整、严肃、大方,延展出“标宋、书宋、大宋、中宋、仿宋、细仿宋”等,种类繁多,差别不大。常用于正文。

黑体:朴素大方、笔画单纯、结构严谨、引人注目,具有浑厚凝重的气度,是印刷界中较为稳重、醒目的标题字,实用性很强。由不同 的粗细延展出“中黑、平黑、细黑”等字体。常用于内文标题、封面和广告设计,具有现代感。

宋体和黑体就像是英文中的衬线体(Serif)和非衬线体/无衬线体(Sans-serif)
永远是最基本的印刷字体。如果在课件设计中对字体没有更好的把握,直接用他们就好。

隶书:字形略扁近乎于方,整篇看来具有流动性,笔画生动,造型优美。用来做标题还不错。用来做投影时慎用。

楷体:古朴秀美、历史悠久,字体温和。好像现在的儿童读物大多用楷体。书法界中的楷体气象万千,几乎每位书法大家的楷体都独具个性。但发展到电脑里的字体,呆板啊。不过用来点缀还好,做投影时慎用。

圆体:结构平稳,笔形柔和,空隙均匀,起落笔及拐角均是圆形,很是秀气。总感觉但总感觉软绵绵的没有力度,不过名片,正文偶尔可以适用。较粗的圆体具有亲和力,“细圆”也较方整精致。在食品、药品类物品上也能常见到它。

字体是有生命的,除了我们常用的字体,可以下载一些多样的字体,勇于尝试才会有新的灵感,为设计博彩.

关于网页设计的一些好收藏

October 10, 2009 by SLJ | Category:Design, HTML/CSS | No Comment 1,555

今天在 Six Revisions 上看到了作者又更新了本次的Favorites,这一次更新我觉得与我关系特别密切,因为有很多东西都是近期所研究,有的也在奇亚上发布过了。所以本文转载翻译并作收藏。

Favorites from the Feeds is a Six Revisions series that highlights notable design and development articles, tutorials, tools, and downloadable resources from my RSS feeds. In this installment, you’ll see some of my favorite Photoshop tutorials from last week, a great article on Opera’s site on grid design, and the other stuff you normally see on FFF.

More »

精选15个国外CSS框架

October 3, 2009 by SLJ | Category:HTML/CSS | No Comment 947

什么是css框架

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

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

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

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

1.960 Grid System

CSS-框架-960

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

  More »

[译]960网格系统

by SLJ | Category:HTML/CSS | No Comment 762

今天介绍一个网页辅助设计框架,960 Grid System。什么是960 Grid System,简单的来说,是用来辅助设计师快速的创建网页原型的辅助系统,960这里是网页的横向尺寸,960px,为什么是960这个数字,而不是1000或者900?

960是1024之下,最灵活的尺寸,而且恰好是1024分辨率下最合适的尺寸,这些条件决定了960成了目前设计中最完美的尺寸。

基本知识介绍完毕,因为有不少人和我一样,乍看960 Grid System,都以为会是个CSS framework,但是它不是。他是一个非常精巧简单的草稿本。就像我们小时候练字用的米字簿一样。

pfvyzisv

现在是不是好理解,什么是Grid System,作者提供给我们的是什么东西了吧。真的是非常巧思的一个东西,怪的有人说数学之美有的时候是那么神奇。就像黄金分隔那样,合适的比例,合适的间隔带来的是稳定而且非常不错的效果输出。

如果你也有兴趣的话,点这里下载。

更新:

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

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

960-grid-system

正如你们所知,我最近正为一个CSS框架(此框架是应本人最近的个人的专项需求所开发的)建一个站点。由于一直没想到更好的名字,再说960这个数字凑成的logo还不错,所以简单的叫做960 网格系统(960 Grid System)。

这很有趣,因为我只是在星期天网上临睡前上tweet发了一条关于960网格系统的信息,然后就收到很多评论,甚至收到了很多咨询相关信息的邮件。

应该特别指出的是,这个180KB大小的下载包,不仅仅是CSS框架,它包含了一下文件:可打印的缩略图表,针对Firewofks,Phototshop,OmniGraffle 和Vision的模板文件,CSS文件,HTML文件。

960.css文件经压缩后大小只有4KB。

首先,我写本CSS框 架自是为了我自己的项目,同时只是为了过把设计的瘾。我十分清楚并不是所有人都会喜欢它。有这么句老话——你要么满足全部人某一时段的需求,要么满足一部 分人的永远的需求。我并不打算那样做。我只是想将我过去一年多所关注的网格方面的东西跟大家分享。假如有人能因此而有所收获,那是件好事。

好了,废话少说,继续往下看吧。

More »

[转]12个对网页设计师非常有用的图片优化工具

October 1, 2009 by SLJ | Category:Design, HTML/CSS | No Comment 324

图片非常重要,它们可以让你的页面更好看,更引人注目。但是,高质量和漂亮的图片常常会很大,它们会让页面加载变慢并消耗更多带宽。所以我们,这些设计师应该优化图片以使其体积更小但质量更高!
事实上有很多有用的图片优化工具,它们可以帮助我们优化并减小图片的文件尺寸。这些有用的应用包括web应用和桌面应用。

基于web的图片优化工具

1. Smush.it

Smush.it是一个很流行的图片优化工具,它可以既减小图形文件的大小又能保持其质量,也就是我们称之为“无损(lossless)”图片压缩!你可以通过网站来运行Smush.it (一次最多5张图片)或者通过Firefox的YSlow扩展。

smush-it

2. Dynamic Drive在线图片优化器

该在线图片优化器允许你优化不同的文件格式,比如GIF、JPG和PNG。你既可以从本机上传图片,也可以像Smush.it那样粘贴图片的URL。该工具可以优化并转换你的图片为不同的文件类型。该工具的限制是每次一张图片,每张图片不大于200K。

dynamic-drive-online-image-optimizer

More »

YUI 2.8.0 发布

September 18, 2009 by SLJ | Category:HTML/CSS, Javascript, Web Structure | No Comment 1,364

这次发布共增加了 4 个组件:

1. Storage Utility
这个组件实现了本地存储的功能,提供了一个HTML5风格的借口,你可以利用这个接口进行本地存储,它提供三种解决方案:HTML5 存储、利用Google Gears存储 和 利用 Flash Share Object 存储。随着支持 HTML5 标准的浏览器越来越多,这三种存储方案可以覆盖大部分的用户了。

2. SWFStore Utility
这个组件为上个组件 Storage Utility 提供 Flash Share Object 存储的功能,并且包括了一个利用 Flash Share Object 存储文本的 JavaScript API 。它对存储的键值对 支持即时的 gzip 压缩,这可以让你不会很容易超过 100KB 的 Flash 默认的本地存储上限(当然,如果用户同意的话这个上限是可以更改的) ,可以有效地帮助你节省空间。
More »

↑ Top