|
[tr][td] CSS不仅是一种技术，也是一种艺术，如果你运用的好，可以用它创造出各种神奇的效果，随着现代浏览器技术的进步，CSS3的革新，也给了程序员更大的空间和可能性来发挥自己的奇思妙想。在网上有很多常见的图形，比如在这个“HTML5技术秀：你的3D立体旋转名字”作品里，在左上角的菜单前面都有一个小图标，放在凡人眼里，它们肯定是个图片，找美工做个图，又省事，又快捷，但如果你仔细研究就会发现，它们不是图片， 是用纯CSS画出来的，只有有艺术感的Web程序员才能做出这样的事情。
最近网上热炒的一个话题是如何用CSS美化半个字符。就是把一个字符劈成两半，一半是A样式，一半是B样式。当然，大家都知道，不论是中文字符还是西文字符，单个字符否是无法拆分的，它们是文字的最新单元，如果是美化半个词或半个句子，这估计大家都知道如何做，也很常见。但半个字符如何美化呢？当然有办法，这里需要的就是艺术。 先看看需要的效果图。 图片：132426fyzn22sfd2qs274m.jpg  左边是一种颜色，右边是一种颜色。如果是用图片做，这当然很容易，但图片有图片的局限性，比如不能动态的生成字符样式。下面我们就来看看用纯CSS如何实现这样的效果。 观看演示 CSS美化半个字符的基本思路 思路很简单，就是一个字写两遍，分别显示一半。思路很清楚，也很简单，但如何实现呢？当然不能真的把一个字写两遍，这样也太愚蠢了，而且当用户拷贝粘贴这段文字时会粘出同样的文字两份。这里就需要用到CSS伪元素:before和:after，记住这个“伪元素”的“伪”字，表明它本来是不存在的。我们的方法就是在伪元素里放置相同的字符，只显示半个，而原字符显示另外一半，最后把它们拼成一个字。 CSS代码 [*].halfStyle { [*] position:relative; [*] display:inline-block; [*] font-size:80px; /* 任何宽度都可以 */ [*] color: black; /* 任何颜色，或透明 */ [*] overflow:hidden; [*] white-space: pre; /* 处理空格 */ [*]} [*].halfStyle:before { [*] display:block; [*] z-index:1; [*] position:absolute; [*] top:0; [*] left:0; [*] width: 50%; [*] content: attr(data-content); /* 伪元素的动态获取内容 */ [*] overflow:hidden; [*] color: #f00; [*]} 复制代码 HTML代码 [*]单个字符 [*]风 [*]流 [*]倜 [*]傥 [*] [*] [*]用脚本自动美化： [*] [*]恋爱容易婚姻不易，且行且珍惜。 复制代码 需要做的就是将.halfStyleCSS类应用到每个需要半边美化的字符上。在上面的代码示例中，每个span里都包含了一个字符，我们在上面放置了data-属性，例如data-content="风"，之后在伪元素里我们使用了attr(data-content)方法，这样.halfStyle:before就会变得动态，不需要你手工的硬编码它们的内容。 对于多个字符需要美化的情况，我们可以创建一段jQuery代码自动将所有有.textToHalfStyleCSS类字符添加这种效果： [*]jQuery(function($) { [*] var text, chars, $el, i, output; [*] [*] // 遍历所有字符 [*] $('.textToHalfStyle').each(function(idx, el) { [*] $el = $(el); [*] text = $el.text(); [*] chars = text.split(''); [*] [*] // Set the screen-reader text [*] $el.html('' + text + ''); [*] [*] // Reset output for appending [*] output = ''; [*] [*] // Iterate over all chars in the text [*] for (i = 0; i < chars.length; i++) { [*] // Create a styled element for each character and append to container [*] output += '' + chars + ''; [*] } [*] [*] // Write to DOM only once [*] $el.append(output); [*] }); [*]}); 复制代码 这样，不论是一段文字还是整篇文字，我们都能一次搞定，不必手工一个一个的设置，也不必一个一个的做图！ 高级做法：左右半个字符都用伪元素生成 上面我们的做法中，文字的左半边是用:before伪元素生成的，而右半边使用的是原文字。但实际上我们可以将左右两边都用伪元素生成——右半边用:after实现。 CSS代码 [*].halfStyle { [*] position:relative; [*] display:inline-block; [*] font-size:80px; /* or any font size will work */ [*] color: transparent; /* hide the base character */ [*] overflow:hidden; [*] white-space: pre; /* to preserve the spaces from collapsing */ [*]} [*].halfStyle:before { /* creates the left part */ [*] display:block; [*] z-index:1; [*] position:absolute; [*] top:0; [*] width: 50%; [*] content: attr(data-content); /* dynamic content for the pseudo element */ [*] overflow:hidden; [*] pointer-events: none; /* so the base char is selectable by mouse */ [*] color: #f00; /* for demo purposes */ [*] text-shadow: 2px -2px 0px #af0; /* for demo purposes */ [*]} [*].halfStyle:after { /* creates the right part */ [*] display:block; [*] direction: rtl; /* very important, will make the width to start from right */ [*] position:absolute; [*] z-index:2; [*] top:0; [*] left:50%; [*] width: 50%; [*] content: attr(data-content); /* dynamic content for the pseudo element */ [*] overflow:hidden; [*] pointer-events: none; /* so the base char is selectable by mouse */ [*] color: #000; /* for demo purposes */ [*] text-shadow: 2px 2px 0px #0af; /* for demo purposes */ [*]} 复制代码 你会发现，我们的实现方法可以很灵活，现在表象上是有三个字重叠，我们可以让每个字都各占1/3，这样，我得到一个三色字。上面这些例子都是左右分色，其实我们也可以让它上下分色或上中下分色。 图片：132426fyzn22sfd2qs274m.jpg 观看演示 想起了电影《卧虎藏龙》了的一句话，“心有多大，江湖就有多大”，作为Web程序员也是如此，只有我们用于探索和创新，有很多任务我们都可以用更简单，更方便的方法完成。你有此同感吗？ [/td][/tr] |
|
