HTML & CSS » 8个纯CSS编写的手机设备Mock Up模型

8个纯CSS编写的手机设备Mock Up模型

发表于: HTML & CSS. 评论 (1)
Sponsor

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

其实大家也可以用这个来学习CSS,看看人家是怎么写的,然后自己做个练习出来,并不是很难的哦!相关推荐:前往《30个苹果系列产品模型》的分享,里面都是PSD或AI格式的素材,也是不错的选择!

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和下载它。

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论One Response to “8个纯CSS编写的手机设备Mock Up模型”

  1. Win7en乐园 - 回复

    卧考,这么厉害!


{ 发表评论 }