Shawn He

icon fonts if IE photoshop PS 响应式 Tools Designer design Font 前端设计师 blog hello Shawn jQuery html color PSD demo html5 css css3
Design:Shawn
HTML/CSS:Shawn
©2012 ShawnHe.Com

IE6:display:inline-block解决方案

IE6下对display:inline-block;支持的不是很好。网上有资料说:修改inline元素的display属性为inline-block后,所有的浏览器都是支持的。修改block元素的display属性为inline-block后,IE6及以下的老版浏览器都是不支持的。

display:inline-block;

将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。(准确地说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性)

并不是所有浏览器都支持此属性,目前支持的浏览器有:Opera、Safari在IE中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout, 从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析,也不难理解为什么IE下,对块元素设置 display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触 发了layout,而它本就是行布局,所以触发后,块元素依然还是行布局,而不会如Opera中块元素呈递为内联对象。

IE6下块元素如何实现display:inline-block的效果?
Continue reading

Posted in My Life | Tagged , | 评论关闭

响应式布局说明

一、什么是响应式布局?

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。

二、响应式布局有哪些优点和缺点?

优点:
  1. 面对不同分辨率设备灵活性强
  2. 能够快捷解决多设备显示适应问题
缺点:
  1. 兼容各种设备工作量大,效率低下
  2. 代码累赘,会出现隐藏无用的元素,加载时间加长
  3. 其实这是一种折衷性质的设计解决方案,多方面因素影响而达不到最佳效果
  4. 一定程度上改变了网站原有的布局结构,会出现用户混淆的情况

三、响应式布局该怎么设计?

我们在上面了解了什么是响应式布局,那在我们的实际项目中应该怎么去设计呢?在以往我们设计网站的时候都会受到不同浏览器的兼容性的困扰,现在还要来个不同尺寸设备,我们该怎么淡定下来呢?有需求就会有解决方案,呵呵,说到响应式布局,就不得不提起CSS3中的Media Query(媒介查询),这可是个好东西,易用、强大、快捷……Media Query是制作响应式布局的一个利器,使用这个工具,我们可以非常方便快捷的制造出各种丰富的实用性强的界面。接下来就一起来深入的了解Media Query

1、CSS中的Media Query(媒介查询)是什么?

通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受minmax用于表达”大于或等于”和”小与或等于”。如:width会有min-widthmax-width媒体查询可以被用在CSS中的@media@import规则上,也可以被用在HTML和XML中。通过这个标签属性,我们可以很方便的在不同的设备下实现丰富的界面,特别是移动设备,将会运用更加的广泛。

2、media query能够获取哪些值?
  • 设备的宽和高device-width,device-heigth显示屏幕/触觉设备。
  • 渲染窗口的宽和高width,heigth显示屏幕/触觉设备。
  • 设备的手持方向,横向还是竖向orientation(portrait|lanscape)和打印机等。
  • 画面比例aspect-ratio点阵打印机等。
  • 设备比例device-aspect-ratio-点阵打印机等。
  • 对象颜色或颜色列表color,color-index显示屏幕。
  • 设备的分辨率resolution。
3、语法结构及用法
@media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules}

示例一:在link中使用@media:

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and (max-device-width: 480px)" href="link.css"/>

上面使用中only可省略,限定于计算机显示器,第一个条件max-width是指渲染界面最大宽度,第二个条件max-device-width是指设备最大宽度。

示例二:在样式表中内嵌@media:

@media (min-device-width:1024px) and (max-width:989px),screen and (max-device-width:480px),(max-device-width:480px) and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {srules}

在示例二中,设置了电脑显示器分辨率(宽度)大于或等于1024px(并且最大可见宽度为989px);屏宽在480px及其以下手持设备;屏宽在480px以及横向(即480尺寸平行于地面)放置的手持设备;屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。

从上面的例子可以看出,字符间以空格相连,选取条件包含在小括号内,srules为兼容设置的样式表,包含在中括号里面。only(限定某种设备,可省略),and(逻辑与),not(排除某种设备)为逻辑关键字,多种设备用逗号分隔,这一点继承了css基本语法。

