OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

有可能将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);
    });
});

 

原文地址: 点此
社区评论 ( Beta版 )
  • #0 terry 1407236144857

    不错,受用!

  • #1 己删除 1407247629947
  • #2 f2e 1407251111002

    太高端看

  • #3 fragrant_cloud 1407289584971

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

  • #4 green_bird 1407370534488

    汉字可行?

  • #5 icy_water 1407379641953

    @green_bird #4

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

OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  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脚本
  11. 用 OnceAir 搭建个人Git/Svn/照片备份服务器,每年电费7块钱

 相关阅读 - 编程技巧
  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)模板被视为是有害的

 关键字 - 前端
  1. 用纯CSS改变html radio/checkbox默认背景颜色样式
  2. css去掉table的td单元格的间距cellspacing,设置隔行显示不同背景颜色
  3. 用JavaScript实现basename获取路径中的文件名
  4. CSS垂直水平完全居中手册
  5. 15个最好的HTML5前端响应式框架(2014)
  6. 我被问得最多的十个JavaScript前端面试问题
  7. 5个经典的前端面试问题
  8. 超简易——Bootstrap可关闭tab标签页
  9. CSS3实现的响应式字体:自适应视图窗口大小的新单位
  10. 用css禁用input、checkbox、select等html控件,实现disable效果

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号