现代 CSS

藤藤每日一练——345 Brankic Icon UI

藤藤每日一练——345 Brankic Icon UI

这个ICON库工程真是浩大,其实藤藤整理出来是350个ICON,可是被我弄丢了五个,找不回来了,真是罪过罪过呀,实在找不回来的情况之下,我只好把她的350个ICON换成了一个345个ICON标题。这个345个ICON是由Branic字体库生成,可以说,你需要的ICON图标都基本上全了,有生活的、有工业的、有技术的等等,不信你自己看看。我是信了。(^_^),制作方法是不用了说,主要是大家苦于没有这样的字体库,那么现在我们给大家提供了,需要的就直接下载吧,不过转载的话,注明一下来源哟,别让我们辛苦过后一点余香都没了。

Medial Queries的另一用法——服务于IE

随着Responsive设计的流行,Medial Queries可算是越来越让人观注了。他可以让Web前端工程实现不同设备下的样式选择,让站点在不同的设备中实现不同的效果。这个早前在w3cplus已经介绍过,如果你还没有接触,不仿点击这里详细阅读。今天在看blog时发现一个其他的使用方法,就是利用@media来做一些IE下的特殊效果。

藤藤每日一练——172个Iconic Icon UI

藤藤每日一练——172个Iconic Icon UI

关于@font-face制作ICON的技巧不在是技巧了,最主要的关键是如何得到这些icon的svg等字体文件,今天藤藤为大家整理了另外一个字体库“iconic”,这个字体库包含了172个常用的ICONl图标,希望大家喜欢。至于怎么制作,就不用我说了,因为站上这方面的案例和实现方法已经介绍很多篇了,如果你是第一次接触,你可以在搜索框中搜索“icon”,这样在w3cplus会给你呈现出你需要的icon制作方法教程与相关案例。那么到今天为止,藤藤在w3cplus上为大家共提供了五份有关于字体制作 icon图标的案例,有兴趣的围观吧。

iPhone Checkbox Effects

iPhone Checkbox Effects

iPhone Checkbox Effect是一个很经典的CSS3的案例了,这样的效果到处可见,如果你还不清楚怎么制作的话,可以点击这里,阅读详细的制作方法。而且w3cplus有关于checkbox的制作方法教程也蛮多的,前不久,藤藤每每日一练中就有一个优秀的案例,今天我只是把以前教程中运用的demo整理放上来,希望对新学习的同学有所帮助。

藤藤每日一练——163 Entypo Icon UI

藤藤每日一练——163 Entypo Icon UI

站上放了好几个ICON UI,这些ICON UI其实没有特别之处,从效果上看,但他们具有一个共同点,都是使用@font-face来实现这些ICON的效果,而他们之间的区别是这些ICON都是使用了不同的字体。今天这个例子,藤藤给大家整理了一份163个Entypo ICON效果,希望大家喜欢,并能在项目中使用上。

CSS3 Share Tooltip

CSS3 Share Tooltip

这个例子的效果其实很早就分享了,可能有很多同学不知道这个网址,当初是想做一个纯CSS3案例分享的网站,但由于时间和精力有限,最终胎死腹中,还好,在w3cplus主站上开了这样一个专栏,那些效果又可以面世了,今天开始抽空将把以前那些自认为还可以一看的demo效果移上来。今天转移过来的是第一个案例效果,共享按钮的提示效果,这个效果结构和样式都略有一定的难度,在学习这个属性之前最好先了解一下CSS3的animation,transform等属性的使用方法。感兴趣的继续往下吧。

23 Box-shadow Effects

23 Box-shadow Effects

Box-shadow效果是CSS3中很实用的属性之一,现在网站大量的阴影效果都是通过这个属性来制作,今天整理了23个盒子阴影效果以供大家参考。当然这个案例中的效果不单单是一些简单的box-shadow效果,在整个案例中,有些效果使用了CSS3的伪类选择器,以及CSS3的transform等属性,制作了一些特殊的box-shadow效果,感兴趣的往下吧。

藤藤每日一练——316 Icomoon Icon UI

藤藤每日一练——316 Icomoon Icon UI

经过一段时间的整理,Iconmoon Icon UI整理出来了,这个ICON UI总共具有316个不同的图标,所有图标都是通过@font-face来制作的。方法和前面介绍的制作Icon方法类似,如果你是初次接触,建议你先点击这里,阅读相关的文章。你会懂的。如果你知道是怎么一回事,那就继续往下吧,直接先浏览有什么样的图标,而且所有的图标,我们都配上了类名,使用时类名查询,就OK了。

藤藤每日一练——Pure CSS3 Animation Menu

藤藤每日一练——Pure CSS3 Animation Menu

这个效果是没有任何设计图,也没有任何参照样版,藤藤从设计到效果一线完成。使用了CSS3的animation、transform、transition制作了一个动画导航效果,其中利用了Ligature Icon UI制作了导航中的ICON图标。当然还使用了CSS3的其他属性,比如说圆角属性制作了一个圆形,使用opacity控制菜单的动效果效果,最明显的效果是鼠标悬浮时会放大当前菜单项,怎么实现的,你知道?我想你知道的,要是不知道就继续往下看吧。

CSS3制作秒表

CSS3制作秒表

CSS3制作秒表效果,以前想都不敢想,但thecodeplayer.com却完美的使用了CSS3中的animation属性制作了一个纯CSS3的秒表计时器的效果,让我们想都不敢想象,曾经需要javaScript的效果,如今使用CSS3的几个属性就完成了。在这个效果中主要是控制时间数字的显示,本例中每个数定的宽度和高度都定死了,其动画实现主要逻辑是通过对数字进行绝对定位,依靠改变数字的“top”属性值来实现时间数字的变更,当关还需要大家计算好他们之间转换的速率。所以说这个例子绝对是一个练习CSS3的animation属性的好例子,你要是掌握了这个例子,我想你对animation会有一个质的认识,希望大家喜欢(^_^)。

页面

返回顶部