CSS3

Box-shadow常被遗忘的一个参数——“spread”

早前在《CSS3 box-shadow》一文中详细介绍了Box-shadow的使用。

CSS3制作的分页导航

W3cplus第二版本刚上线时,好多位朋友向我问起站上的分页导航样式是怎么制作,像是图片一样。前面都是随便说了一下制作的过程,为了报答各位朋友一持对本站的大力支持,今天我特意把这个分页导航的效果当作一个小教程来说。希望大家会喜欢。

目标

今天我们主要的目的是使用CSS3等相关属性来制作W3cplus站点上的分页导航效果,大家可以这点击这里查看站点上的效果,也可以直击下面的效果图:

在这个效果中,其实只有两大看点:

CSS3 Buttons框架

现在使用CSS3属性制作Buttons越来越普及了。早前在站上也放了一些相关方面的制作方法,在《CSS3 Gradient Buttons》一文中第一使用CSS3GradientBorder-radiusbox-shadow等属性制作了Buttons。

玩转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

页面

返回顶部