css3

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属性制作,但不知道出与什么原因,在制作这个效果中并不什么完美(我个人认为),于是动手自己整了一个,放上来与大家分享,希望大家喜欢

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

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

今天与大家分享一款使用CSS3制作的Twitter信息分享框。在这个DEMO中,使用的CSS3属性还是那么几个,css3的渐变gradient,盒子阴影box-shadow,css3的选择器等,不过在这个案例中两个特色之处,一个是使用了":before"配合gradient制作了内凹圆角效果,类似于chrome浏览器上的tabs效果,这个效果可有点难度(思路来自于Tabs with Round Out Borders),还有一个亮点就是使用gradient制作了渐变的线条。想一探究竟的同学,看下面的代码吧。

页面

返回顶部