博客
-
作者: Airen发布时间: 5月05,12今日点击: 9总点击数: 246前段时间在《@font-face制作Web Icon》一文收集了三种webfont通过CSS3的@font-face来制作Icon图标。现在在网上最为流行的是@robmadole和@supercodepoet两位大师制作的Font Awesome：两位大师给大家准备近两百种不同的Icon图标，都是使用@font-face应用自定义的字体实现的。但有一个不足之处，有很多图标，我们无法使用字符或者实体符来识别，如果需要使用，只能把所有标签都应用，有时我们只需要一两个，而使用这么一个庞大的字符系统，好像有点不太划算。那么今天我要给大家介绍的是使用网络工具Fontomas自定义需要的font icon...
-
作者: Airen发布时间: 5月03,12今日点击: 20总点击数: 422有关于使用inline-block来代替float的讨论也蛮多的，最常说的就是使用inline-block来代替float进行布局，或者使用inline-block来实现元素的居中效果。前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的居中效果，不过留下了一上问题，就是使用inline-block的元素之间会存在“4px”的空白间距。那么今天我们就一起来说说这个“4px”的问题。大家首先来看一个DEMO：HTML Markup <ul> <li>item1</li> <li...
-
作者: Airen发布时间: 4月12,12今日点击: 4总点击数: 638CSS3 Media Queries的介绍在本站上的介绍已有好几篇文章了，但自己碰到的问题与解决的文章还是相对的较少。前几天在《修复iPhone上submit按钮bug》上介绍了修复form中sumit按钮的bug。同一个项目，为了实现iPhone和iPad横板与竖板的风格，让我还是头疼了一翻。一开始按照CSS3 Media Queries模板中的介绍来运用，虽然帮我解决了iPad的横板与竖板的风格渲染问题，但在iPhone4上还是存在问题的。后来结过网上的查找，总算是问题解决了，下面就来看看问题是如何解决的。在具体开始之前，先来看看他的源码： <!DOCTYPE HTML>...
-
作者: Airen发布时间: 4月07,12今日点击: 2总点击数: 677为了让Web页面在手机上显示流畅，现在国外很多网站都使用Responsive设计和CSS3 Media Queries的结合来实现。这样的实例到处可见，那么今天我想和大家一起学习的是有关于这种方法实现手机布局中的导航制作。如果你的导航选项比较多，放到手机上来浏览就会挤到一起，造成美观性的不足。下面为了解决这样的问题，我们就一起跟随Nick La写的教程《Mobile Navigation Design & Tutorial》学习如何使用jQuery来解决刚才所说的问题。问题的描述下面的截图说明了导航布局在手机上的问题。如果你的导航只有三到四个选项，如Web Designer Wall网...
-
作者: Airen发布时间: 4月06,12今日点击: 6总点击数: 409自从完成上次iPhone的几个页面效果后，一直在没有制作iPhone的页面效果了，今天在公司写了一个登录页面效果，让我碰到一个怪异的问题——“表单中的input[type="submit"]和input[type="reset"]按钮在iPhone的safari浏览器下圆角有一个bug”。下面我来简单的描述一下这个bug的样子：初载入页面后，表单中的input[type="submit"]和input[type="reset"]按钮渲染成下图的样子：奇怪的是你点击以后就会正常：对比一下，你也会觉得怪，怪都算了，还不知道如何下手:或许很多同学会认为我的样式代码没写好，那么想让大家知道是怎么一回事...
-
作者: Airen发布时间: 4月04,12今日点击: 5总点击数: 562@font-face是CSS3中有关于字体设置的属性，通过@font-face可以将本地字体设置为Web页面字体，并能兼容所有浏览器，使用这个属性就不必担心用户本地不具备这样的字体。因为我们把字体都上传到服务器上，不过这样一来很多人担心影响性能问题。鱼和熊掌不能兼得嘛，我们就不在为这个问题说太多的话了，不过我今天要与大家分享的主题和这个@font-face还是有很在关系的，使用他配合一定的字体来制作Web页面中的Icon图标。初一看有点不实际，以前的Icon都是依靠图片来完成，怎么可能用字体就能实现呢？如果你以前有用过HTML的实体符，我想就不会那么惊奇了。如果你以前关注过本站，我想这个你并不...
-
作者: Airen发布时间: 4月04,12今日点击: 3总点击数: 405最早在《CSS3 Media Queries》一文中初探了CSS3的媒体类型和媒体特性的相关应用。简单的知道了使用这个能在各种不同的设备显示不一样的样式风格。随着Responsive的响应式设计的兴起，前面跟大家一起学习了：《Responsive设计和CSS3 Media Queries的结合》《了解Responsive网页设计的三个特性》《Responsive设计的关键三步》从这几篇文章中可以知道，在Responsiv的设计中，CSS3的Media是起着非常关键性的作用，也可以说没有CSS3 Media这个属性，Responsiv设计是玩不起来，也是玩不转的。大家都知道Responsiv是为...
-
作者: Airen发布时间: 4月03,12今日点击: 1总点击数: 456前面在CSS3 Ribbons一文中介绍了一个纯CSS3制作的“Ribbons”效果，今天收集了更多的“Ribbons”效果，以供大家参考与学习，希望大家能喜欢。在看具体每个demo之前，我们一起来看下面一个截图：上图是一个典型的“Ribbons”各部位的示意图，但每一个“Ribbons”并不会都使用上图示意的各个部分，在下面的实例中大家可以明显的看到或者说感受到。别的我就不多说了，我想上图能示意出“Ribbons”各个部位。那么每个部位我们可以使用一个“html”标签，当然有了CSS3的伪元素“::before”和“::after”后，我们可以省去一些标签。效果一：HTML Markup...
-
作者: Airen发布时间: 4月03,12今日点击: 9总点击数: 654Timeline是VeriteCo写的一个jQuery插件。它将一连串的事件集合到一起，按时间轴的顺序展示这些发生的事件。你可以将各种媒体、图片、视频、地图等相关信息插入到timeline。结合设计可以完美的展示你的工作效率或者更强的信息。比如说你一年，或者多年下来人生中的大事等。VeriteCo的Timeline与Facebook的timeline都有类似功能之处。前面在jQuery制作Facebook Timeline一文中学习了Facebook的timeline使用。今天主要想让大家和我一起跟着VeriteCo和Martin Angelov 学习如何使用timeline。准备工作要成功的...
-
作者: Airen发布时间: 4月02,12今日点击: 10总点击数: 374前几天在W3cplus Demo站上放了一个CSS3 Sliding Form Helps效果。今天我们就一起来看看他是如何实现的。实现方法在表单制作中，往往都在一个input后面或者右边有一个提示框效果，特别是表单验证的制作上。有错误的，警告的，正确的等多种帮助信息。以前大多数看到的有提示信息一直显示，第二种，当表单验正完后显示提示信息，第三种就是input得到焦点时提示用户如何操作。而这些效果以前都是依附在jQuery的上面实现，今天我想和大家一起探讨的是使用CSS3来实现。实现原理也是来源于jQuery，在这个案例中，当表单载入时，所有提示信息都处理隐藏状态，一但input得到焦点，相对...