css3

HTML5实例教程第一期——制作酷炫音频播放器插件

HTML5音频播放器

这一期,白牙同学来教大家如何利用HTML5的Audio API结合CSS3 + jQuery来制作一个酷炫的音频播放器插件,在对这三个知识有一定基础却又不知道能做出点什么的同学或许可以好好看看这次的案例,俗话说实践是检验真理的唯一标准,如果你觉得自己基础足够好但又缺乏实践,或者是想进一步提高,都可以参照本案例来学习与实践。

主要功能:

一、播放、暂停、上一首、下一首、音量增减
二、点击CD可以打开和关闭播放列表
三、可以拖动本地音乐文件到播放器进行播放

css3制作后台管理面板

css3制作后台管理面板

今天为大家带来一个CSS3制作的网站后台管理面板的模板。主要运用到了CSS3新增加的target伪类结合opacity来制作Tab选项卡,以及fontface制作图标等,另外还通过这个- -input-placeholder伪类来统一placeholder内字体在各个浏览器下的样式,具体请看代码注释。

太棒了!border 打造钻石王老五,发家致富值得学习!

钻石一枚

今天给大家带来钻石图形demo,主要使用了 border.请用 Chrome 浏览器浏览.

太棒了!mask 轻松构建炫酷CSS探照特效!

太棒了!mask 轻松构建炫酷CSS探照特效!

今天 993 为大家带来 mask  的新 demo,打造过程比前作复杂一些,本作代号是:Think different,希望大家能喜欢小弟做的 demo,多提建议帮助我改进。(请在 Chrome 下浏览)

太棒了!mask 简单构建刀光一闪效果!

太棒了!mask 简单构建刀光一闪效果!

今天将介绍遮罩属性 —— mask 的简单 demo。 mask 属性暂时只有 webkit 浏览器支持,使用需要加标识符。案例中用到的缩写均可展开,特别需要强调的是 mask-origin 这个属性,指定了遮罩的初始位置。默认是 padding,本例中设置为 content。

CSS3 Hover Effects

CSS3 Hover Effects

这个案例效果很像lightbox的效果,鼠标悬浮在图片上时,会将图片放大,并且移至页面中心位置。这个效果的实现并没有使用太多的技术,最关键的就是使用了CSS3 transform中的scale和translate,其中使用scale()来放大图片,而translate()用来改变其位置,另外使用了CSS3选择器的:nth-type-of()分别对六张图片进行放大和定位。同时使用了transition属性,让整个图片放大效果看起来更圆润,详细的效果看代码吧,更有说服力。

藤藤每日一练——CSS3制作分步注册表单

CSS3制作分步注册表单

这个DEMO是使用CSS3制作的一个分步注册表单,每个input对应的是每一步,在表单得到焦点时,对应的step也会进行对应的改变。不过这个效果是使用js代码来实现,但整个表单的外观是由CSS3来完成的,整个案例中使用了:@font-face来制作icon图标,使用gradient来制作渐变的按钮效果,使用text-shadow来制作文字阴影效果等等,方便简单点,但细节与创意才是最重要的,喜欢的同学可以看看是怎么实现的吧。

藤藤每日一练——CSS3 Chunky Button Pack

藤藤每日一练——CSS3 Chunky Button Pack

这是一个CSS3使用gradient、box-shadow制作的按钮集合,在w3cplus有关于按钮方面的实例不少,随便搜索css3 button就会有大把相关介绍。今天老调重谈,还是使用按钮的制作,不过这里想给大家呈现的一种思想是,只要你敢想,就有实现的方法,在这里一共展示了15种不同颜色的按钮,而且在":hover"和“:active”下都有不同的效果。制作方法是一样,但配色,特别是gradient实现渐变色还是需要一定的功底的,不信你就试试吧,我可是信了,因为我也做不到。(^_^)

藤藤每日一练——CSS3制作Freebie标签

藤藤每日一练——CSS3制作Freebie标签

这个案例主要使用css3来制作标签,不过使用的的属性还是常见的那几种,可是要实现还是有一定的难度。其中最有亮点的是使用css3来实现斜线背景以及方格背景,然后就是使用@font-face来制作icon图标。原理简单,重要的是思路,以及这两种背景实现的细节。感兴趣的同学直接看源码。

CSS3重构百度图片首页中图片展示效果

CSS3重构百度图片首页中图片展示效果

今天使用百度图片搜索图片时,无意之中看到首页的图片展示效果具有旋转、阴影等效果。好奇之下查看其源码,使用了一些CSS3属性制作,但不知道出与什么原因,在制作这个效果中并不什么完美(我个人认为),于是动手自己整了一个,放上来与大家分享,希望大家喜欢

页面

返回顶部