随笔分类 - web
摘要：转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/25/2787555.html 从事过iphone响应式设计的人，一定清楚iphone safari浏览器viewport 缩放的bug。当你将viewport的宽度设计为设备宽度，并将iphone旋转到landscape 视图的时候，bug就会发生。你可以使用iphone访问demo地址，将视图从portrait 切换到 landscape，来查看该bug。今天我们将尝试修复这个问题。 问题 下面截图展示了该bug。 解决方案1：使用Meta标签快读修复（...
阅读全文
摘要：转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/25/2787559.html 响应式web设计现在已经不是一个难事了，如果你还不熟悉他，可以参看我的文章《HTML5实践 -- 流式响应式设计》。如果你是一个初学者，可能响应式设计对你来说有点发杂，但实际上他比你想象的要简单的多。为了方便你更快的学习响应式设计，我特意写了这个教程，通过简单的三个步骤你就能掌握响应式设计的基本逻辑和media queries（假设你掌握css知识）。 demo预览地址：http://webdesignerwall.com/demo/re...
阅读全文
摘要：转载请注明原文地址：http://www.cnblogs.com/softlover/archive/2012/11/25/2787558.html 当我编码Elemin Theme（我最近设计的一个响应式的站点）的时候，我遇到的一个跳帧就是，如何能让嵌入式的视频在尺寸变化上变得更加灵活。使用max-width:100% 和height:auto可以让html5的video标签很好的工作，但是这个解决方案不适用于iframe 或者 object标签的内嵌代码。通过几小时的寻找资料和实验，我最终找到了解决办法。当你在进行响应式设计的时候，这一css技巧能派上用场。你可以访问最终demo地址...
阅读全文
摘要：转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/20/2779900.html 大家都知道viewport标签对于响应式设计的意义，但是你们可能不清楚，他对于非响应式设计也有相当的作用。如果你的站点还是非响应式的，那么通过本文你将学会，如何使用viewport标签增强你站点在mobile设备上的显示效果。 Viewport标签的一般使用 Viewport meta标签一般用在响应式设计中，用来设计mobile设备viewport的宽度和initial-scale。<meta name="viewport&qu
阅读全文
摘要：转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/21/2781388.html 现在屏幕分辨率的范围很大，从320px (iPhone) 到 2560px (大型显示器)，甚至更大。用户也不只是使用台式电脑访问web站点了，他使用手机、笔记本电脑、平板电脑。所以传统的设置网站宽度为固定值，已经不能满足需要了。web设计需要适应这种新要求，页面布局需要能够根据访问设备的不同分辨率自动进行调整。本教程将会向你介绍，如何使用html5和CSS3 Media Queries完成跨浏览器的响应式设计。 demo预览地址：htt...
阅读全文
摘要：转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/25/2787429.html demo查看地址：http://www.webdesignerwall.com/demo/media-queries/ CSS2允许你对特定media类型制定样式，例如针对屏幕或者打印机。css3提供了更加强大的media queries，你可以针对不同media类型设置表达式，根据不同的条件设置不同的样式。例如你可以为大屏幕设置一种样式，为mobile设置另外一种样式。这个功能相当强大，你可以不修改页面内容的情况下，为不同设备提供不...
阅读全文
摘要：转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/20/2779893.html 在上一讲中，我们的解决方案使用到了jquery去创建一个span标签。在这一讲中我们将用一种更好的解决方式，使用:before 和 :after 伪类。:before经常会用到，他可以用来添加额外的元素。 demo预览地址：http://webdesignerwall.com/demo/decorative-gallery-2/ HTML 下面是一个ul列表代表的图片画廊。<ul class="gallery clip"
阅读全文
摘要：转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/20/2779890.html 本节课我们将介绍，如何使用css在不修改图片源的前提下装饰你的图片画廊。这里用到的技巧也很简单，就是在图片之前创建一个<span>，并在span上使用background-image生成一个遮罩的效果。这种方式既简单又灵活，demo中介绍了20多种样式，大家可以参看。 demo预览地址：http://www.webdesignerwall.com/demo/decorative-gallery/decorative-gallery-i
阅读全文
摘要：转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/20/2779878.html html5为web的form表单增强了一个功能，他就是input的占位符--placeholder。占位符的作用是，当input内容为空或者没有被聚焦的时候，input显示占位符的内容。这是个很棒的功能，但不是所有的浏览器都支持。本教程将向你介绍，如何使用Modernizr 类库去判断浏览器是否支持该属性，然后使用jquery动态显示占位符。 demo预览地址：http://webdesignerwall.com/demo/html5...
阅读全文
摘要：转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/23/2780892.html 之前的教程《HTML5实践 -- css3图片样式》，我介绍了如何为图片添加background-image包装，借助box-shadow 和 border-radius为图片设置多种多样的样式，有兴趣的朋友可以回头阅读。但是最近我在设计PhotoTouch主题的时候遇到了问题，background-image大小不能调整，这对于响应式设计就不太理想了。今天我们将尝试解决问题。 demo预览地址：http://webdesignerwal...
阅读全文
摘要：转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/22/2779876.html 在css3中，直接在图片上使用box-shadow 和 border-radius，浏览器并不能很好的渲染。但是如果把图片作为background-image，添加的样式浏览器可以很好的渲染。我将会介绍如何使用box-shadow, border-radius 和 transition创建不同图片样式效果。 demo预览地址：http://webdesignerwall.com/demo/css3-image-styles/ 问题 通...
阅读全文
摘要：转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/21/2779873.html 今天我们的内容是css3的text-shadow、box-shadow 和 border-radius几个属性的介绍，他能增强页面布局，值得学习。 RGBA 前三个值分别代码RBG的值，最后一个值代表透明度（0表示透明，1表示不透明）。 RGBA可以用于任何和color有关的属性，例如字体颜色、边框颜色、背景颜色和阴影颜色等。 文字阴影 文字阴影的结构按照这样的顺序：x-offset, y-offset, blur, 和 colo...
阅读全文
摘要：转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/20/2779845.html 今天我将介绍如何使用css制作一个可伸缩的mobile的搜索框，他非常适合于mobile的响应式设计的需要。本教程没有使用JavaScript，只使用了原生css属性，所以这是一个非常简单而高效的实现。 demo预览地址：http://webdesignerwall.com/demo/expandable-search-form/ 目的 在移动设备上显示信息，要做到寸土寸金，珍惜每一寸的屏幕。例如搜索框的设计，在一般情况下处于收缩状态...
阅读全文