4、可用设备名参数:
类型 解释
all 所有设备
braille 盲文
embossed 盲文打印
handheld 手持设备
print 文档打印或打印预览模式
projection 项目演示,比如幻灯
screen 彩色电脑屏幕
speech 演讲
tty 固定字母间距的网格的媒体,比如电传打字机
tv 电视
5、逻辑关键字:
关键字 说明
only 限定某种设备类型
and 逻辑与,连接设备名与选择条件、选择条件1与选择条件2
not 排除某种设备
, 设备列表
6、可用设备名参数:
媒体特性 可用媒体类型 接受min/max 简介
width <length> 视觉屏幕/触摸设备 yes 定义输出设备中的页面可见区域宽度(单位一般为px)
heigth <length> 视觉屏幕/触摸设备 yes 定义输出设备中的页面可见区域高度(单位一般为px)
device-width <length> 视觉屏幕/触摸设备 yes 定义输出设备的屏幕可见宽度(单位一般为px)
device-heigth <length> 视觉屏幕/触摸设备 yes 定义输出设备的屏幕可见高度(单位一般为px)
orientation portrait | landscape 位图介质类型 no 定义’height’是否大于或等于’width’。值portrait代表是,landscape代表否即设,备手持方向:portait为横向,landscape为竖向
aspect-ratio <ratio> 位图介质类型 yes 定义’width’与’height’的比率,即浏览器的长宽比
device-aspect-ratio <ratio> 位图介质类型 yes 定义’device-width’与’device-height’的比率,即设备屏幕长宽比。如常见的显示器比率:4/3, 16/9,16/10
color <integer> 视觉媒体 yes 定义每一组输出设备的彩色原件个数。如果不是彩色设备,则值等于0
color-index <integer> 视觉媒体 yes 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0
monochrome <integer> 视觉媒体 yes 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
resolution <resolution> 位图介质类型 yes 定义设备的分辨率。如:96dpi,300dpi,118dpcm
scan progressive | interlace 电视类 no 定义电视类设备的扫描工序, progressive逐行扫描,interlace隔行扫描
grid <integer> 栅格设备 no 用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值,1代表是,0代表否
7、测试Media Queries

最后,我们需要对我们刚刚设计的Media Queries进行测试,想要在不同设备上测试Media Queries的效果,可以使用一个浏览工具来检验不同尺寸屏幕下的显示效果,在这里为大家介绍一个不错的在线工具 – Responsivator,它可以模拟iPhone等各种不同设备,并且还可以自定义不同尺寸屏幕的显示效果,只需要输入一个url甚至是本地的一个url(如:http://127.0.0.1/),就可以看到网站在不同尺寸屏幕下的显示效果.

8、通过Media Queries实现响应式布局设计

好了,我们明白了什么是Media Query,那我们一起来运用到响应式布局的设计项目中去。设计思路很简单,首先先定义在标准浏览器下的固定宽度(假如标准浏览器的分辨率为1024px,那么我们设置宽为980px),然后用Media Query来监测浏览器的尺寸变化,当浏览器的分辨率小于1024px的时候,则通过Media Query预设的样式表来将页面的宽度设置为百分比显示,这样子页面的结构元素就会根据浏览器的的尺寸来进行相对应的调整。同理,当浏览器的可视区域改变到某个值(假如为650px)的时候,页面的结构元素根据Media Query预设的层叠样式表来进行相对应的调整。看看我们的例子:

 /* 当浏览器的可视区域小于980px */
@media screen and (max-width: 980px) {
     #wrap {width: 90%; margin:0 auto;}
     #content {width: 60%;padding: 5%;}
     #sidebar {width: 30%;}
     #footer {padding: 8% 5%;margin-bottom: 10px;}
}
 /* 当浏览器的可视区域小于650px */
@media screen and (max-width: 650px) {
     #header {height: auto;}
     #searchform {position: absolute;top: 5px;right: 0;}
     #content {width: auto; float: none; margin: 20px 0;}
     #sidebar {width: 100%; float: none; margin: 0;}
 }

通过上面我们就可以监测浏览器的可视区域变化的是时候我们的页面结构元素也会相对应的变化,当然你可以再多设置几个尺寸的监测层叠样式表,这样子就可以根据不同尺寸设备来进行响应式的布局。为了更好的显示效果,我们往往还要格式化一些CSS属性的初始值:

/* 禁用iPhone中Safari的字号自动调整 */
html {
	-webkit-text-size-adjust: none;
}
/* 设置HTML5元素为块 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
/* 设置图片视频等自适应调整 */
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}
.video embed, .video object, .video iframe {
	width: 100%;
	height: auto;
}

