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

标签： HTML & CSS CSS3 | 发表时间：2014-03-27 15:27 | 作者：设计 达人
出处：http://www.shejidaren.com

很多设计师在交付设计稿给客户预览时，都喜欢把自己的作品放在一些手机模型或电脑模型上演示，这样可以让客户看到最终的效果输出，所以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和下载它。

Copyright ©2010-2014 ¦ RSS订阅 ¦ 新浪微博 ¦ 本文链接 ¦ 添加评论
交流：UI设计交流群：59300679，与500名设计师交流设计，分享素材。

相关 [css 手机 设备] 推荐：

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

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

利用css @viewport 做设备适配

- - 进步博客
在需要调整设备浏览器的viewport时，我们通常在HTML中使用来解决. 但是令人意想不到的是，viewport meta标签并不具有“规范性”，即它不是W3C的正式标准，也非Web标准. Apple公司率先在其iPhone中的Safari浏览器中实现了viewport meta标签，其他浏览器厂商也快速采纳了它.

CSS图形

- GLORY - 酷壳 - CoolShell.cn
下面的示例展示了使用纯CSS制作的各种图形，你可以自由地修改文中的CSS代码. 经测试，IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.

用 Compass 寫 CSS

- Jay - Blog.XDite.net
最近在開發一個新產品，整體來說應該是接近寫完了，不過越接近完工，抓 IE 系列的 bug 就越是挫折. 朋友 @evenwu 就來洗我要不要換成 Compass，說這東西超神奇，超好用，還可以把 IE bug 殺光光. 其實之前就久仰 Compass 大名了，只是文件實在看起來太他媽的眼花繚亂，因為專案進度一直在跑，不太敢貿然換掉寫 CSS 的方式.

CSS 入门

- - 博客 - 伯乐在线
级联样式表非常简单，也就是 (X)HTML 网页之上的分层设计. 使样式表 “级联”，这样您就可以跨站点应用它 — 也就是说，将样式应用到网站，它就会自行应用到每个网页的每个元素. ●XHTML：可扩展 HTML. 对于网站，将数据与设计分离是一个重要的概念：数据使用 (X)HTML 发送到 浏览器，而设计使用 CSS 应用到该数据.

css 圆角

- - CSDN博客推荐文章
作者：kangquan2008 发表于2012-2-20 22:32:24 原文链接. 阅读：6 评论：0 查看评论.

CSS架构

- - 博客 - 伯乐在线
英文原文： CSS Architecture，编译： CSDN-张红月. Philip Walton 在AppFolio担任前端工程师，他在Santa Barbara on Rails的聚会上提出了CSS架构和一些最佳实践，并且在工作中一直沿用. 擅长CSS的Web开发人员不仅可以从视觉上复制实物原型，还可以用代码进行完美的呈现.

CSS总结

- - CSDN博客Web前端推荐文章
         接触过一段CSS，为简单理解，将CSS说成两步，一步是你做个“记号”，另一步是根据记号设置样式.      网页的内容和样式是分开的. “记号”便是能标识网页中某部分内容的关键字词（选择器），而根据记号设置样式呢，就是按图索骥根据记号设置标识的那部分内容的样式.     这段时间练习的每个CSS小例子，或是用id做记号，或是用name，或是用class，只有有了这些所谓的记号，CSS设定的样式才有用，.

CSS基础

- - CSDN博客Web前端推荐文章
1、引入CSS的四种方式. 行内样式、内嵌样式、链接样式、导入样式. 基本选择器：标签选择器，ID选择器，类选择器，通用选择器. 通用选择器：*{css代码}. 通用选择器作用：对整个网页中所有HTML标签进行样式定义. 常见用法：定义*{margin:0;padding:0}通用样式，并置于CSS文件最顶端，用于对HTML内所有的标签进行重置以保证页面能兼容多种浏览器.

手机设备的唯一标识符

- - 移动开发 - ITeye博客
有很多场景和需求你需要用到手机设备的唯一标识符. 在 Android中，有以下几种方法获取这样的ID. The IMEI: 仅仅只对Android手机有效:. 采用此种方法，需要在AndroidManifest.xml中加入一个许可： android.permission.READ_PHONE_STATE，并且用户应当允许安装此应用.