前端经验

image

拖了好久Resolution.im终于上线,目前收录了iPad及iPhone的相关信息并提供全尺寸PNG源文件。接下来会陆续添加主流Android机型。希望对各位移动设计师有用,以后查移动设备相关信息来这里就对拉。

传送门→http://resolution.im/  |  作者微博→@5key  

想让你的网页和海报看上去更有范更立体么?这套模版很不错,用法见配图!

image

ps:记得用这些包装的时候要点开智能对象,才能更人性化的编辑哟!收藏起来以后你肯定有用滴!

image

下载地址:

新浪微盘下载  |  来自禄's Blog

这个连小孩子都知道开发App的时代,编程是一项必学的技术,没必要拿着枯燥的书本在那里死啃,必须是即刻动手才能学得快。所以我们要来看看这些免费编程资源。

孩子都知道开发App你还在等什么?免费学习编程的10个好工具!

1. Code/Racer

Code/Racer是一个在线编程游戏,会强迫你快速编程,在编程游戏中,Code/Racer所属Treehouse团队拥有超过650个教学视屏,当你完成某个课程的话,就会获得相应的徽章。

孩子都知道开发App你还在等什么?免费学习编程的10个好工具!

2. MIT OpenCourseWare

因为它开放了课程内容,所以每个人都可以从这个机构学到东西。这对于背负着沉重贷款的学生来说是非常美好的一件事。

孩子都知道开发App你还在等什么?免费学习编程的10个好工具!

3. Udacity

Udacity相信当今的高端教育系统被破坏了,教育不再是某个时间段的事情,而是终生的事情,所以它的教学内容里面包括了大量的计算机科学,数学和物理在线课程。

孩子都知道开发App你还在等什么?免费学习编程的10个好工具!

4. Mozilla Developer Network

这是一个搜集Web开发的公资料网站,里面有专家、学生。MDN是一个Wiki式网站,所以任何人都可以编辑和修改它的页面。

孩子都知道开发App你还在等什么?免费学习编程的10个好工具!

5. The CodePlayer

这里有互动演示文稿告诉你人们是如何从头构建事情的,在你变成一个编程员后,你也可以把自己一步一步的学习的演示文稿传上去,告诉别人你是怎么学习编程的。

孩子都知道开发App你还在等什么?免费学习编程的10个好工具!

6. Coursera

这个顶级在线教育平台有各个大学的在线资源,来自62个大学的教授老师等。而且支持英语、西班牙语、法语、意大利语和中文。

孩子都知道开发App你还在等什么?免费学习编程的10个好工具!

7. Codeacademy

Codeacadem只专注编程教学,包括APIs, Ruby, Python, JavaScript, jQuery, PHP,Web基础语言等。

孩子都知道开发App你还在等什么?免费学习编程的10个好工具!

8. Khan Academy

从编程到微积分,计算机科学理论,在这里你可以同时成为专业编码师和专业数学家。

888.jpg

9. Learn Python the Hard Way

该网站提供免费的PDF,如果需要视频课程的话,你需要支付29美元。在这里学习的时候, 你不能复制粘贴,只能一个一个字符输入。

999.jpg

10.HTML5 Rocks

这里是学习HTML 5的一站式教学,都是在Google、Adobe等工作的人写的,然后学生们通过幻灯片、演示文稿和视频来学习。

孩子都知道开发App你还在等什么?免费学习编程的10个好工具!

image

两月前澳大利亚设计师 Fred Nerby 发布了这套 Facebook概念图 之后,他的官网浏览量超过了两千万。其实引起关注用不了两月之久,Nerby 发布 Facebook 设计 24 小时后,全球各地的公司便开始联系他,包括 Facebook。Nerby 无意透露他跟 Facebook 的谈话细节,唯一确定的是他没有选择去 Facebook 工作。

澳大利亚设计师 Fred Nerby 发布 Facebook概念图,相信很快人人就会改版!

澳大利亚设计师 Fred Nerby 发布 Facebook概念图,相信很快人人就会改版!

澳大利亚设计师 Fred Nerby 发布 Facebook概念图,相信很快人人就会改版!