最后要注意的是在页面的头部<head></head>之间加上下面这句∶

<meta name="viewport" content="width=device-width; initial-scale=1.0">

meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。

参数设置∶

  • width – viewport的宽度
  • height – viewport的高度
  • initial-scale – 初始的缩放比例
  • minimum-scale – 允许用户缩放到的最小比例
  • maximum-scale – 允许用户缩放到的最大比例
  • user-scalable – 用户是否可以手动缩放

最后对于在IE浏览器中不支持media query的情况,我们可以使用Media Query JavaScript来解决,只需要在页面头部引用css3-mediaqueries.js即可。示例:

<!--[if lt IE 9]>
     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script> <![endif]-->

文章转自: http://www.jiawin.com/response-type-layout-design/

Posted in My Life | Tagged , , | 评论关闭

20个设计师必备工具推荐

工具的发展是随着设计的发展与时俱进的,一个好的工具会给设计师带来高效、便捷的感受,提高设计产出的质量。以下翻译了国外同行总结的最新设计工具的好文:

原文地址:http://www.webdesignerdepot.com/2012/11/whats-new-for-designers-november-2012/

01 Spectrum

Spectrum是基于OS X的一款应用,能够非常简单、直观地创建色彩定制板。他内置了合理搭配色彩的规则以及一个能从图片获取颜色的取色器,还有内置颜色库等等。

网站地址:http://www.eigenlogik.com/spectrum

 

02 Sellbox

Sellbox可以让你通过Dropbox账户售卖你的数字文档。你可以通过PayPal收费,只需要付给Sellbox5%的手续费,并且不需要任何预付费。

网站地址:http://sellboxhq.com/

 

03 Pocket

Pocket 是一款官方的Read it later软件,使得用户能够更简单的保存文章、视频或其他任何内容以便稍后再读。他可以通过浏览器、电子邮件还有其他300多个应用中调出,包括Twitter,Pulse,Flipboard等等。

(这款插件我用过,支持Chrome,多终端阅读,办公室看不完的内容可以在路上看,很方便。)

网站地址:http://getpocket.com/

 

04 Wireframe.cc

Wireframe.cc是款极简主义的线框图绘制的应用,不仅易用而且界面漂亮。操作简单、直观,输出物也非常吸引人。

(这款我也试用过,跟Mockflow这些线上原型工具类似,但是Wireframe.cc要更简洁一些,控件也非常基本简单,支持网页和手机横竖版三种模版。)

网站地址:http://wireframe.cc/example

 

05 Manymo

Manymo是一款Android模拟器,启动速度快,且在浏览器中就能运行流畅。你可以使用它来测试你的Android应用,他最多能支持42种屏幕尺寸和系统版本。

网站地址:http://www.manymo.com/

 

06 Photo Raster

Photo Raster是一款先进的线上图片编辑器,包含绘图、色彩调整、图层编辑、滤镜蒙版等工具。

网站地址:http://photoraster.com

 

07 Bitrix24

Bitrix24可以让你能够在几分钟之内创建自己的社交网络。你可以获得一个最多可以支持12个用户,5GB存储空间的免费账户,而付费账户能支持更多的用户、更多功能和更多存储空间。

