分类目录归档:CSS3教程

用CSS3美化半个字符巧妙方法

CSS不仅是一种技术,也是一种艺术,如果你运用的好,可以用它创造出各种神奇的效果,随着现代浏览器技术的进步,CSS3的革新,也给了程序员更大的空间和可能性来发挥自己的奇思妙想。在网上有很多常见的图形,比如在这个“HTML5技术秀:你的3D立体旋转名字”作品里,在左上角的菜单前面都有一个小图标,放在凡人眼里,它们肯定是个图片,找美工做个图,又省事,又快捷,但如果你仔细研究就会发现,它们不是图片, 是用纯CSS画出来的,只有有艺术感的Web程序员才能做出这样的事情。

最近网上热炒的一个话题是如何用CSS美化半个字符。就是把一个字符劈成两半,一半是A样式,一半是B样式。当然,大家都知道,不论是中文字符还是西文字符,单个字符否是无法拆分的,它们是文字的最新单元,如果是美化半个词或半个句子,这估计大家都知道如何做,也很常见。但半个字符如何美化呢?当然有办法,这里需要的就是艺术。

先看看需要的效果图。
love

左边是一种颜色,右边是一种颜色。如果是用图片做,这当然很容易,但图片有图片的局限性,比如不能动态的生成字符样式。下面我们就来看看用纯CSS如何实现这样的效果。

CSS美化半个[......]

阅读全文>>

CSS3图片倒影技术实现及原理

目前为止我们已经探讨了很多CSS3中的新功能和新特征。除了上面这些,实际上还有很多CSS新属性并未包含进CSS3官方标准中,像谷歌浏览器或火狐浏览器等都会利用CSS的浏览器引擎前缀(Vendor Prefix)来实现很多自定义的CSS功能。-webkit-box-reflect属性就是以谷歌浏览器为代表的Webkit渲染引擎独有的特征。-webkit-box-reflect的作用是让图片出现倒影。

实现倒影的基本语法

实现倒影的基本语法非常的直观,假设我们想给下面的图片增加倒影效果,可以这样写:

img {
    -webkit-box-reflect: below;
}

basic-reflection

上面这个例子中倒影出现了图片的下方,但实际上我们也可以将倒影安置在左侧、右侧或上侧。

倒影偏移量

Offset属性值用来定义图片和倒影影像之间的间距。参考下面的代码:

img {
    -webkit-box-reflect: below 10px;
}

上面的代码中,我们使图片和倒影影像之间相聚10px

offset-reflection

给倒影增加消隐效果

在现实生活中,倒影的出现通常是上半部比较清[......]

阅读全文>>

CSS3的Background-size很重要

如果问是什么让所有男人都生活中恐惧中,回答是不确定。没有人表露,但好奇会害死猫。十个女人中会有九个同意这点。广告商想尽办法让我们觉得不足够,但会告诉我们还可以改进。没错,先生们….size很重要。

我说的是background-size。CSS里的background-size属性能够让程序员决定如何在指定的元素里展示。MooTools程序员Christoph Pojer在他的网站上运用了background-size技术,使得在浏览器上他的头像始终“全面覆盖”在页头上——甚至是在手机上。下面让我们来看看神奇的background-size属性是如何使用的。

background-size CSS属性

这个background-size属性有几个预定义的值,但也可以像其它size属性一样使用数字:

  • contain: 包含,整个背景图都要被包含在元素内,没有超出的部分。
  • cover: 覆盖,背景要覆盖元素的所有区域,不能有空白出现。
  • 长度/百分比: 数字值

不管你相信与否,这最有趣的部分是当它的值为长度和百分比的时候。下面用几个例子演示一下 backgro[......]

阅读全文>>