CSS3

玩转CSS3的颜色

前面我们整了一个有关于CSS3的颜色属性的教程《CSS3 RGBA》,在这个教程中主要介绍了CSS3的RGBA属性的使用。传统上,我们给CSS设置颜色一般都是十六进制和rgb格式,比如“#abcdef”,而使用相对应的RGB应该就是“brg(171,205,239)”。

CSS3的到来,在CSS样式中,我们增加了一些其他的颜色控制方式,比如:HSL(H:色调,S:饱和度,L:亮度)和透明度apacity。不幸的是,现在CSS3的这些属性只有Firefox3+,Opera10+,Chrome1.0+和Safari3+支持,而在IE6-8是不支持这些属性,但Internet Explorer 9开始支持这些属性。

12个真正有用的CSS3技巧

CSS3的出现无疑是一个强大的新东西,我现在在一些Web项目中开始在使用,很方便,同也很高兴能开始使用这一种新的技术。其先进的功能,给我们Web的页面制作真的带来极大的方便,比如说圆角、阴影、渐变等。这里我总结了常用的12种CSS3属性的使用,来帮助大家一起学习CSS3的新功能。

一、圆角——border-radius

早期制作元素的圆角都是使用图片来实现,这样需要增加多个标签来实现,而且对于多色的圆角,给我们的页面制作会带来极大的不便。有了CSS3的圆角属性——border-radius后,我们不必会每种不同的圆角制作图片而烦恼了,我们可以直接使用CSS3来制作。

		.demo {
			-moz-border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
			-webkit-border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
			border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
		}
	

具体效果如下:

CSS3制作Login栏

今天在这篇教程中主要想和大家一起探讨一下登录和注册表单的制作方法,具体如何制作一个表单,我在此就不多说了,我主要想说的是如何使用CSS3的相关属性来制作一个美丽而有简洁的表单风格。这篇教程的思路主要来自于Red大师的两篇博文《Simple and effective dropdown login box》和《Slick login form with HTML5 & CSS3》这里我主要演示第一个案例效果,并在Red的基础上作了相应的修改。

CSS3制作超酷的SearchBox

制作Search Box的效果,我想大家都有亲身的体会了,同时我可以十分肯定,制作下面展示的效果,十有八九都是使用图片来实现。那么今天在这个教程中,您将和我一起见证一件事情——如何使用HTML5的占位符(placeholder)属性和CSS3来创建一个超酷而又实用的搜索框。由于“placeholder”是HTML5中的一个新属性,对于部分浏览器是不支持的,如果您想在不支持这个新属性的浏览器中使用这个属性,你可以考虑使用Modernizr的检测功能。

CSS3的REM设置字体大小

在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是,仍然有不同的利弊,使各种技术都不太理想,但又无法不去用。真是进也难,退也难呀。

CSS3制作Apple官网的Seach Box效果

今天的教程我们是使用CSS3来制作一个Seach Box效果,这种效果的灵感来自于Apple的官网。当您的鼠标点击了Search Box或者说当Search Box获得焦点时,Search Box会慢慢的变长。

CSS3制作边栏菜单

今天这个教程,主要使用CSS3来制作一个边栏菜单,在这个教程中,我主要使用了CSS3的多个属性,比如说:CSS3 选择器——伪类选择器中的“:before”和“:after”制作ribbon效果,并配合CSS3GradientRGBABorder-radius

CSS3的Animation制作蝴蝶飞舞

上周六参加WebReBuild上海站活动时,@点头猪分享的《渐近增强——基于CSS3的浏览器分级策略》,里面有一个使用CSS3Animation制作的蝴蝶飞舞的效果特别吸引人。特决定回来尝试一下,但制作出来的效果总是有不同之处,后来经@点头猪的指点和代码分享,终于整明白了怎么回事。

Animate.css

Animate.css是由Dan EdenDaniel Eden使用CSS3animation制作的动画效果的CSS集合。换句话说:Animate.css就是一大堆的很酷,很有趣,而且很炫又能跨浏览器的动画效果样式集锦,你可以直接使用到您的项目中。

要在你的项目中使用,简单的很,就是三步完成:

CSS3美化表格

在Web页面开发中,自从有了<div>的出现,大家就在讨论table。就出现了什么时候?如何使用div,什么时候?如何使用table的争论。虽然争论不少,但最后得出的结论是一致的:当你需要在页面中处理与数据时,table是首选之一。

页面

返回顶部