网站地址:http://www.bitrix24.com/

 

08 Solidify

Solidify是Zurb新出的一款原型制作软件,只需要花19美元一个月就可以轻松的通过wireframes,mockups甚至是sketches plan创建可点击跳转的动态原型。

网站地址:http://www.solidifyapp.com/

 

09 IconBench

IconBench允许你定制一组超过700个的图标集。你可以设置不透明性,外阴影,内阴影,渐变等效果,然后选择你最想要的图标。

网站地址:http://iconbench.com/

 

10 rwdgrid.com

rwdgrid.com 是一款基于960.gs的响应式网格系统,包含不同的网格系统,支持1200PX,960px,720px的显示屏以及移动设备。

网站地址:http://rwdgrid.com/

 

11 Onlytasks

Onlytasks 是一款基于OS X和iOS的任务管理器,他使得您能够轻松有效的管理你的事件,甚至还可以与Evernote同步。

网站地址:http://www.bitgeenius.com/onlytaskseng.html

 

12 WP Teacher

WP Teacher 是为教师们开发的一款插件,教师们可以用它把课程内容整合到自己的WordPress网站。通过他你还可以发布作业和事件通知两种内容,同时他还支持作业列表和通知列表小控件等等。

网站地址:http://wordpress.org/extend/plugins/wp-teacher/

 

13 SimplyTestable

SimplyTestable 是一款自动的前端网页测试软件,支持一键测试。他可以验证你的HTML 标记,并给出一份网站总览报告和一份详细错误报告等等。

网站地址:http://simplytestable.com/

 

14 Stride

Stride 是一款销售管理软件,他能够支持追踪、管理和协调您的生意,同时还有实时协作工具能支持团队合作,还有令人满意的参考指标。

网站地址:http://strideapp.com/

 

15 JS Library Boilerplate

JS Library Boilerplate 是一款简单易用的创建JS 库(如jQuery或Prototype)的模板,是采用CoffeeScript,TypeScript和原生的JavaScript三种语言进行编码,并且拥有非常完善的文档.

网站地址:http://dciccale.github.com/jslibraryboilerplate/

 

16 Bootsnipp

Bootsnipp 是一套提供给设计师和开发者的基于Bootstrap HTML/CSS/JavaScript 架构的免费元素库。目前有40个,还会增加更多。

网站地址:http://bootsnipp.com/

 

17 Bonsai

Bonsai 是一套轻量级的JavaScript绘图库,内有一个SVG 渲染器。简单易用,而且支持各种多媒体资源(包括音频、视频、图片、字体等等)。

网站地址:http://bonsaijs.org/

 

18 Fbootstrapp

Fbootstrapp是一套支持创建各种尺寸的Facebook内框架应用的工具包,基于Bootstrap和Less,但是为Facebook而订制的。

网站地址:http://ckrack.github.com/fbootstrapp/

 

19 Brunch

Brunch是一款HTML 5应用软件的汇编程序,他可以适用于任何架构、数据库、编程语言,样式表,模板和后台技术。

网站地址:http://brunch.io/

 

20 Deployd

Deployd 可以在WEB端和移动应用端快速简单的建立API接口。他不像传统的后台一样需要模板或配置。

网站地址:http://www.deployd.com/
翻译:http://isux.tencent.com/

Posted in Show Case | Tagged , , | 评论关闭

PS 参考线插件GUIDEGUIDE下载及使用说明

大家都知道,每次在PS里面拉参考线是一件很痛苦的事情,特别是要按照规定的宽度创建Grid的时候,而这回,Cameron Mcefee提供了一个插件“GuideGuide”,如其名,的确是非常方便的一款创建参考线的插件。
今天为大家介绍一款非常实用的PS小插件GuideGuide,它提供了一个非常便捷的方式生成像素级别的辅助线(栏,行,中线……)

