有可能将CSS应用到一个字符的一半吗？

发布者 1518409521  发布时间 1407080078469
关键字 编程技巧  前端 

我在寻找

给一个字符的一半设置样式。(在本例中,字符的一半是透明的)

下面是目前我所寻找和尝试的(没有运气找到):

  • 将样式应用于字符或者字母的一半的方法
  • 用CSS或JavaScript给字符部分设置样式
  • 给字符的50%应用CSS

下面是一个例子,我想要获得的效果。


CSS或JavaScrip对于这个问题存在解决方案或者我将不得不借助于图片吗?我宁愿不去用图像，因为这本文最终将被动态生成。



更新：

因为很多人问我为什么会想要给字符的一半设计样式,这就是为什么。我的城市最近花了250000美元为自己定义一个新的“品牌”。这个标志就是他们想出的。许多人抱怨这太简单，缺乏创造力但是仍然继续这样做。我的目标是这个网站提出来当做一个玩笑。输入'Halifax',你就会明白我的意思。:)

下面是一些解决方案：


第一部分:基本解决方案


这适用于任何动态文本,或一个字符,并且都是自动的。所有您需要做的就是在目标文本添加一个类，其余的照顾一下就行。

同时, 为盲人或视力受损这类屏幕阅读的人保留了原文的可访问性。

一个字符的解释:

纯CSS。所有你需要做的就是为每一个你想设置一半样式的元素应用.halfStyle类。

对于每个包含这个字符的span元素,您可以创建一个数据属性,例如这里data-content = " X ",在伪元素上使用content:attr(data-content);因此,.halfStyle:before类将是动态的,你不需要为每个实例设置固定的值。

任意文本的解释：

只需给包含这种文本的元素添加textToHalfStyle类。

CSS:

.halfStyle {
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    color: black; /* or transparent, any color */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}

.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    left:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: #f00;
}



(注* 观其代码，其原理为利用伪元素产生一个内容一样的字符，但是只有一半宽度，并与原位置重合即可实现这种效果，缺陷是不支持低版本的浏览器） 



HTML

<p>Single
Characters:</p>
<span
class="halfStyle" data-content="X">X</span>
<span
class="halfStyle" data-content="Y">Y</span>
<span
class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle"
data-content="A">A</span> 
<hr/>
<p>Automated:</p> 
<span
class="textToHalfStyle">Half-style, please.</span>


使其自动化,只需给包含这种文本的元素添加textToHalfStyle类。

jQuery实现的自动模式

jQuery(function($) {
    var text, chars, $el, i, output;
    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
        $el = $(el);
        text = $el.text();
        chars = text.split('');
 
        // Set the screen-reader text
        $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');
 
        // 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 += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
        }
 
        // Write to DOM only once
        $el.append(output);
    });
});


第二部分:先进的解决方案——独立左边和右边部分


通过这个解决方案你可以单独的设置左边和右边部分的样式。一切都是相同的,只有更高级的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 */
}


第三部分:Mix-Match和改善

现在我们知道什么是可能的,让我们创造一些变化

-水平一半样式

.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 top part */
    display:block;
    z-index:2;
    position:absolute;
    top:0;
    height: 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 bottom part */
    display:block;
    position:absolute;
    z-index:1;
    top:0;
    height: 100%;
    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部分样式

.halfStyle { /* base char and also the right 1/3 */
    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 */
    color: #f0f; /* for demo purposes */
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
.halfStyle:before { /* creates the left 1/3 */
    display:block;
    z-index:2;
    position:absolute;
    top:0;
    width: 33.33%;
    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 middle 1/3 */
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 66.66%;
    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 #af0; /* for demo purposes */
}


第四部分:准备生产

定制不同Half-Style样式集可在同一页面应用于所需的元素。您可以定义多个style-sets告诉插件使用哪一个。　

插件在目标元素. textToHalfStyle上使用数据属性data-halfstyle = "[-CustomClassName -]”。自动完成所有必要的变化。　　  

所以,仅在包含文本的元素添加textToHalfStyle类和数据属性data-halfstyle =“[-CustomClassName -]”。插件将完成剩下的工作。

在相同的页面上演示多个Half-Styles。

jQuery(function($) {
    var halfstyle_text, halfstyle_chars, $halfstyle_el, halfstyle_i, halfstyle_output, halfstyle_style;
 
    // Iterate over all class occurrences
    $('.textToHalfStyle').each(function(idx, halfstyle_el) {
        $halfstyle_el = $(halfstyle_el);
        halfstyle_style = $halfstyle_el.data('halfstyle');
        halfstyle_text = $halfstyle_el.text();
        halfstyle_chars = halfstyle_text.split('');
 
        // Set the screen-reader text
        $halfstyle_el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + halfstyle_text + '</span>');
 
        // Reset output for appending
        halfstyle_output = '';
 
        // Iterate over all chars in the text
        for (halfstyle_i = 0; halfstyle_i < halfstyle_chars.length; halfstyle_i++) {
            // Create a styled element for each character and append to container
            halfstyle_output += '<span aria-hidden="true" class="halfStyle ' + halfstyle_style + '" data-content="' + halfstyle_chars[halfstyle_i] + '">' + halfstyle_chars[halfstyle_i] + '</span>';
        }
 
        // Write to DOM only once
        $halfstyle_el.append(halfstyle_output);
    });
});

 





回复 (6)
  • #
  • #1 terry 1407236144857

    不错，受用！

  • #2 ourjs 1407247629947

    What's your problems?

  • #3 f2e 1407251111002

    太高端看

  • #4 fragrant_cloud 1407289584971

    真是没有做不到只有想不到。

  • #5 green_bird 1407370534488

    汉字可行？

  • #6 icy_water 1407379641953

    @green_bird #4

    这种方法理论就是同一位置的覆盖，只要是字符都可以实现，汉字肯定也行的，同样的运用到任何像图形地方也都没问题，不过内容的部分都需要进行相应的修改

微信扫码 立即评论




 热门文章 - 分享最多
  1. 告别Node.js
  2. JavaScript：世界上误解最深的语言
  3. 痛苦的Java程序员
  4. Android即将支持GO语言，从游戏开始
  5. 我不懂Swift
  6. 微软开源TypeScript编绎器
  7. CSS字体大小: em与px、pt、百分比之间的对比
  8. 开源的多行字符串工具： 在JS中整段地写HTML
  9. 树树莓派推出新版本Model B+
  10. 在nginx中使用lua脚本

 相关阅读
  1. Express.JS指南
  2. 在JavaScript中判断整型的N种方法
  3. 你应该使用HTML5的header和footer标签吗？
  4. 功夫：HTML和CSS？
  5. Linux命令及Linux终端的20个趣事
  6. 在NodeJS中启用ECMAScript 6
  7. 如何提高NODE.js中SSL服务的性能
  8. 极快的node.js：来自领英（LinkedIn）移动的10个性能技巧
  9. 在JavaScript里写类层次结构？别那么做！
  10. 字符串（String）模板被视为是有害的

  开源的 OurJS
OurJS开源博客已经迁移到 OnceOA 平台。
  关注我们
扫一扫即可关注我们：
OnceJS

OnceOA

Icon 沪公网安备31011202009668号 | 沪ICP备13020027号-2

© OurJS. All Rights Reserved. OurJS.com ourjs(at)ourjs.com