随笔分类 - HTML5/CSS3
摘要：在今天的课程中，我将向大家介绍如何使用css3创建3d的立方体。大家可以通过下面的链接浏览实际效果，操作上下左右键，实现立方体的翻转效果。 demo地址：http://www.paulrhayes.com/experiments/cube-3d/ demo下载地址：animated-css3-cube.zip 下面我们开始介绍如何制作。 html：<div id="experiment"> <div id="cube"> <div class="face one"> One face ...
阅读全文
摘要：今天读了篇关于如何使用css3创建3d四面体的文章，觉的相当不错，所以拿出来和大家分享一下。原文地址：http://www.paulrhayes.com/2010-10/css-tetrahedron/。 demo预览地址：http://www.paulrhayes.com/experiments/pyramid/。 首先要和大家分享的是，如何使用div+css创建三角形。在这里我先把相关代码粘贴出来，然后再为大家讲解原理。 html：<div id="pyramid"> <div></div></div> css：<s
阅读全文
摘要：今天我们将介绍，如何使用css3完成google涂鸦动画。当你点击demo页面的【开始】按钮之后，页面中的骑手和马匹将会运动起来，http://www.mycookingroom.com/demo/google-doodle-animation-in-css3-without-javascript.html。 这里需要强调的一点是，ie不支持css3的动画属性，再次抱怨下万恶的ie。但是我们不能以此为理由不去拥抱css3。 我们先来看html代码。<!DOCTYPE html><html><head> <title></title>
阅读全文
摘要：转载请注明原创地址：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/ 目的 在移动设备上显示信息，要做到寸土寸金，珍惜每一寸的屏幕。例如搜索框的设计，在一般情况下处于收缩状态...
阅读全文
摘要：最近我在重新设计自己的博客站点，决定用一个日历样式的icon显示时间。以前的解决方案一般是用背景图片，感谢css3，现在我们用css3就能实现这样的功能。我将会用到一些linear-gradients, border radius 和 box shadow这些属性来代替以前的photoshop设计。 photoshop 概念图 很多设计者采用直接在浏览器上设计的方式，但是我还是更喜欢先做photoshop的概念图的方式。虽然现在很多效果可以直接用css实现，但是用photoshop设计效果的方式比不断尝试修改css来最终达到你想要的效果的方式简单很多。 首先创建一个圆角矩形，设置圆角...
阅读全文
摘要：以前，在web上要显示灰度图片的话，只有手工使用图片软件转换。但是现在借助于html5的canvas可以实现这个过程，而不需要再借助图片编辑软件了。我用html5和jquery做了一个demo，来展示如何实现这个功能。demo地址：http://webdesignerwall.com/demo/html5-grayscale/目的这个demo将会向你展示用html5和jquery，如何实现鼠标在图片上移动移出时，灰度图像和原图之间的切换。在html5出现之前，要实现这个功能就需要准备两个图片，一个灰度图片，一个原图。但是现在借助于html5可以实现的更快更容易，因为灰度图片是直接在原图上生..
阅读全文
摘要：demo地址：http://www.mycookingroom.com/geo.html 今天我们将把html5的geolocation结合google maps开发一个小的应用。google maps的api地址：https://developers.google.com/maps/documentation/javascript/?hl=zh-CN。 调用google maps，实现需要添加js引用<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=f
阅读全文
摘要：今天我们的内容是关于如何创建离线web应用，他的好处是可以让浏览器下载我们指定的web资源，这样用户在离线状态下也能正常使用我们的站点。 1.定义Manifest 我们使用manifest列举出需要离线时访问的资源，他本身是一个文本类型的文件，第一行经常是CACHE MANIFEST，然后列举我们需要的资源，每行一个。文件没有固定的命名规则，后缀名也没有要求，唯一的要求就是需要把后缀名在服务器端以text/cache-manifest的MIME类型定义。 如果是iis 7服务器，按照下面的步骤： 1.比如后缀名为.appcache，打开iis7，选择根节点（这样所有站点都会继承配置...
阅读全文
