标签归档:HTML

分享一下我做iPhone图标设计时使用的辅助工具

分享一下我做iPhone图标设计时使用的辅助工具 Icon Previewer

因为图片在iPhone/iPad的显示效果与PC机相比经常会有一些差异(颜色、大小),所以图标设计完后习惯上我都会放到真机上看看效果,再对比一下做做修改。刚开始的时候每次修改图标都要build一次项目,然后是一次又一次的漫长等待。。。于是便诞生了这个在iPhone上快速预览图标的东西。

介绍一下Icon Previewer的结构:

iconpv
-Icon.png
-Icon@2x.png
-main-bg@2x.png
-index.html

下载地址在这里这里

预览

 

使用时请自行替换icon.png和icon@2x.png成你的项目图标,默认Size与iPhone App的图标一直,分别是57×57和114×114
然后在iPhone上打开index.html,怎么打开?up到自己的服务器或者自己架一个,然后在safari输入你的server地址…

Safari默认的上下两根导航条很影响预览的效果,如果你不想看见他们的话(譬如我…)需要点一下下边的收藏按钮,选择添加至主屏幕

然后iPhone上就会多了个名为Icon PV的图标,点击打开它后就是这个样子

Safari的两根menu栏就不见啦,点一下右上角绿色的preview按钮就可以看到最终效果了

界面上My App的位置就是你刚才替换掉的Icon@2x.png,每次修改好图标后点击上边的Refresh按钮就可以预览新图标了。

PS:预览的是Retina的效果,iPhone4以下的版本还没测试,有bug或效果不佳的话请反馈给我
PS2:我想做成online版的previewer,这样使用时就省去了架服务器的麻烦,不过后台的东西我不太熟悉,如果有PHPer觉得这工具有用并且有兴趣开发online版的话请联系我 ceilwoo#gmail.com

 

Icon Previewer provide an easy way to preview icons on the iPhone,it’s base on HTML & CSS.
Download Demo
How to use:
1. upload the folder to your server
2. replace the Icon.png and Icon@2x.png as your project icon.
3. open icon previewer like http://xxxx/iconpv in the mobile safari.
4. tap the fav button and save to home screen.
5. tap the webapp “Icon PV” on the iPhone to preview your icon.