澳大利亚设计师 Fred Nerby 发布 Facebook概念图,相信很快人人就会改版!

更多概念图请浏览 Nerby 设计师网站:http://nerby.com/project/facebook/

image

在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果。今天研究了一下,总算有所了解。在此总结一下:

先看下各个属性值的定义:

1、static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

2、relative:生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。

3、absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

4、fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

static与fixed的定位方式较好理解,在此不做分析。下面对应用的较多的relative和absolute进行分析:

1、relative。定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在。如图1:

搞清Position属性,CSS+DIV定位分析(relative,absolute,static,fixed) - 禄's Blog www.webexp.cn

黄色背景的层定位为relative,红色边框区域为其在正常流中的位置。在通过top、left对其定位后,从灰色背景层的位置可以看出其正常位置依然存在。

2、absolute。定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在。如图2:

搞清Position属性,CSS+DIV定位分析(relative,absolute,static,fixed) - 禄's Blog www.webexp.cn

可以看到,在将黄色背景层定位为absolute后,灰色背景层自动补上。

3、relative与absolute的主要区别:

首先,是上面已经提到过的在正常流中的位置存在与否。

其次,relative定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式。如图3:

图中,红色背景层为relative定位,其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素。而如果红色背景层定位为absolute,则情形如图4:

搞清Position属性,CSS+DIV定位分析(relative,absolute,static,fixed) - 禄's Blog www.webexp.cn

可以看到,红色背景层依然定义top:20px;left:20px;但其相对的元素变为定位方式为absolute或relative的黄色背景层。因此,对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层,而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative,则其将相对body进行定位,如图5:

搞清Position属性,CSS+DIV定位分析(relative,absolute,static,fixed) - 禄's Blog www.webexp.cn

除top、left、right、bottom定位外,margin属性值的定义也符合上述规则。

image

1、多花些时间

挑选合适的字体需要花费大量时间。但是不要一遍又一遍地让自己陷入对同一类型的字体挑选中。因为人们往往习惯于从自己熟悉的字体或者偏爱的字体开始。多花些时间去发现探索新的类型,这样你才能慢慢地发现自己对一种字体的细微差别的敏锐度,真正地让字体自己告诉你合适不合适。

2、不要使用过多的字体

如果你的一个页面里有十种不同的字体,那么你的排版一定会很难看。控制自己使用越少的字体,将会让你的页面脱颖而出。同时你也可以在字体的大小、重量和其它方面创造更多的对比变化。

3、不要盲目赶潮流

那些时尚网站的现代字体固然很精致,但是它并不是适合所有的页面。真正深入了解你的内容来设计会比你盲目地用许多最新的字体叠加,使你的版面看起来更加自然和谐。其实,字体也不光是网络才有。有时候,打开一本书或者一本杂志,看看那些经久不衰的经典字体,也会让你受益良多。

4、保持不同

当你选择字体,将他们放在一起时,确保他们的字体相互独立的而不是相互接近的。因为如果您选择两个相似的字体放在一起,会给大家一种错别字的感觉。

5、别忘了衬线字体

无衬线的字体看起来会很现代,同时很简洁干练,被许多设计师所采用。不过对于一些抒情性强的页面时,偶尔使用一些衬线字体,会让你的版面看起来更加有爱,更加经典。

6、保证清晰易读

为了让版面醒目突出,往往大部分设计师会忘记信息的明确传达。他们就会使用各种工具制作很炫目的图形,而把文字内容放的很小很不起眼。这恰恰犯了版式编排的大忌,因为你总不能让观众去猜测到底要传达什么信息吧!

7、建立层级次序

决定了哪些字体要用来做什么,对他们要怎么处理,依次遵守设立一个系统,这样就能很容易地让你来挑出来编排,也能让读者更容易地阅读。

8、让你的版面呼吸

确保你各个部分的内容都被合理地放置而不是混乱地堆在一起,多调整行距和字距,多使用项目符号。这样你的版式才会看起来舒服有序。

9、注意版权

