会员专栏

使用CSS3的appearance属性改变元素的外观

前段时间在《修复iPhone上submit按钮bug》中介绍了使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格,其实我们可以反过来思路,使用“appearance”属性,来改变任何元素的浏览器默认风格,简单的说,你可以使用“appearance”属性将“段落p”渲染成button的风格,也可以渲染成“输入框”、“选择框”等效果。那么今天在这篇文章中我们一起来体会一下“appearance”的使用。

自定义Font Icon

前段时间在《@font-face制作Web Icon》一文收集了三种webfont通过CSS3@font-face来制作Icon图标。现在在网上最为流行的是@robmadole@supercodepoet两位大师制作的Font Awesome

如何解决inline-block元素的空白间距

有关于使用inline-block来代替float的讨论也蛮多的,最常说的就是使用inline-block来代替float进行布局,或者使用inline-block来实现元素的居中效果。前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的居中效果,不过留下了一上问题,就是使用inline-block的元素之间会存在“4px”的空白间距。那么今天我们就一起来说说这个“4px”的问题。

大家首先来看一个DEMO

CSS3 Media Queries在iPhone4和iPad上的运用

CSS3 Media Queries的介绍在本站上的介绍已有好几篇文章了,但自己碰到的问题与解决的文章还是相对的较少。前几天在《修复iPhone上submit按钮bug》上介绍了修复form中sumit按钮的bug。同一个项目,为了实现iPhone和iPad横板与竖板的风格,让我还是头疼了一翻。

一开始按照CSS3 Media Queries模板中的介绍来运用,虽然帮我解决了iPad的横板与竖板的风格渲染问题,但在iPhone4上还是存在问题的。后来结过网上的查找,总算是问题解决了,下面就来看看问题是如何解决的。

在具体开始之前,先来看看他的源码:

修复iPhone上submit按钮bug

自从完成上次iPhone的几个页面效果后,一直在没有制作iPhone的页面效果了,今天在公司写了一个登录页面效果,让我碰到一个怪异的问题——“表单中的input[type="submit"]和input[type="reset"]按钮在iPhone的safari浏览器下圆角有一个bug”。下面我来简单的描述一下这个bug的样子:

初载入页面后,表单中的input[type="submit"]和input[type="reset"]按钮渲染成下图的样子:

奇怪的是你点击以后就会正常:

对比一下,你也会觉得怪,怪都算了,还不知道如何下手:

CSS3 Media Queries模板

最早在《CSS3 Media Queries》一文中初探了CSS3的媒体类型和媒体特性的相关应用。简单的知道了使用这个能在各种不同的设备显示不一样的样式风格。随着Responsive的响应式设计的兴起,前面跟大家一起学习了:

CSS3制作iPhone的Checkbox

iPhone上的UI的确是精致,让人爱不释手。今天用CSS3写了一个Checkbox的效果,采用了两种不同的方法来实现,另外在此基础上写了一个我们常用的checkbox的效果。

众所周知,想要美化表单中的元件,都少不了jQuery的帮忙,有关于这方面的介绍,本站也有过几篇相关的文章,比如说《美化表单——自定义单选按钮和复选按钮》、《自定义表单——JQuery制作个性化Checkbox》和《美化表单——自定义Checkbox和Radio样式》。那么有没有办法不使用jQuery呢?就是大家所说的纯CSS?如果你看了这篇文章后,你就会说,原来也可以实现呀。

CSS制作Facebook的媒体对象

前面在《OOCSS——核心篇》一文中有简单的提到Facebook的媒体对象(有的地方称作为“信息状态块”)的制作。那么今天老话重谈,主要使用不同的几种结构来制作这个媒体对象效果:

我们把上图拆分细化一下,可以划成下图的样子:

根据上图我们就可以轻松的写出需要的HTML结构。

HTML Markup:

CSS3制作动画加载页面

今天主要想和大家一起探讨一下如何使用CSS3制作页面加载内容的动画效果。听起来可能有点晕晕的,我简单的说一下吧,这种效果就是浏览器加载你的页面时,给页面的内容赋予一个动画效果,让他不在那么生硬。最早看过这种效果是小志Blog首页。今天特意看了一下志哥的写的代码,才知道实现起来并不是很困难的事情,不信大家一起来看看我扣出来的代码。

小志博客首页

别的我不多说,我直接使用firebug把志哥的Blog首页代码扒出来,下面我分为两部分:

HTML markup

CSS3 Filter的十种特效

最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果。今天终于抽出时间学习这个CSS3的Filter。不整不知道呀,一整才让我感到吃惊,太强大了。大家先来看个效果吧:

页面

返回顶部