想像一下在PS里面创建好一组多栏目的辅助线:页面多宽,分2栏目还是3栏,分栏里面又有多少个分栏……数学不好的同学估计手心都开始冒汗了。确实,在PS里面创建网格是个非常痛苦的事情,不少设计同学都是大概估算一下宽高来拉辅助线;或者画一个矢量图形,然后复制移动来分列。如果总的宽度有了变化之后,又将他们整体拉宽来重新分列。没耐心的人估计已经开始喊:“我是设计师,不是数学家”,有耐心的人会重新算过一遍之后再来,还有公式如下:

(页面宽度 – (间隙宽度 x (分栏数 – 1) ))÷ 分栏数 = 栏目宽
看起来是不是有点想暴走?设计个页面还要搞这么复杂的东西。

实用的小工具GuideGuide来了
为啥要把时间花在数学上,而不是省心一点,留出多一点时间来将设计做得更好呢?只要输入一些数字,GuideGuide就会利用PS里面的辅助线自动的在你的文档中划分好网格。当你用了之后就会由衷的觉得:很好很强大。而且,它真正的强大之处在于:支持选框工具–如果你的文档中有选框的话,它可以在选区内生成对应的辅助线。

分栏与分列

页面需要分栏和等比间隙?GuideGuide轻松搞定

找到中点

GuideGuide让你找到对象的中点变得易如反掌,只要画一个选区或者在图层面板(ctrl + 鼠标左键)创建一个选区,然后点击中点按钮,就可以立即创
建中点线。

然后将此列中的其他元素根据需要来对齐

存储常用的划分为选项
如果你经常用同一种网格划分方式,可以存储为选项方便以后随时调用
发挥你的创造力
GuideGuide有分栏,有边距,有中点…… 发挥你的想象力它可以做的更多
划分导航
当你要将一定宽度的导航划分为N等分的分栏的时候,是不是又要计算宽度了?现在不用烦恼了,用GuideGuide吧

1.用选区工具画一个你导航宽度的选区
2.输入你导航的分栏数以及他们之间的间距
等边距矩形绘制

当你想绘制一个与你当前元素等边距的矩形,是不是又要计算了?

1.在图层面板(ctrl + 鼠标左键)创建选区
2.在边距栏输入一个负数,然后点击图标,GuideGuide会自动输入四边等距的指数,然后回车创建辅助线
3.根据新创建的辅助线绘制四边等距离的矩形

基准线网格绘制

利用GuideGuide便捷的行高设置,轻松创建整页的横向对齐基准线

1.输入你想要的行高
2.将你页面中的元素相应的对齐

剩余像素分配
在分栏的时候不是永远都能完美的等分,如果你要在一个10px宽度内分3栏,那么多余的像素怎么办?设置里面的剩余像素分配设置决定将多余的像素分配到哪里,默认是“右下角”

官网下载地址:Download

下载完毕后开启 Adobe Extension Manager 安装插件,然后打开PS在 windows > extensions 下面开启窗口

源文地址:Web Designer Tenoji

Posted in Show Case | Tagged , | 评论关闭

20个精品App开发工具

QQ20130614-3.png

在力所能及的范围内找到了以下部分,基本都是最新版本。

QQ20130614-5.png
xScope是一款设计辅助软件,帮助设计者快速/精确的完成工作,这套工具提供测距,放大镜,辅助线,投影到手机等等8大特性。
xScope v3.6.1 【下载】

QQ20130614-6.png
Kaleidoscope 是一款很强大的文件和图像比较工具,支持任何文本文件和 jpeg、tiff、png、psd 等格式的图像文件,同时和 git、svn 等版本控制工具能够完美的结合。是Mac下最好的代码比较工具。
只找到v2.0.0,最新版是v2.0.1
Kaleidoscope v2.0.0【下载】

QQ20130614-7.png
Sketch是一款拥有美观界面和强大功能的专业矢量图形绘制工具。2012 Apple Design Award Winner大奖得主。
Sketch v2.2.4【下载】