不要认为你是从网上获得或者从朋友那里得到的字体,你就可以想怎么用就怎么用了。多想想它有没有版权信息,在你打印之前就确保你是否需要从原作者那里获得使用权。

10、小一点更好

更小一点,不是任何时候都适用,但要是想显得精致和高品位一些,小一点是没错的。不过前提是足可以辨认。平时在已经完成一个页面后,多推敲看看字体的字号能不能再小一点。有时候会起到出乎意料的效果!

之前为大家介绍过灵感的干货系列,46个为你带来灵感的游戏网站设计!这次为大家带来28个化妆品网站设计欣赏,希望能为大家在设计化妆品相关网站的时候带来灵感、创意!

image

NYX

28个化妆品网站欣赏-美丽将拯救世界

maxfactor

28个化妆品网站欣赏-美丽将拯救世界

Schwarzkopf

28个化妆品网站欣赏-美丽将拯救世界

Artistry

28个化妆品网站欣赏-美丽将拯救世界

Calvin Klein

28个化妆品网站欣赏-美丽将拯救世界

Caboodles

28个化妆品网站欣赏-美丽将拯救世界

Loreal

28个化妆品网站欣赏-美丽将拯救世界

Olay

28个化妆品网站欣赏-美丽将拯救世界

Maybelline

28个化妆品网站欣赏-美丽将拯救世界

Chanel

28个化妆品网站欣赏-美丽将拯救世界

Lancome

28个化妆品网站欣赏-美丽将拯救世界

Loreal USA

28个化妆品网站欣赏-美丽将拯救世界

Revlon

28个化妆品网站欣赏-美丽将拯救世界

benefit

28个化妆品网站欣赏-美丽将拯救世界

Smashbox

28个化妆品网站欣赏-美丽将拯救世界

Sephora

28个化妆品网站欣赏-美丽将拯救世界

garnierusa

28个化妆品网站欣赏-美丽将拯救世界

Mary Kay

28个化妆品网站欣赏-美丽将拯救世界

Stila Cosmetic

28个化妆品网站欣赏-美丽将拯救世界

Maybelline

28个化妆品网站欣赏-美丽将拯救世界

ELF

28个化妆品网站欣赏-美丽将拯救世界

Wella

28个化妆品网站欣赏-美丽将拯救世界

Esteelauder

28个化妆品网站欣赏-美丽将拯救世界

Clean and Clear

28个化妆品网站欣赏-美丽将拯救世界

Nivea

28个化妆品网站欣赏-美丽将拯救世界

BHcosmetics

28个化妆品网站欣赏-美丽将拯救世界

Tarte

28个化妆品网站欣赏-美丽将拯救世界

Inoa

28个化妆品网站欣赏-美丽将拯救世界

下面收集了32个超赞的最时尚的复古网站。陈旧的配色、50年代灵感的广告、稀烂的纸浆。在这些超赞的复古的网页设计中,得到启发!

老罗(罗永浩)是一个英语界的著名老师、博客界的牛博网创始人、老罗英语培训的创始人、高中辍学,曾经摆地摊、开羊肉串店、倒卖药材、做期货、销售电脑配件、从事文学创作。说了这么多就是想说他的发布会视频出来了,喜欢老罗的再来欣赏一下他的演讲天赋吧!

image

锤子UI(Smartisan OS)发布会官方视频

image

更大更薄无Home键,多种颜色选择炫爆眼! 俄罗斯果粉AppleInsider.ru设计的这款i6最大亮点在,Home键不见了,外媒猜测很可能是通过手势或运动控制......如果i6真的长这样符合你期待吗?

iPhone6参数

宽度:55.7毫米

长度:108.5毫米

厚度:7.1毫米

显示器对角线:106.7毫米= 4.2英寸

分辨率:1136x640

PPI =310.45

不知道真正6发布的时候会不会还是1136x640这个奇葩的分辨率,连720P都没到...

Powered By Z-BlogPHP 1.5 Zero

Copyright webexp.cn Rights Reserved.

本站基于 阿里云服务器 + Ename域名 + Z-Blog 构建   |   站点地图   |   辽ICP备13003381号-4