随笔分类 -  HTML5/CSS3

摘要:制作CSS3制作手风琴图片滑动效果,我们仅需利用CSS3的Transition属性和:hover 选择器简单几步就能完成该特效。 阅读全文
posted @ 2014-07-29 09:48 Li-Cheng 阅读(7244) 评论(28) 推荐(112) 编辑
摘要:Drop-Shadow效果,其实就是大家熟悉的内容盒子阴影效果,在没有CSS3之前,大家都是通过Photoshop制作。而有了CSS3后,我们只需要利用box-shadow配合两个伪元素:before和:after即可实现。首先我们需要给内容盒子添加相对定位属性,然后给其添加两个伪元素 :before和:after ,在伪元素上添加绝对定位属性和z-index属性,将其定位到盒子的底部。 阅读全文
posted @ 2014-07-19 09:40 Li-Cheng 阅读(1776) 评论(2) 推荐(2) 编辑
摘要:利用CSS3属性制作按钮,我们只需要用到Gradient属性,不用使用任何图片素材和JavaScript代码,仅仅通过CSS就能制作出好看的渐变按钮。按钮的大小可以通过CSS属性就能轻松的修改,而且它可以使用html的很多标签来制作,比如div,button,span,a,input[‘submit’]等等。 阅读全文
posted @ 2014-07-17 09:00 Li-Cheng 阅读(5423) 评论(12) 推荐(63) 编辑
摘要: 前端时间学校刚学完Struts2-Action篇,又自学了一点AJAX/JQuery,到网上看了一些CSS3知识。突然想要不要干脆做一个用户注册与登入功能。下面是JAVA部分的核心代码, 如果这样的逻辑和大家想的很有出入的话,欢迎拍砖劈斧,呵呵。 阅读全文
posted @ 2014-04-20 14:03 Li-Cheng 阅读(7363) 评论(37) 推荐(38) 编辑
摘要: 这是要结束了吗?是的,结束了。是不是很简单呢?等等,好像少了一点一样,哦,代码需要引入了Font Awesome矢量字体图标呢! 可这是什么东西呢?点击下面链接进行查看吧! 阅读全文
posted @ 2014-04-13 14:03 Li-Cheng 阅读(2742) 评论(12) 推荐(26) 编辑
摘要: 好吧,结束了,是不是太简单了。那赶紧动手试试吧。如果嫌代码太粗糙的话,自己进行代码重构吧,Oh,My God! ,我刚才是不是用了一个非常专业性的技术词汇呢?! 好吧,你们赢了,如果实在接受不了这种“低奢内”的登入表单的话,我已经到网上找了一个“高大上”的CSS3登入表单和大家分享,可以点击这里查看哦: 阅读全文
posted @ 2014-04-07 18:08 Li-Cheng 阅读(5821) 评论(28) 推荐(49) 编辑
摘要: 制作步骤: 一, 引入prefixfree.js脚本 下面代码中使用了CSS3无前缀脚本prefixfree.js,可以省去CSS3中前缀“-moz”、“-webkit”、“-o”、“-ms”,如对该脚本不了解的可以点击下面链接哦:CSS3无前缀脚本prefixfree.js与Animatable使用介绍,不过使用上还是略有出入,自己认真看看哦。 阅读全文
posted @ 2014-04-07 09:07 Li-Cheng 阅读(7173) 评论(25) 推荐(86) 编辑
摘要: 下面代码中使用了CSS3无前缀脚本prefixfree.js,可以省去CSS3中前缀“-moz”、“-webkit”、“-o”、“-ms”,如对该脚本不了解的可以点击下面链接哦:CSS3无前缀脚本prefixfree.js与Animatable使用介绍 阅读全文
posted @ 2014-04-04 15:32 Li-Cheng 阅读(11839) 评论(3) 推荐(14) 编辑
摘要:Font Awesome 为您提供了一套可缩放的字体矢量图标,可以快速自定义图标的大小,颜色,阴影,这些都可以通过CSS来实现,无需任何的JS代码哦。 阅读全文
posted @ 2014-03-29 13:58 Li-Cheng 阅读(6644) 评论(12) 推荐(35) 编辑
摘要:现代浏览器基本支持CSS3,但是一些旧版本的浏览器还是需要添加前缀的。像box-shadow, border-radius这类属性,目前较新版本的浏览器都是不需要前缀的(包括IE9),但是,有些CSS3属性,例如渐变,前缀少不了,每次都需要像盖高楼一样堆叠CSS3代码。 阅读全文
posted @ 2014-03-29 07:52 Li-Cheng 阅读(3334) 评论(4) 推荐(13) 编辑