现代 CSS

Airen的博客

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

CSS3的Animation制作蝴蝶飞舞

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

Animate.css

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

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

页面

返回顶部