QQ20130614-8.png
专为ios开发设计的界面原型制作工具,能让开发者像制作ppt一样制作应用原型,并且能输出到ios设备上进行演示。
Briefs v1.0.5【下载】

QQ20130614-9.png
Textastic 是一款简单快速的文本、代码和标记语言编辑器。支持超过80种代码和标记语言,为Mac平台带来符合流行iOS编程习惯的语法着色引擎。
Textastic v1.1【下载】

QQ20130614-10.png
Acorn是一款易于使用的图像编辑器,它的设计目标是成为 Photoshop 的轻量替代品。该软件有快速,简单,流畅的良好品质,拥有photoshop基础工具、滤镜效果及支持图层功能,如果不想为偶尔的图像处理工作在 Mac 上装臃肿的 Photoshop,Acorn 是不错的替代品。
Acorn v4.0.5【下载】

QQ20130614-11.png
OmniGraffle是由The Omni Group制作的一款绘图软件,其只能于运行在Mac OS X和iPad平台之上。它曾获得2002年的苹果设计奖。
OmniGraffle可以用来绘制图表,流程图,组织结构图以及插图,也可以用来来组织头脑中思考的信息,组织头脑风暴的结果,绘制心智图,作为样式管理器,或设计网页或PDF文档的原型。
OmniGraffle v5.4.4【下载】

QQ20130614-12.png
Mac平台的强大的文本、代码、标记语言编辑器。为设计师、码农、作家提供大量有关编辑、查找和其他操作的高性能特性。
BBEdit v10.5.4【下载】

QQ20130614-14.png
PaintCode是一个专门为设计师准备的简单的矢量图形绘图应用程序,通过PaintCode没有编程经验的设计师也能立即画出美丽的控件,图标或其他UI界面元素并直接生成适用于iOS或者OS X的Objective-C代码。
只找到v1.3.0,最新版是v1.3.1
PaintCode v1.3.0【下载】

QQ20130614-15.png
Pixelmator 界面清爽,布局灵活,熟悉 Photoshop 的人可迅速上手。软件建立在一些开源和 Mac OS X 图形技术之上,可调用 Mac 图形加速。使用起来在界面交互和流畅感上均优于 Photoshop,且与 Mac 自带程序整合不错。
Pixelmator v2.2【下载】

QQ20130614-16.png
自动切图工具Slicy,这款软件操作十分简单,只要将PSD拖进去Slicy的窗口,就能自动生成.jpg和.png等格式的切图文件,瞬间减少了很多工作量。当然,前提是,你得养成良好的PSD图层管理。
Slicy v1.1.4【下载】

QQ20130614-17.png
ScreenFlow是一款优秀的录屏软件。不但可以录制桌面操作还可以将演示者视频进行合成. 容易上手的编辑界面让您可以发挥出自己的无限创意,用附加图片、文本、音乐来制作创造出专属于你的屏幕录像。此软件曾经获得WWDC 2008软件设计大奖。
ScreenFlow v4.0.3【下载】

———————————————————-     分割线    ——————————————————————

20个推荐应用中有5个是免费的,可以直接从Mac AppStore安装
QQ20130614-18.png
Xcode【App Store】

QQ20130614-13.png
Skala Preview【App Store】

QQ20130614-19.png
TextWrangler【App Store】

QQ20130614-20.png
Prepo【App Store】

QQ20130614-21.png
Skitch【App Store】

———————————————————-     分割线    ——————————————————————

还有3个找不到xx版,希望有能力提供的同学慷慨分享
QQ20130614-22.png
Napkin【App Store】

QQ20130614-23.png

下载 (88.37 KB)

13/6/14 09:02 PM

Dash【App Store】

QQ20130614-24.png
Prototypes【App Store】

Posted in My Life | 评论关闭

30个免费的图标字体设置

我们一起来看看30个免费开源的图标字体,各种各样的像素图标,我想一定有你需要和喜欢的。
简介:我们一起来看看30个免费开源的图标字体,各种各样的像素图标,我想一定有你需要和喜欢的。
本帖最后由 挨踢草 于 2013-3-1 09:26 编辑

