为了账号安全,请及时绑定邮箱和手机立即绑定

是否可以将CSS应用于半个字符?

/ 猿问

是否可以将CSS应用于半个字符?

一只萌萌小番薯 2019-07-22 10:15:22

是否可以将CSS应用于半个字符?

我想要的是:

一种设计风格的方法一半一个角色。(在这种情况下,半数信函是透明的)

我目前搜索和尝试的内容(没有运气):

  • 字符/字母一半的造型方法
  • 用CSS或JavaScript对字符的一部分进行样式化
  • 将CSS应用于字符的50%

下面是我试图获得的一个例子。

https://img3.mukewang.com/5d351c500001af9301850182.jpg

是否存在CSS或JavaScript解决方案,还是我不得不求助于图像?我不喜欢走图像路线,因为这个文本最终会被动态生成。


最新情况:

既然很多人都问我为什么想要塑造一个角色的一半,这就是为什么。我的城市最近花了25万美元为自己定义了一个新的“品牌”。这,这个徽标是他们想出来的。许多人抱怨简单和缺乏创造力,并继续这样做。我的目标是想出这个网站开个玩笑。输入“哈利法克斯”,你就会明白我的意思。


查看完整描述

3 回答

?
慕前端131612

现在用GitHub作为插件!

随时准备分叉和改进。

演示 | 下载Zip | 半Style.com(重定向至GitHub)

  • 纯CSS

    一个字符
  • 用于跨文本或多个字符的自动化的JavaScript
  • 为盲人或视障者保留屏幕阅读器的文本可访问性

第1部分:基本解决方案

https://img1.mukewang.com/5d351c820001288f05920301.jpg

演示: http://jsfiddle.net/arbel/pd9yB/1694/


这适用于任何动态文本,或单个字符,并且都是自动化的。您所需要做的就是在目标文本上添加一个类,其余的就会得到处理。

此外,为盲人或视障者保留原始文本的可访问性,供屏幕阅读器使用。

对单个字符的解释:

纯CSS。你要做的就是申请.halfStyle类设置为每个包含您希望样式为一半的字符的元素。

对于每个包含字符的span元素,您可以创建一个数据属性,例如在这里data-content="X",以及关于伪元素的使用content: attr(data-content);所以.halfStyle:before类是动态的,您不需要对每个实例进行硬编码。

对任何案文的解释:

简单地添加textToHalfStyle类设置为包含文本的元素。

// jQuery for automated modejQuery(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);
  });});
.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;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><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>

(JSFiddle演示)


第2部分:高级解决方案-独立的左和右部分

https://img4.mukewang.com/5d351ca80001536f05980316.jpg

使用此解决方案,您可以单独或独立地对左右部分进行样式设计。.

一切都是一样的,只有更高级的CSS才有魔力。

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);
    });});
.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 */}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><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>


第3部分:混合匹配和改进

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


-水平半部

  • 没有文字阴影:

    https://img3.mukewang.com/5d351cba0001623a05980316.jpg

  • 对每半部分独立使用文本阴影的可能性:

    https://img1.mukewang.com/5d351cbc0001997405980316.jpg

  • // jQuery for automated modejQuery(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);
        });});
  • .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 */}
  • <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><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>
  • (JSFiddle演示)




查看完整回答
反对 回复 2019-07-22
?
临摹微笑

我刚刚完成了插件的开发,每个人都可以使用它!希望你会喜欢它。

查看项目GitHub-查看项目网站(这样您就可以看到所有的拆分样式)

使用

首先,确保你有jQuery图书馆包括在内。获取最新jQuery版本的最佳方法是用以下内容更新HEAD标记:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

下载文件后,请确保将它们包括在项目中:

<link rel="stylesheet" type="text/css" href="css/splitchar.css"><script type="text/javascript" src="js/splitchar.js"></script>

标记

你要做的就是给全班学生打个手势splitchar,然后是包装文本的元素的所需样式。例如

<h1 class="splitchar horizontal">Splitchar</h1>

完成所有这些之后,只需确保在文档就绪文件中调用jQuery函数,如下所示:

$(".splitchar").splitchar();

定制化

为了使文本看起来与您想要的完全一样,您所要做的就是像这样应用您的设计:

.horizontal { /* Base CSS - e.g font-size */ }.horizontal:before { /* CSS for the left half */ }.horizontal:after { /* CSS for the right half */ }


就这样!现在你有了Splitchar插件都准备好了。有关它的更多信息,请访问http://razvanbalosin.com/Splitchar.js/.


查看完整回答
反对 回复 2019-07-22
?
至尊宝的传说

是的,你只能用一个字符和CSS来完成这个任务。

不过,仅限于WebKit(和Chrome):

http://jsbin.com/rexoyice/1/

h1 {
  display: inline-block;
  margin: 0; /* for demo snippet */
  line-height: 1em; /* for demo snippet */
  font-family: helvetica, arial, sans-serif;
  font-weight: bold;
  font-size: 300px;
  background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}
<h1>X</h1>

从视觉上看,所有使用两个字符(无论是通过JS、CSS伪元素还是只使用HTML)的示例看起来都很好,但请注意,所有示例都会向DOM添加可能导致可访问性的内容-以及文本选择/剪切/粘贴问题。


查看完整回答
反对 回复 2019-07-22

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信