I want to develop an online version, then ppl can drag their icons to “Icon PV” and preview on the iphone/ipad at once, but im not good at the backend language, if u are a PHPer, and interest on “Icon PV” online version, contact me plz [ceilwoo#gmail.com], im eager for ur help T-T.

Custom width button with CSS

————————————————
可以用border-image来实现,这个方法不用了
5/9/2011@ceil
———————————————–

今天有人质疑我能否用一张简单的图片实现自定义长度的button with Html&CSS
这个对于万能的CSS来说怎么可能会实现不了呢
所以就做了这个demo

demo地址在:http://www.ceilwoo.com/lab/custom-width-button/

简单的说就是用一张图片实现button的左、中(拉伸)、右部分
左和右用定width + 背景实现
中间需要拉伸的部分把img拉长,隐去左边和右边部分就实现了

优点就是切图方便很多,只要一张正常的button图片就可以实现,不用像平常一样把button的图片切成几块再用css拼起来
缺点就是一个按钮会多一个http请求(用了一个img标签)

PS: css随便写,无视吧

用CSS截断过长数据

总结了一下大概有以下几种:

1.定宽截断

.demobox{
  width:200px;
  overflow:hidden;
  height:2em;
  line-height:2em;
  word-break:break-all;
  text-overflow:ellipsis; /* IE中截断后加上... */
  white-space:nowrap;     /* 不换行 */
}

效果:
css-cut-01
如果不考虑长字符串的情况那么只需要 overflow:hidden和height属性就可以了,把换行的数据都hidden掉,间接实现截断效果,嘿嘿。

PS: FF中去掉white-space:nowrap属性就不会出现截断半个中文字的情况了

2.自适应宽度截断

如果内容有长字符串或者是加了white-space:nowrap的话,那么是会把外部容器撑破的,于是就不能自适应宽度截断了。

这里我利用了一下table的table-layout:fixed来间接实现。table在fixed模式中,td(或th)不会因为里面内容的大小而改变大小。[Gmail和QQmail的邮件列表都是采用这种方法 :D]

先简单看一下效果:

css-cut-02
table用了fixed模式并且设置了width:100%,那么table以及td的宽度就只有200px了,溢出的内容用overflow:hidden隐藏掉,于是便实现了自适应宽度的截断效果。
当然这方法也是有弊端的,首先为了实现效果把html结构弄复杂了,其次是(看下图)
css-cut-03

截断的单元格与旁边的数据贴得太近了,并且padding-right是控制不了的。Gmail用了个十分懒的方法,在两个td中间塞多一个空白的td把两列数据分开,看起来会美观些。而QQmail是在次列td里面放置一个div元素,设置适当的margin把截断的数据撑开,让数据看起来不会连成一块。我决定塞个&nbsp进去好了,省事 😀

Tui css framework is available.

为了偷懒加快工作效率,早在半年前我就决定写一个CSS框架,到今天….它终于可以用了!

恰好公司正在折腾web栅格布局 ,所以也顺便一起整了。

说起CSS框架常见的有倡导栅格布局的 960grid 以及taobao的grid css(不知正名为何),还有特立独行的YUI(YUI中用em定宽以及负margin的使用方法十分令偶向往)。

于是综合了各框架的一些设计理念及实际情况,在YUI基础上修改开发了自用css框架tui….

主要是重写了YUI中的一些宽度数值,去掉一些不常用的css,添加一些ooxx。

目前TUI的功能有

  • 支持页面宽度:自适应、950px、974px、1190px
  • 左右侧边栏宽度:150px、190px、230px、270px、310px
  • 百分比布局:与YUI3.0相同(修改中)
  • 简单的css-reset

YUI中font-size是设置成13px的,印象中中文宋体在12px、14px中的显示效果会比较好。所以像素级测试了一下。

发现宋体在12px、13px的时候其实都是一样大的。唯一的区别是的13px的字宽比12px大1px,说白了就是字与字间多1px的间隔。并且相比13px,我觉得12px太挤了,看起来有点视觉疲劳。

于是Tui中沿用YUI的13px设定。(只在vista、win7中测试,不知未开启clearType的机子会咋样)

同学们到这里可以查看简单的Demo   <-[2010/6/16失效]

模块化CSS设计(一) – 图标

前言:

最近半年多的时间里我都在参与TAPD项目的设计与前端开发。之所以把设计和前端开发一起承担主要是考虑到一种较为理想的设计流程,在进行设觉设计 的同时把Html、CSS的实现都考虑进去,这样无论是设计还是代码都是统一的设计理念和风格,便于维护和后续开发。后来发现TAPD的规模远大于自己所 想,交互研究、视觉设计、代码设计每一部分都是一份庞大的工作,每个页面的设计与实现都没有太多的时间仔细琢磨…还好后期英明的Boss把设觉与交互 设计部分交给了其他同事,我才得以对前端代码仔细研究,用了一个月的时间把所有Html与CSS进行重构。

本系列文章将跟大家分享我在TAPD项目上关于CSS架构设计的一些心得,譬如命名、灵活性等,不会涉及太多CSS技巧。

由于是想到什么就写什么,各章节之间没有什么必然的联系,希望大家看后有能有所收获。m(_ _)m

–  by ceil  2009/5/11

模块化CSS设计(一) --- 图标

一般来说页面上的图标会用下边的两种形式撰写:

<a href=”#” title=”Edit”><img src=”[url]” alt=”Edit” /></a>

<a href=”#” class=”btn_edit” title=”Edit”>Edit</a>

前者:直接插入图标的图片,好处是该按钮是inline-block,可以很方便的插入到页面任何地方。譬如说放到一段文字的中间。

Example_01
Example_01

后者:用CSS背景定位的把图标显示出来,并且把Edit文字隐去,相比前者降低了表现与逻辑的耦合性,更好的Html语义化。不过为了让图标有高度和宽度,一般情况会 把<a>加上display:block,然后用background-image把图标放进去。那么弊端也是显而易见的,假设我需要把一个 图标插入到一句话的中间,那么由于display:block的存在会直接导致图标与其他文字换行显示。

Example_02
Example_02

综合两者的优点,我在TAPD中是这么定义一个图标的:

<a href=”#” class=”tag_bug”><i>Bug</i></a>

CSS
CSS

这样TAPD的图标的不但具有<img>形式的灵活性,同时减少耦合性、更好SEO、更好的HTML语义化…etc

(因为要兼顾IE6/7/8、Firefox、Safari、Chrome中display:inline-block的实现,所以迫不得已要额外加一个<i>标签用于将文字隐藏。)

按照yahoo的rules for high performance web sites的原则,应当减少Client与Server端间的HTTP请求次数。

我还用到CSS Sprite,将多张图标图片组装成单独的一张图片,用background-position显示不同的图标

CSS Sprite
CSS Sprite

也许有人会问:

<a class=”btn_edit”></a>

这么写不会更简单么?并且可以减少html和CSS代码?何必要写成<a class=”btn_edit”><i>Edit</i></a>

其实我坚持在标签里写文字一方面是基于SEO的考虑,另外还考虑到一种情况,假设突然有一天我们的客户觉得编辑按钮图标太糟糕了!要求直接直接用文字。那么我稍微修改一下CSS文件便可以巧妙的把原来的图标变成一个文字链接了。又或者是客户由于某些原因访问不了TAPD的CSS文件,标签里没有文字的会变得一片空白,无法使用。

Example_04
Example_04

另外由于IE6对透明背景的PNG图片支持不好,所以大部分不规则图标我都是用gif格式。但是有时候gif的256色不能满足设计师的设计要求(设计师A:俺的作品多姿多彩,256色怎么够用!!)。

所以在CSS sprite的时候我是合成了两张图片,一张对色彩要求不高并且需要透明背景的GIF图片和一张对色彩要求高的PNG图片。