手机设备Mock Up模型

素材 4年前 (2014-03-29) 8,492 人围观 2

设计师在交付设计稿给客户预览时,都喜欢把自己的作品放在一些手机模型或电脑模型上演示,这样可以让客户看到最终的效果输出,所以MOCK UP我们应该收藏一些,在今天的文章中,我们分享8个纯CSS编写的手机设备Mock Up模型,手机品牌有很多哦,如:iPhone5S/5C、诺基亚的Lumia 920、HTC、三星等等,下面一起看看介绍。

8-Pure-CSS-Flat-Mobile-Devices

这组手机Mockup由Marvelapp分享,通过CSS样式编写如此漂亮的扁平化手机设备,确实很赞。

设备模型和颜色

  • iPhone 5S(颜色:黑·白·金)
  • iPhone 5C(颜色:白·红·黄·绿·蓝)
  • iPad mini(颜色:黑色·白色)
  • iPhone 4S(颜色:黑色·白色)
  • Nexus 5
  • Lumia 920(颜色:黑·白·黄·红·蓝)
  • 三星 S5(颜色:白色·黑色)
  • HTC one

垂直&水平切换

此外,我们可以点击LANDSCAPE链接来切换模板的水平和垂直展示,点击其它描点为切换颜色。
lumia-920-1

图:垂直视图

lumia-920-2

图:水平视图,点landscape切换

使用方法

#iphone5s.landscape.gold .device .inner .sleep .volume .camera .top-bar .sensor .speaker .screen 显示屏文字 .bottom-bar .home

就介绍这么多,大家可以点击下面的连接去看看Demo和下载它。