我们一起来看看30个免费开源的图标字体,各种各样的像素图标,我想一定有你需要和喜欢的。

Elusive Icons

图标数量: 271

版权: SIL – Open Font Licence

查看&下载字体 →

MFG Labs Web Icon Set

图标数量: 120

版权: MIT Licence

查看&下载字体 →

Font Awesome

图标数量:

版权: SIL Open Font License

查看&下载字体 →

Foundation Icons

图标数量: 140

版权: MIT Open Source License

查看&下载字体 →

Pictonic Icons

图标数量: 266

版权: Free for personal or commercial projects

查看&下载字体 →

Batch Icons

图标数量: 300+

版权: Free for personal or commercial projects

查看&下载字体 →

IcoMoon Free Pack

图标数量: 450

版权: CC License 3.0

查看&下载字体 →

Iconic Icon Set

图标数量: 171

版权: Creative Commons Share Alike 3.0

查看&下载字体 →

Ligature Symbols

图标数量: 250+

版权: SIL Open Font License

查看&下载字体 →

Entypo

图标数量: 250

版权: Creative Commons Share Alike 3.0

查看&下载字体 →

OpenWeb Icons

图标数量: 54

版权: SIL Open Font License (OFL)

查看&下载字体 →

Sosa Icon Font

图标数量: 120

版权: Free for personal or commercial projects

查看&下载字体 →

Metro UI Web Font

图标数量: 333

查看&下载字体 →

One Div

图标数量: 91

查看&下载字体 →

Maki

图标数量: 73

版权: BSD License

查看&下载字体 →

PW Drawn Icon Font

图标数量: 80+

版权: Free for personal or commercial use

查看&下载字体 →

Premium Pixels Mini Icons

图标数量: 80

版权: Free for personal or commercial use

查看&下载字体 →

Fontelico Font

图标数量: 30

版权: Creative Commons Share Alike 3.0

查看&下载字体 →

Typicons

图标数量: 88

版权: Free for personal or commercial use

Typicons →

Modern Pictograms

图标数量: 89

版权: Open Font License (OFL)

查看&下载字体 →

A Free Icon Web Font

图标数量: 60

版权: SIL Open Font License (OFL)

查看&下载字体 →

Modern Pictograms

图标数量: 92

版权: SIL Open Font License (OFL)

查看&下载字体 →

Symbol Signs

图标数量: 21

查看&下载字体 →

Web Symbols

图标数量: 78

版权: SIL Open Font License (OFL)

查看&下载字体 →

Dot Com Font

图标数量: 93

版权: Free for personal use

查看&下载字体 →

Social Media Icons

图标数量: 74

版权: Free for personal or commercial projects.

查看&下载字体 →

Rondo – Social Icon Font

图标数量: 40

版权: Creative Commons Attribution-ShareAlike 3.0

查看&下载字体 →

JustVector Social Icons Font

图标数量: 30

查看&下载字体 →

Social Media Glyph Set

图标数量: 30

版权: Free for personal or commercial projects

查看&下载字体 →

Meteocons

图标数量: 40

版权: Free for personal or commercial projects

查看&下载字体 →

文章翻译整理来源:http://speckyboy.com/2013/02/20/free-icon-font-sets/

Posted in My Life | Tagged , | 评论关闭

IE条件注释详解

在CSS布局中,还常常用到IE Hack。if IE起着非常大的作用!
if IE什么意思呢?下面就列举了一些在CSS常见的HACK控制语句。
作为IE的IF条件注释使用备忘,有些时候试用if IE而不是在css中使用hack,就能通过w3c验证。

<!–[if !IE]>除IE外都可识别<![endif]–>
<!–[if IE]> 所有的IE可识别 <![endif]–>
<!–[if IE 5.0]> 只有IE5.0可以识别 <![endif]–>
<!–[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]–>
<!–[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]–>
<!–[if IE 6]> 仅IE6可识别 <![endif]–>
<!–[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]–>
<!–[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]–>
<!–[if IE 7]> 仅IE7可识别 <![endif]–>
<!–[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]–>
<!–[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]–>

