会员专栏

CSS3制作动画加载页面

今天主要想和大家一起探讨一下如何使用CSS3制作页面加载内容的动画效果。听起来可能有点晕晕的,我简单的说一下吧,这种效果就是浏览器加载你的页面时,给页面的内容赋予一个动画效果,让他不在那么生硬。最早看过这种效果是小志Blog首页。今天特意看了一下志哥的写的代码,才知道实现起来并不是很困难的事情,不信大家一起来看看我扣出来的代码。

小志博客首页

别的我不多说,我直接使用firebug把志哥的Blog首页代码扒出来,下面我分为两部分:

HTML markup

CSS3 Filter的十种特效

最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果。今天终于抽出时间学习这个CSS3的Filter。不整不知道呀,一整才让我感到吃惊,太强大了。大家先来看个效果吧:

Google Font的运用

网页的字体的使用,大家都清楚,有时一些特殊字体只能使用图片来代替,因为担心用户的浏览器不具有这样的字体无法正常渲染页面的效果。为了解决这个问题,前面本站推出CSS3@font-face来实现一些特殊字体的效果。效果是作出来了,但性能大家又说,加载文件太大,直接影响了网站的性能。说真的真是鱼和熊掌不能兼得呀,而且@font-face对于中文字体来说还是蛮麻烦的。那么是不是除了@font-face就别无他法了呢?不是的,现在Google Font Api也能实现。今天学习了一下觉得蛮实用的,也是相当的方便。整理了一下放上来与大家一起分享。

目标

目标很明确,需要使用下面的字体来渲染网页的字体效果:

10个实用的CSS3技巧

CSS3的运用是越来越成熟了,在QQ群时常能看到朋友讨论这方面的技术,我也学习CSS3的相关技术也有一年之久了,收获也不少。在我的blog中也收集了不少这方面的教程。为了更方便的与大家分享,我今天特意将本站的有关于CSS3的运用罗列一下,并列出10个常用的相关属性,最后在以一个实例来与大家再次学习相关的CSS3的应用,希望大家能喜欢。

纯CSS3制作满屏图像幻灯片

记得前段时间在《完美的页面背景图片制作》介绍了几种实现全屏背景图片的制作方法,其中第一种就是使用的CSS3的background-size来实现的。今天看了Mary Lou (Manoela Ilic)写的一篇有关于全屏背景图像的幻灯片效果的教程《Fullscreen Background Image Slideshow with CSS3》,觉得特有意思,同时勾起了我动手的冲动。

CSS的Float之二

说起浮动大家并不陌生,因为有 Word 中看到太多的浮动围绕现象。我们可以看一下印刷设计来了解它的起源和作用。印刷布局中,文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”

20个实用的CSS技巧代码

大家非常的清楚CSS是我们Web制作中不可或缺的一部分。HTML提供了Web制作的结构,但他不能让我们实现美丽的页面制作,此时我们需要CSS的帮助。CSS虽然能帮我们完善Web制作的效果,但其在不同的浏览器下是有不可预知的效果,为了让你的CSS能解决这些不一致下,今天给大家介绍25个CSS技巧代码,我相信这些对你肯家有很大的作用。

一、使用text-indent来隐藏文本

这个常用在图片替换文本中,最常见的就是使用使用图片来替换Logo,这个是非常有用的,使用“text-indent”我们可以达到图片替换文本的效果,而且方便搜索引擎的优化,还能支持阅读器阅读网页内容:

			h1 {
				text-indent:-9999px;
				margin:0 auto;
				width:400px;
				height:100px;
				background:transparent url("images/logo.jpg") no-repeat scroll;
			}
		

当然,这个只是使用“text-indent"替换文本的一种效果,其实他还有更多的方法。

扩展阅读:

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

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

CSS的Float之一

Float在CSS中是一个重中之重的东西,因为他是一个强大的,极有作用的一个CSS属性,但如果你没有理解透这个Float的话,那将是一个难搞的事情,特别是对于初学者来说,更是一个棘手事情。那么从今天开始我们一起来探讨这个Float

刚才说过了,Float是一个极有用的属性,首先表现在布局上,全前提是你要清楚他,了解他。这样才能达到知已知彼,方能百战百胜。下面我们先来看一段代码:

HTML Markup

十种图片替换文本CSS方法

很多网站的logo都使用图片替换文本来实现,而且在一些情况下也有使用图片效果来替换难以实现的文本效果。这些制作我想大家在平时制作中都或多或少的碰到过,那么今天我老话重谈,整理了十种图片替换文本的制作方法。希望对大家有所帮助。

制作原理:

使用图片替换文本,其原理是相当的简单:就是在样式中使用背景图片来替换掉HTML模板中的文本内容,从而达到一种样式无法实现的页面渲染效果。使用图片替换有其优点也有其缺点,优点就是能实现一些特殊的页面效果,缺点就是需要加载图片,而且一些不好的替换方法给残障人员浏览网页会造成一定的不良之处,另外据说会对搜索引擎的搜索有影响,对于这一点没有考究过。那么我们也不去控寻这方面的问题,我们一起来看今天所要说的图片替换文本的制作方法

页面

返回顶部