Responsive设计的十个基本技巧

CSS3控制图片全屏显示,或者说使用CSS3制作全屏背景不是一个很大的问题,前面也有做过一定的讨论,但使用CSS3制作一个全屏slider效果,我想对于一部分同学来说还是有一定的难度。不过话说回来,如果你掌握了CSS3的属性,比如说:CSS3的选择器、animation、transition等等,制作这样的一个效果就会轻松的很,不信你试试。
今天把《CSS3制作超酷的SearchBox》教程中的案例整理了一下,把教程中的DEMO单独拿出来与大家分享。这个DEMO中一共制作了四个不同的搜索表单的效果,希望大家喜欢。
这个ICON库工程真是浩大,其实藤藤整理出来是350个ICON,可是被我弄丢了五个,找不回来了,真是罪过罪过呀,实在找不回来的情况之下,我只好把她的350个ICON换成了一个345个ICON标题。这个345个ICON是由Branic字体库生成,可以说,你需要的ICON图标都基本上全了,有生活的、有工业的、有技术的等等,不信你自己看看。我是信了。(^_^),制作方法是不用了说,主要是大家苦于没有这样的字体库,那么现在我们给大家提供了,需要的就直接下载吧,不过转载的话,注明一下来源哟,别让我们辛苦过后一点余香都没了。
随着Responsive设计的流行,Medial Queries可算是越来越让人观注了。他可以让Web前端工程实现不同设备下的样式选择,让站点在不同的设备中实现不同的效果。这个早前在w3cplus已经介绍过,如果你还没有接触,不仿点击这里详细阅读。今天在看blog时发现一个其他的使用方法,就是利用@media来做一些IE下的特殊效果。
关于@font-face制作ICON的技巧不在是技巧了,最主要的关键是如何得到这些icon的svg等字体文件,今天藤藤为大家整理了另外一个字体库“iconic”,这个字体库包含了172个常用的ICONl图标,希望大家喜欢。至于怎么制作,就不用我说了,因为站上这方面的案例和实现方法已经介绍很多篇了,如果你是第一次接触,你可以在搜索框中搜索“icon”,这样在w3cplus会给你呈现出你需要的icon制作方法教程与相关案例。那么到今天为止,藤藤在w3cplus上为大家共提供了五份有关于字体制作 icon图标的案例,有兴趣的围观吧。
iPhone Checkbox Effect是一个很经典的CSS3的案例了,这样的效果到处可见,如果你还不清楚怎么制作的话,可以点击这里,阅读详细的制作方法。而且w3cplus有关于checkbox的制作方法教程也蛮多的,前不久,藤藤每每日一练中就有一个优秀的案例,今天我只是把以前教程中运用的demo整理放上来,希望对新学习的同学有所帮助。
站上放了好几个ICON UI,这些ICON UI其实没有特别之处,从效果上看,但他们具有一个共同点,都是使用@font-face来实现这些ICON的效果,而他们之间的区别是这些ICON都是使用了不同的字体。今天这个例子,藤藤给大家整理了一份163个Entypo ICON效果,希望大家喜欢,并能在项目中使用上。
这个例子的效果其实很早就分享了,可能有很多同学不知道这个网址,当初是想做一个纯CSS3案例分享的网站,但由于时间和精力有限,最终胎死腹中,还好,在w3cplus主站上开了这样一个专栏,那些效果又可以面世了,今天开始抽空将把以前那些自认为还可以一看的demo效果移上来。今天转移过来的是第一个案例效果,共享按钮的提示效果,这个效果结构和样式都略有一定的难度,在学习这个属性之前最好先了解一下CSS3的animation,transform等属性的使用方法。感兴趣的继续往下吧。
Box-shadow效果是CSS3中很实用的属性之一,现在网站大量的阴影效果都是通过这个属性来制作,今天整理了23个盒子阴影效果以供大家参考。当然这个案例中的效果不单单是一些简单的box-shadow效果,在整个案例中,有些效果使用了CSS3的伪类选择器,以及CSS3的transform等属性,制作了一些特殊的box-shadow效果,感兴趣的往下吧。