条件注释只能在windows Internet Explorer(以下简称IE)下使用,因此我们可以通过条件注释来为IE添加特别的指令。 Continue reading

Posted in Show Case | Tagged , | 评论关闭

中文字体的英文名称对照表

中文名 英文名 Unicode Unicode 2

Mac OS

华文细黑 STHeiti Light [STXihei] \534E\6587\7EC6\9ED1 华文细黑
华文黑体 STHeiti \534E\6587\9ED1\4F53 华文黑体
华文楷体 STKaiti \534E\6587\6977\4F53 华文楷体
华文宋体 STSong \534E\6587\5B8B\4F53 华文宋体
华文仿宋 STFangsong \534E\6587\4EFF\5B8B 华文仿宋
丽黑 Pro LiHei Pro Medium \4E3D\9ED1 Pro 丽黑 Pro
丽宋 Pro LiSong Pro Light \4E3D\5B8B Pro 丽宋 Pro
标楷体 BiauKai \6807\6977\4F53 标楷体
苹果丽中黑 Apple LiGothic Medium \82F9\679C\4E3D\4E2D\9ED1 苹果丽中黑
苹果丽细宋 Apple LiSung Light \82F9\679C\4E3D\7EC6\5B8B 苹果丽细宋

Windows

新细明体 PMingLiU \65B0\7EC6\660E\4F53 新细明体
细明体 MingLiU \7EC6\660E\4F53 细明体
标楷体 DFKai-SB \6807\6977\4F53 标楷体
黑体 SimHei \9ED1\4F53 黑体
宋体 SimSun \5B8B\4F53 宋体
新宋体 NSimSun \65B0\5B8B\4F53 新宋体
仿宋 FangSong \4EFF\5B8B 仿宋
楷体 KaiTi \6977\4F53 楷体
仿宋_GB2312 FangSong_GB2312 \4EFF\5B8B_GB2312 仿宋_GB2312
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312 楷体_GB2312
微软正黑体 Microsoft JhengHei \5FAE\x8F6F\6B63\9ED1\4F53 微软正黑体
微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1 微软雅黑

Office

隶书 LiSu \96B6\4E66 隶书
幼圆 YouYuan \5E7C\5706 幼圆
华文细黑 STXihei \534E\6587\7EC6\9ED1 华文细黑
华文楷体 STKaiti \534E\6587\6977\4F53 华文楷体
华文宋体 STSong \534E\6587\5B8B\4F53 华文宋体
华文中宋 STZhongsong \534E\6587\4E2D\5B8B 华文中宋
华文仿宋 STFangsong \534E\6587\4EFF\5B8B 华文仿宋
方正舒体 FZShuTi \65B9\6B63\8212\4F53 方正舒体
方正姚体 FZYaoti \65B9\6B63\59DA\4F53 方正姚体
华文彩云 STCaiyun \534E\6587\5F69\4E91 华文彩云
华文琥珀 STHupo \534E\6587\7425\73C0 华文琥珀
华文隶书 STLiti \534E\6587\96B6\4E66 华文隶书
华文行楷 STXingkai \534E\6587\884C\6977 华文行楷
华文新魏 STXinwei \534E\6587\65B0\9B4F 华文新魏
Posted in Show Case | Tagged | 评论关闭

17个前端设计师的颜色网站资源

Adobe Kuler

Adobe Kuler Continue reading

Posted in Show Case | Tagged , | 评论关闭

99个漂亮的注册和登录页面设计(附PSD)

它们来自于国外优秀的设计师们,而基本都是设计稿,附带PSD,你可以下载下来用在自己的项目中。

 

Wooodapp sign in page

99个漂亮的注册和登录页面设计(附PSD)

Sign In Widget

99个漂亮的注册和登录页面设计(附PSD) Continue reading

Posted in Show Case | Tagged | 评论关闭