现代 CSS

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;
		}
	

具体效果如下:

CSS布局——960gs

说起CSS的布局,有太多了,现在常见的有固定布局流体布局弹性布局,有关于这三种常见的布局,在《Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?》一文中做出了详细的对比介绍,而且Matthew James Taylor也给我们制作了很多个这方面的实例,大家还可以看看Float-less CSS layout带来的这三个类型的布局效果。随着CSS3Media Queries出现,给我们的布局带来一种全新的体验——适应于多媒价的布局响应

15个CSS技巧和窍门

前面我也发了几节内容收集了一些CSS的小技巧,比如说《20个CSS实战技巧》、《7个不能遗忘的CSS样式》和《13个CSS技巧》等,今天我又搜集了15个CSS的小技巧和窍门,或许和前面的部分有累同,但希望这些小技巧能帮您在平时的工作中带来些许的帮助。

八个制作Linking(链接)的技巧

“链接”对于一个Web制作人员来说一点都不会陌生,我们在来时的制作中,我们碰到过的“链接”有很多种,比如说文字链接、图片链接,有时甚至是图片和文字的混合链接。而这些链接是Web页面中最佳功能之一,那如何让你的链接在Web页面中尽可能的方便使用,有些就需要一些小技巧来帮助你了。今天我就搜集了一些这方面的小技巧,你会发现这些小技巧的实用性,同时也能使你的链接更好看,更可用。

一、显示文件类型图标

大家在平时的制作中都或多或少的碰到过文件类型的链接,比如说下载“.pdf”文件之类的。我平时都直接给他链接到文件上就完事了,其实我们少做了些工作,那就是我们为什么不能让用户直接通过链接就能了解它呢?现在许多优秀的Web前端攻城师在处理这样的问题时都会加上相应的文件类型,如下图所示:

解决方法:

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大局。不幸的是,仍然有不同的利弊,使各种技术都不太理想,但又无法不去用。真是进也难,退也难呀。

CSS中强大的EM

使用CSS也好久了,但一直都是在使用“px”来设置Web元素的相关属性,未敢使用“em”。主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中要求使用“em”作为单位设置元素,所以从头对“em”学习了一回。稍为有一点理解,今天特意整理了一份博文与大家一起分享,希望对童子们有些许的帮助。

CSS3制作Apple官网的Seach Box效果

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

CSS3制作边栏菜单

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

页面

返回顶部