会员专栏

Responsive设计的十个基本技巧

Responsive Design对于我来说一点都不陌生,从他在这个互联网出现的时候,就一直在观注他的成长,而且在w3cplus站上也分享了很多这方面的教程和资源。由于组织了YY活动在线上和大家分享Responsive的设计,为了能让大家更好的理解,我自己也有必要好好的做一下功课,今天这个就是功课,想和大家一起分享一下Responsive设计的一些基本技巧,和相对应的学习资源,希望对大家有所帮助。

细说百度图片栏目——图片展示效果

今天写个DEMO效果时,无意之中在Baidu图片中发现其图片列表使用了CSS3的transform,transition,box-shadow等属性。这是不是可以说百度在开始引领国内的CSSer开始使用CSS3相关属性呢?如果是的话,那这对于前端开发人员来说是一件福事。毕竟百度是国内互联网中大企业之一,他的一些举动都将有很多前端人员跟随着。这些都是我个人的猜想,仅供参考,因为我就是一个CSS3的爱好者,今天我想拿这个效果来说说自己的想法。如有不对还请谅解。

Tabs with Round Out Borders

前几天藤藤在每一练中写了一个《CSS3制作Twitter信息框》效果,酷似Chrome浏览器的tabs效果:

藤藤每日一练——CSS3制作Twitter信息框

CSS3的calc()使用

calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分。因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性能实现自适应的布局,首先让我想到的是box-sizing,但跟我说还可以计算,这让我不得不想起calc()。因为早先在官网和一些blog上看到相关的介绍,但一直没有深入,也没有自己去测试过。今天花了一下午的时间彻底学习了一下calc()。于是就有了这篇blog,希望对大家有所帮助。

使用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的响应式设计的兴起,前面跟大家一起学习了:

页面

返回顶部