小卖弄:字符上下半截的高亮显示

标签: css相关 字符 绝对定位 高亮代码 高度 | 发表时间:2011-08-17 20:59 | 作者:张 鑫旭 senyo
出处:http://www.zhangxinxu.com/wordpress

by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=1883

一、您这折腾的是?

闲适的时候总喜欢折腾点蛋疼的事情。今儿个偶尔的机会注意到了淘宝产品一个排序的细节,如下图:
一张淘宝网产品列表页截图 张鑫旭-鑫空间-鑫生活

单箭头表示只有一种排序方式,例如“销量”的向下箭头,就表示只能按销量降序排列(鲜有普通用户去关心销量最差的产品的);而后面的“价格”双向箭头表示既可以按价格升序排列,又可以按价格降序排列,点击一下就会看到下图所示的效果:
价格的双向箭头效果 张鑫旭-鑫空间-鑫生活

我是个字符控,总喜欢磨着某某小图标或是小标记什么的用字符代替。例如这里的向下单向箭头可以用表示,那后面的分上下两部分,且可以分别高亮的双向箭头效果可不可以借助“字符+CSS”实现呢?

这就是我这里要卖弄的东西。

二、怎么个折腾法?

首先去自己整理的字符库看看有没有可以带来灵感的字符。我找我找,虽然有点枯燥,但是,hold住,恩,寻寻觅觅之后,发现个可以变格格的小东西,就是:↕。垂直方向的双向箭头 张鑫旭-鑫空间-鑫生活

一个垂直方向双向箭头字符。矮油,我们可以在这个字符上做些手脚,让其可以上面半截分别高亮显示。

当当当当,下面就是自己无聊折腾出来的效果:
无聊的字符上下半截分别高亮效果截图 张鑫旭-鑫空间-鑫生活

您可以狠狠地点击这里:字符上下半高亮demo

原理:
原理比较简单,双标签,每个标签内部都有一个上下方向的箭头字符↕。其中,内部的标签高度截去一半,然后利用absolute绝对定位的无高度无宽度性将半截字符在全字符上面显示,下边框色作为分隔线。
字符上下半截颜色高亮实现原理示意图 张鑫旭-鑫空间-鑫生活

相关代码如下:
CSS部分:

.half{display:inline-block; font:15px/16px arial;}
.half_in{height:9px; _height:7px; border-bottom:1px solid #fff; background-color:#fff; position:absolute; overflow:hidden;}
.half_top .half_in,.half_bot{color:#f30;}
.half_bot .half_in{color:#333;}

HTML部分:

<span class="half half_top"><span class="half_in">↕</span>↕</span>
<span class="half half_bot"><span class="half_in">↕</span>↕</span>

应该是很容易hold住的。

三、形式式的结语

使用字符实现上下半截分别高亮的效果的最大的好处在于颜色可以方便控制,想胭脂红就胭脂红,想宝石蓝就宝石蓝,就像有个牛叉干爹,随心所欲。不足就是效果上就显得粗糙了点,代码显得折腾了点。

闲来无事折腾的东西,没什么技术含量,实际应用价值也有限。不好轻拍~~

补充于翌日:
1. 有评论提议可以直接使用上下单向箭头↑↓实现类似效果,确实是可以的,直接替换字符就可以了,CSS部分不需要动anything。

<span class="half half_top"><span class="half_in">↑</span>↓</span>
<span class="half half_bot"><span class="half_in">↑</span>↓</span>

如下效果:
单箭头下的效果 张鑫旭-鑫空间-鑫生活

您可以狠狠地点击这里:单箭头下的双色分隔效果demo

2. 又有朋友提出菱形字符实现上下颜色分隔的三角效果,也是可以的。下面的CSS代码经自己多次调试,基本上所有浏览器上的显示都比较靠谱。应该有更精简实用的代码,欢迎分享。

.half{display:inline-block; font:14px/17px '宋体';}
.half_in{height:6px; border-bottom:3px solid #fff; _border-bottom-width:2px; background-color:#fff; position:absolute; overflow:hidden;}
:root .half_in{height:5px\0;}	/*IE 9*/
.half_top .half_in,.half_bot{color:#f30;}
.half_bot .half_in{color:#333;}

HTML部分code如下:

<span class="half half_top"><span class="half_in">&#9670;</span>&#9670;</span>
<span class="half half_bot"><span class="half_in">&#9670;</span>&#9670;</span>

结果都是一样的,没有变化。

效果如下截图:
FireFox 6下上下三角效果截图 张鑫旭-鑫空间-鑫生活

您可以狠狠地点击这里:菱形字符下的上下高亮三角demo

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=1883

(本篇完)

有话要说,点击这里发表评论。

相关 [字符 高亮] 推荐:

小卖弄:字符上下半截的高亮显示

- senyo - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1883. 闲适的时候总喜欢折腾点蛋疼的事情. 今儿个偶尔的机会注意到了淘宝产品一个排序的细节,如下图:. 单箭头表示只有一种排序方式,例如“销量”的向下箭头,就表示只能按销量降序排列(鲜有普通用户去关心销量最差的产品的);而后面的“价格”双向箭头表示既可以按价格升序排列,又可以按价格降序排列,点击一下就会看到下图所示的效果:.

字符编码

- - 博客 - 伯乐在线
伯乐在线注:本文来自文章作者 @acmerfight 的投稿( 原文链接). 如果其他朋友也想投稿,请发邮件至 [email protected],或直接给 @伯乐在线官方微博 私信投递. 你是否认为“ASCII码 = 一个字符就是8比特”. 你是否认为一个字节就是一个字符,一个字符就是8比特.

HTML特殊字符大全

- - 前端观察
HTML的特殊字符我们并不常用,但是有的时候却要在页面中用到这些字符,甚至有时候还需要用这些字符来实现某种特殊的视觉效果. 现在,国外的设计师 Neal Chester整理了一份很全的特殊字符集,我觉得这很赞~~,共享出来供大家查阅吧. 这些字符属于unicode字符集,所以,你的文档需要声明为UTF-8;.

字符编码小研究

- - ITeye博客
在Grails项目中,实现国际化,遇到了中文乱码的问题,几经学习问题解决了. 本着打破砂锅的精神,又折腾到凌晨2点,初步研究了一下字符编码等知识. ASCII = 英文字母编码. GB2312 = ASCII + 简体编码(对ASCII的中文扩展). Big5 = ASCII + 繁体编码. (还有针对日语、韩语等字符编码).

Cookie与特殊字符

- - 标点符
这个是一个发生在自己身边的故事,由于Cookie值中设置了一个特殊字符,导致部分手机由于兼容性问题在打开站点时产生5xx错误,经分析Cookie中的字符并不被部分Android手机机型支持. 我们先来看下关于使用Cookie的一些注意事项:. Cookie的格式有2个不同的版本,第一个版本,我们称为Cookie Version 0,是最初由Netscape公司制定的,也被几乎所有的浏览器支持.

HTML字符实体(Character Entities),转义字符串(Escape Sequence) 为什么要用转义字符串?

- - CSDN博客推荐文章
HTML字符实体(Character Entities),转义字符串(Escape Sequence). HTML中<,>,&等有特殊含义(<,>,用于链接签,&用于转义),不能直接使用. 这些符号是不显示在我们最终看到的网页里的,那如果我们希望在网页中显示这些符号,该怎么办呢. 这就要说到HTML转义字符串(Escape Sequence)了.

字符串匹配那些事(一)

- jiessie - 搜索技术博客-淘宝
本系列文章主要介绍几种常用的字符串比较算法,包括但不限于蛮力匹配算法,KMP算法,BM算法,Horspool算法,Sunday算法,fastsearch算法,KR算法等等. 本文主要介绍KMP算法和BM算法,它们分别是前缀匹配和后缀匹配的经典算法. 所谓前缀匹配是指:模式串和母串的比较从左到右,模式串的移动也是从左到右;所谓后缀匹配是指:模式串和母串的的比较从右到左,模式串的移动从左到右.

每行字符数(CPL)的起源

- xcv58 - 阮一峰的网络日志
前几天,我收到网友小龙的Email. "各种计算机语言的编码风格,有的建议源码每行的字符数(characters per line)不超过72个,还有的建议不超过80个,这是为什么. 命令行状态下,终端窗口的显示宽度,默认是80个字符,这个我早就知道,但是并不清楚原因;至于72个字符,更是从未注意过.

字符串匹配的Boyer-Moore算法

- - 阮一峰的网络日志
上一篇文章,我介绍了 KMP算法. 但是,它并不是效率最高的算法,实际采用并不多. 各种文本编辑器的"查找"功能(Ctrl+F),大多采用 Boyer-Moore算法. Boyer-Moore算法不仅效率高,而且构思巧妙,容易理解. 1977年,德克萨斯大学的Robert S. Boyer教授和J Strother Moore教授发明了这种算法.