是否可以将 CSS 应用于字符的一半?
Posted
技术标签:
【中文标题】是否可以将 CSS 应用于字符的一半?【英文标题】:Is it possible to apply CSS to half of a character? 【发布时间】:2016-04-22 18:42:25 【问题描述】:我在寻找什么:
一种设置一半字符样式的方法。 (在这种情况下,一半的字母是透明的)
我目前搜索和尝试的内容(没有运气):
设置半个字符/字母样式的方法 使用 CSS 或 javascript 设置字符的一部分 将 CSS 应用于 50% 的字符以下是我想要获得的示例。
是否存在 CSS 或 JavaScript 解决方案,或者我将不得不求助于图像?我不想走图像路线,因为此文本最终会动态生成。
更新:
既然很多人问我为什么要设计半个角色的样式,这就是原因。我的城市最近花了 250,000 美元为自己定义一个新的“品牌”。这 logo 是他们想出的。许多人抱怨简单和缺乏创造力,并继续这样做。我的目标是想出这个 website 作为一个笑话。输入“Halifax”,你就会明白我的意思了。
【问题讨论】:
评论不用于扩展讨论;这个对话是moved to chat。 他们问“为什么”,因为他们想知道为什么你会使用 CSS 而不是使用 SVG 或图像编辑器。与有关其徽标的业务决策无关。根据您指向他们徽标的链接,您为什么不直接裁剪 X? 在将其中一些方法应用于您的文本之前,请考虑可访问性。下面提到的方法非常令人沮丧,因为它们不能提高视力差、学习障碍、失语、阅读障碍或成人识字率低的人的易读性和可读性。有一些需要遵循的指导方针,甚至谷歌宣布将根据网站对 WCAG 规则的遵守情况开始对网站进行排名。很容易与那些使用工具作为斧头的人进行测试。如果使用图像/svg 代替,则两者都需要替代文本来传达所传达的信息。 【参考方案1】:利用background-clip: text
支持的好解决方案:http://jsfiddle.net/sandro_paganotti/wLkVt/
span
font-size: 100px;
background: linear-gradient(to right, black, black 50%, grey 50%, grey);
background-clip: text;
-webkit-text-fill-color: transparent;
【讨论】:
【参考方案2】:是的,你可以只用一个字符并且只用 CSS:
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%);
background-clip: text;
-webkit-text-fill-color: transparent;
<h1>X</h1>
从视觉上看,所有使用两个字符的示例(无论是通过 JS、CSS 伪元素还是只是 html)看起来都不错,但请注意,所有示例都向 DOM 添加了可能导致可访问性的内容——以及文本选择/剪切/粘贴问题。
【讨论】:
@MathewMacLean 如果只有 IE 死掉并且 Firefox 开始使用 Webkit,我们的工作就会轻松很多。 :) @MattHarrison 嗯。好吧,我猜它不仅仅是 not webkit! :) WebKit 有呈现几乎 IE6/IE7 级别的怪异错误的历史(你甚至可以说 Safari 和 Chrome 是现代网络的 IE6),并且行为方式与没有特殊原因的标准。 IE 自第 9 版以来已经好多了,所以虽然古老的版本应该已经死了,但我看不出有任何理由憎恨它的最新版本。而且我当然不明白为什么人们支持 WebKit/Blink 单一文化的想法(这里的 cmets 可能是在开玩笑,但我听说过有人认真相信它)。 话虽如此,background-clip: text
非常棒,他们应该考虑将它(或类似 text-decoration-background
的东西)用于第 4 级模块。
是的,如果blink/webkit 死掉而现代IE+FF 渲染引擎幸存下来,我会更高兴。这并不是说 chrome 的其余部分不好,只是它的渲染几乎是当今最糟糕的。【参考方案3】:
注意:这仅适用于一个字符,但如果您想要更多字符,请为每个信号字符添加一个类。并且您可以在线性渐变中使用deg
更改颜色方向。
.half-color
/* Create the gradient. */
background-image: linear-gradient(90deg, rgba(54, 72, 95, 1) 50%, rgba(106, 221, 201, 1) 50%);
/* Set the background size and repeat properties. */
width: min-content;
background-size: 100%;
background-repeat: repeat;
/* Use the text as a mask for the background. */
/* This will show the gradient as a text color rather than element bg. */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
<h1><span class="half-color">X</span><span class="half-color">Y</span><span class="half-color">Z</span></h1>
【讨论】:
已有多个答案依赖于背景剪辑和/或线性渐变。【参考方案4】:这是整行文本的纯 CSS 解决方案,而不仅仅是字符元素。
div
position: relative;
top: 2em;
height: 2em;
text-transform: full-width;
div:before,
div:after
content: attr(data-content);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
div:after
color: red;
/* mask for a single character. By repeating this mask, all the string becomes masked */
-webkit-mask-image: linear-gradient(to right, transparent 0, transparent .5em, white .5em, white 1em);
-webkit-mask-repeat: repeat-x; /* repeat the mask towards the right */
-webkit-mask-size: 1em; /* relative width of a single character */
/* non-vendor mask settings */
mask-image: linear-gradient(to right, transparent 0, transparent .5em, white .5em, white 1em);
mask-repeat: repeat-x;
mask-size: 1em;
/* demo purposes */
input[name="fontSize"]:first-of-type:checked ~ div
font-size: 1em;
input[name="fontSize"]:first-of-type + input:checked ~ div
font-size: 2em;
input[name="fontSize"]:first-of-type + input + input:checked ~ div
font-size: 3em;
Font-size:
<input type="radio" name="fontSize" value="1em">
<input type="radio" name="fontSize" value="2em" checked>
<input type="radio" name="fontSize" value="3em">
<div data-content="A CSS only solution..."></div>
<div data-content="Try it on Firefox!"></div>
这个想法是为每个字符应用一个水平 CSS 掩码,隐藏它的前半部分 [0 - 0.5em] 并显示后半部分 [0.5em - 1em]。
掩码的宽度为mask-size: 1em
,以匹配字符串中第一个字符的宽度。
通过使用mask-repeat: repeat-x
,将相同的掩码应用于第二个、第三个字符等等。
我以为使用monospace
字体可以解决使用等宽字母的问题,但我错了。
相反,我使用text-transform: full-width
解决了这个问题,不幸的是,我相信只有 Firefox 支持。
使用相对单位em
允许设计根据font-size
放大/缩小。
适用于所有浏览器的 Vanilla JavaScript 解决方案
如果 Firefox 不是一个选项,则使用此脚本进行救援。
它的工作原理是为每个字符插入一个子 span
。在每个 span 内,从 [0% - 50%] 和 [50% - 100%] 字母的宽度(即 span 元素的宽度)放置一个不重复的 CSS 掩码。
这样我们就不再有使用等宽字符的限制了。
const
dataElement = document.getElementById("data"),
content = dataElement.textContent,
zoom = function (fontSize)
dataElement.style['font-size'] = fontSize + 'em';
;
while (dataElement.firstChild)
dataElement.firstChild.remove()
for(var i = 0; i < content.length; ++i)
const
spanElem = document.createElement('span'),
ch = content[i];
spanElem.setAttribute('data-ch', ch);
spanElem.appendChild(document.createTextNode(ch === ' ' ? '\u00A0' : ch));
data.appendChild(spanElem);
#data
position: relative;
top: 2em;
height: 2em;
font-size: 2em;
#data span
display: inline-block;
position: relative;
color: transparent;
#data span:before,
#data span:after
content: attr(data-ch);
display: inline-block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
color: initial;
#data span:after
color: red;
-webkit-mask-image: linear-gradient(to right, transparent 0, transparent 50%, white 50%, white 100%);
mask-image: linear-gradient(to right, transparent 0, transparent 50%, white 50%, white 100%);
Font-size:
<input type="range" min=1 max=4 step=0.05 value=2 oninput="zoom(this.value)" onchange="zoom(this.value)">
<div id="data">A Fallback Solution...For all browsers</div>
【讨论】:
【参考方案5】:这里是画布中的一个丑陋的实现。我尝试了这个解决方案,但结果比我预期的要差,所以还是这样。
$("div").each(function()
var CHARS = $(this).text().split('');
$(this).html("");
$.each(CHARS, function(index, char)
var canvas = $("<canvas />")
.css("width", "40px")
.css("height", "40px")
.get(0);
$("div").append(canvas);
var ctx = canvas.getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 130, 0);
gradient.addColorStop("0", "blue");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("0.51", "red");
gradient.addColorStop("1.0", "red");
ctx.font = '130pt Calibri';
ctx.fillStyle = gradient;
ctx.fillText(char, 10, 130);
);
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Example Text</div>
【讨论】:
顺便说一句,您也可以将0.5
用于红色停止。【参考方案6】:
只为载入史册!
我为自己 5-6 年前的工作提出了一个解决方案,即 Gradext(纯 javascript 和纯 css,无依赖)。
技术解释是你可以像这样创建一个元素:
<span>A</span>
现在,如果您想在文本上制作渐变,您需要创建多个图层,每个图层都有特定的颜色,并且创建的光谱将说明渐变效果。
例如看看这是<span>
里面的单词lorem,它会导致水平渐变效果(check the examples):
<span data-i="0" style="color: rgb(153, 51, 34);">L</span>
<span data-i="1" style="color: rgb(154, 52, 35);">o</span>
<span data-i="2" style="color: rgb(155, 53, 36);">r</span>
<span data-i="3" style="color: rgb(156, 55, 38);">e</span>
<span data-i="4" style="color: rgb(157, 56, 39);">m</span>
而且你也可以在很长一段时间和很长的段落中继续这种模式。
但是!
如果您想在文本上创建垂直渐变效果怎么办?
还有另一种可能会有所帮助的解决方案。我会详细描述的。
再次假设我们的第一个<span>
。但内容不应该是单独的字母;内容应该是整个文本,现在我们将一次又一次地复制相同的 <span>
(跨度数将定义渐变的质量,跨度越大,结果越好,但性能不佳)。看看这个:
<span data-i="6" style="color: rgb(81, 165, 39); overflow: hidden; height: 11.2px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="7" style="color: rgb(89, 174, 48); overflow: hidden; height: 12.8px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="8" style="color: rgb(97, 183, 58); overflow: hidden; height: 14.4px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="9" style="color: rgb(105, 192, 68); overflow: hidden; height: 16px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="10" style="color: rgb(113, 201, 78); overflow: hidden; height: 17.6px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="11" style="color: rgb(121, 210, 88); overflow: hidden; height: 19.2px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
再次,但是!
如果您想让这些渐变效果移动并从中创建动画怎么办?
好吧,还有另一种解决方案。您绝对应该检查animation: true
甚至.hoverable()
方法,这将导致基于光标位置开始渐变! (听起来很酷 xD)
这就是我们在文本上创建渐变(线性或径向)的简单方法。如果您喜欢这个想法或想了解更多信息,请查看提供的链接。
也许这不是最佳选择,也许不是执行此操作的最佳性能方式,但它会开辟一些空间来创建令人兴奋和令人愉快的动画,从而激发其他人寻求更好的解决方案。
它将允许您在文本上使用渐变样式,甚至 IE8 都支持!
Here you can find a working live demo 和原始存储库是 here on GitHub as well, open source 并准备获得一些更新 (:D)
这是我第一次(是的,5 年后,你没听错)在 Internet 上的任何地方提及这个存储库,对此我很兴奋!
[更新 - 2019 年 8 月:] Github 删除了该存储库的 github-pages 演示,因为我来自伊朗!只有源代码可用here tho...
【讨论】:
【参考方案7】:Now on GitHub as a Plugin!
随意分叉和改进。
Demo | Download Zip | Half-Style.com(重定向到 GitHub)
纯 CSS 用于单个字符 JavaScript 用于跨文本或多个字符的自动化 为盲人或视觉上的屏幕阅读器保留文本可访问性 受损
第 1 部分:基本解决方案
演示: http://jsfiddle.net/arbel/pd9yB/1694/
这适用于任何动态文本或单个字符,并且都是自动化的。您需要做的就是在目标文本上添加一个类,剩下的就交给我们了。
此外,为盲人或视障者的屏幕阅读器保留了原始文本的可访问性。
单个字符的解释:
纯 CSS。您需要做的就是将.halfStyle
类应用于每个包含您想要半样式化的字符的元素。
对于每个包含字符的 span 元素,您可以创建一个数据属性,例如这里data-content="X"
,并在伪元素上使用content: attr(data-content);
,因此.halfStyle:before
类将是动态的,您不需要为每个实例硬编码。
任何文字的解释:
只需将textToHalfStyle
类添加到包含文本的元素即可。
// jQuery for automated mode
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: 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 demo)
第 2 部分:高级解决方案 - 左右独立部件
使用此解决方案,您可以单独和独立地设置左右部分的样式。
一切都一样,只有更高级的 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>
(JSFiddle demo)
第 3 部分:混合搭配和改进
现在我们知道什么是可能的,让我们创建一些变体。
-水平半部分
无文字阴影:
每个半部分独立的文本阴影的可能性:
// jQuery for automated mode
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 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 demo)
-垂直 1/3 零件
无文字阴影:
每个 1/3 部分独立的文本阴影的可能性:
// jQuery for automated mode
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 /* 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 */
<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 demo)
-水平 1/3 零件
无文字阴影:
每个 1/3 部分独立的文本阴影的可能性:
// jQuery for automated mode
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 /* base char and also the bottom 1/3 */
position: relative;
display: inline-block;
font-size: 80px; /* or any font size will work */
color: transparent;
overflow: hidden;
white-space: pre; /* to preserve the spaces from collapsing */
color: #f0f;
text-shadow: 2px 2px 0px #0af; /* for demo purposes */
.halfStyle:before /* creates the top 1/3 */
display: block;
z-index: 2;
position: absolute;
top: 0;
height: 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 #fa0; /* for demo purposes */
.halfStyle:after /* creates the middle 1/3 */
display: block;
position: absolute;
z-index: 1;
top: 0;
height: 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 */
<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 demo)
-@KevinGranger 改进的HalfStyle
// jQuery for automated mode
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);
);
);
body
background-color: black;
.textToHalfStyle
display: block;
margin: 200px 0 0 0;
text-align: center;
.halfStyle
font-family: 'Libre Baskerville', serif;
position: relative;
display: inline-block;
width: 1;
font-size: 70px;
color: black;
overflow: hidden;
white-space: pre;
text-shadow: 1px 2px 0 white;
.halfStyle:before
display: block;
z-index: 1;
position: absolute;
top: 0;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow: hidden;
color: white;
<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 demo)
-@SamTremaine对HalfStyle的PeelingStyle改进
// jQuery for automated mode
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: 68px;
color: rgba(0, 0, 0, 0.8);
overflow: hidden;
white-space: pre;
transform: rotate(4deg);
text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
.halfStyle:before /* creates the left part */
display: block;
z-index: 1;
position: absolute;
top: -0.5px;
left: -3px;
width: 100%;
content: attr(data-content);
overflow: hidden;
pointer-events: none;
color: #FFF;
transform: rotate(-4deg);
text-shadow: 0px 0px 1px #000;
<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 demo 和samtremaine.co.uk)
第 4 部分:准备生产
可以在同一页面上的所需元素上使用自定义的不同 Half-Style 样式集。 您可以定义多个样式集并告诉插件使用哪一个。
插件在目标.textToHalfStyle
元素上使用数据属性data-halfstyle="[-CustomClassName-]"
并自动进行所有必要的更改。
因此,只需在包含文本的元素上添加textToHalfStyle
类和数据属性data-halfstyle="[-CustomClassName-]"
。该插件将完成剩下的工作。
此外,CSS 样式集的类定义与上面提到的 [-CustomClassName-]
部分匹配并链接到 .halfStyle
,因此我们将拥有 .halfStyle.[-CustomClassName-]
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') || 'hs-base';
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);
);
);
/* start half-style hs-base */
.halfStyle.hs-base
position: relative;
display: inline-block;
font-size: 80px; /* or any font size will work */
overflow: hidden;
white-space: pre; /* to preserve the spaces from collapsing */
color: #000; /* for demo purposes */
.halfStyle.hs-base:before
display: block;
z-index: 1;
position: absolute;
top: 0;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
pointer-events: none; /* so the base char is selectable by mouse */
overflow: hidden;
color: #f00; /* for demo purposes */
/* end half-style hs-base */
/* start half-style hs-horizontal-third */
.halfStyle.hs-horizontal-third /* base char and also the bottom 1/3 */
position: relative;
display: inline-block;
font-size: 80px; /* or any font size will work */
color: transparent;
overflow: hidden;
white-space: pre; /* to preserve the spaces from collapsing */
color: #f0f;
text-shadow: 2px 2px 0px #0af; /* for demo purposes */
.halfStyle.hs-horizontal-third:before /* creates the top 1/3 */
display: block;
z-index: 2;
position: absolute;
top: 0;
height: 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 #fa0; /* for demo purposes */
.halfStyle.hs-horizontal-third:after /* creates the middle 1/3 */
display: block;
position: absolute;
z-index: 1;
top: 0;
height: 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 */
/* end half-style hs-horizontal-third */
/* start half-style hs-PeelingStyle, by user SamTremaine on ***.com */
.halfStyle.hs-PeelingStyle
position: relative;
display: inline-block;
font-size: 68px;
color: rgba(0, 0, 0, 0.8);
overflow: hidden;
white-space: pre;
transform: rotate(4deg);
text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
.halfStyle.hs-PeelingStyle:before /* creates the left part */
display: block;
z-index: 1;
position: absolute;
top: -0.5px;
left: -3px;
width: 100%;
content: attr(data-content);
overflow: hidden;
pointer-events: none;
color: #FFF;
transform: rotate(-4deg);
text-shadow: 0px 0px 1px #000;
/* end half-style hs-PeelingStyle */
/* start half-style hs-KevinGranger, by user KevinGranger on ***.com*/
.textToHalfStyle.hs-KevinGranger
display: block;
margin: 200px 0 0 0;
text-align: center;
.halfStyle.hs-KevinGranger
font-family: 'Libre Baskerville', serif;
position: relative;
display: inline-block;
width: 1;
font-size: 70px;
color: black;
overflow: hidden;
white-space: pre;
text-shadow: 1px 2px 0 white;
.halfStyle.hs-KevinGranger:before
display: block;
z-index: 1;
position: absolute;
top: 0;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow: hidden;
color: white;
/* end half-style hs-KevinGranger
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
<span class="textToHalfStyle" data-halfstyle="hs-base">Half-style, please.</span>
</p>
<p>
<span class="textToHalfStyle" data-halfstyle="hs-horizontal-third">Half-style, please.</span>
</p>
<p>
<span class="textToHalfStyle" data-halfstyle="hs-PeelingStyle">Half-style, please.</span>
</p>
<p style="background-color:#000;">
<span class="textToHalfStyle" data-halfstyle="hs-KevinGranger">Half-style, please.</span>
</p>
(JSFiddle demo)
【讨论】:
评论不用于扩展讨论;这个对话是moved to chat。 这很酷。值得注意的是,这种技术会破坏自动换行、空白和字符间距 CSS。【参考方案8】:我刚刚完成了插件的开发,大家都可以使用了!希望你会喜欢它。
在GitHub 上查看项目 - 查看项目Website。 (这样你就可以看到所有的拆分样式)
用法
首先,确保包含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/。
【讨论】:
到目前为止,您的解决方案对于多个字符来说是最容易实现的,但仍然不是 100%。 @MathewMacLean emisfera 必须有答案,对吧? 这有文本换行问题,即使在最新的小提琴中也会出现。当一个字符换行时,它基本上分成了两个。不过,应该是一个微不足道的修复。 不要依赖 jquery-latest.min.js,如果 jQuery 更新并且插件不能与较新的插件一起使用,它会使您的网站在没有警告的情况下崩溃。相反:使用特定版本并在更新时检查兼容性。 您可能想要编辑您的答案以不建议使用 jquery-latest.js。正如@NielsBom 所提到的,过去它可能会在更新时破坏您的网站。自 2014 年 7 月以来,它不会这样做,但那是因为 it is locked at version 1.11.1 并且永远不会再次更新。【参考方案9】:您可以使用以下代码。在此示例中,我使用了h1
标记并添加了一个属性data-title-text="Display Text"
,该属性将在h1
标记文本元素上显示不同颜色的文本,从而产生如下示例所示的半色文本效果
body
text-align: center;
margin: 0;
h1
color: #111;
font-family: arial;
position: relative;
font-family: 'Oswald', sans-serif;
display: inline-block;
font-size: 2.5em;
h1::after
content: attr(data-title-text);
color: #e5554e;
position: absolute;
left: 0;
top: 0;
clip: rect(0, 1000px, 30px, 0);
<h1 data-title-text="Display Text">Display Text</h1>
【讨论】:
【参考方案10】:这样的短文本怎么样?
如果你用循环来做一些事情,它甚至可以处理更长的文本,用 JavaScript 重复字符。反正结果是这样的:
p.char
position: relative;
display: inline-block;
font-size: 60px;
color: red;
p.char:before
position: absolute;
content: attr(char);
width: 50%;
overflow: hidden;
color: black;
<p class="char" char="S">S</p>
<p class="char" char="t">t</p>
<p class="char" char="a">a</p>
<p class="char" char="c">c</p>
<p class="char" char="k">k</p>
<p class="char" char="o">o</p>
<p class="char" char="v">v</p>
<p class="char" char="e">e</p>
<p class="char" char="r">r</p>
<p class="char" char="f">f</p>
<p class="char" char="l">l</p>
<p class="char" char="o">o</p>
<p class="char" char="w">w</p>
【讨论】:
【参考方案11】:我刚刚玩了@Arbel 的解决方案:
var textToHalfStyle = $('.textToHalfStyle').text();
var textToHalfStyleChars = textToHalfStyle.split('');
$('.textToHalfStyle').html('');
$.each(textToHalfStyleChars, function(i,v)
$('.textToHalfStyle').append('<span class="halfStyle" data-content="' + v + '">' + v + '</span>');
);
body
background-color: black;
.textToHalfStyle
display:block;
margin: 200px 0 0 0;
text-align:center;
.halfStyle
font-family: 'Libre Baskerville', serif;
position:relative;
display:inline-block;
width:1;
font-size:70px;
color: black;
overflow:hidden;
white-space: pre;
text-shadow: 1px 2px 0 white;
.halfStyle:before
display:block;
z-index:1;
position:absolute;
top:0;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
color: white;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<span class="textToHalfStyle">Dr. Jekyll and M. Hide</span>
【讨论】:
刚玩过@Arbel 解决方案 Arbel 的解决方案有什么不同?很难看出您是否只是复制粘贴了一些代码或对其进行了改进。【参考方案12】:有限的 CSS 和 jQuery 解决方案
我不确定这个解决方案有多优雅,但它把所有东西都减少了一半:http://jsfiddle.net/9wxfY/11/
否则,我已经为您创建了一个很好的解决方案...您需要做的就是为您的 HTML 设置这个:
查看截至 2016 年 6 月 13 日的最新准确编辑:http://jsfiddle.net/9wxfY/43/
至于CSS,是非常有限的……你只需要将它应用到:nth-child(even)
$(function()
var $hc = $('.half-color');
var str = $hc.text();
$hc.html("");
var i = 0;
var chars;
var dupText;
while(i < str.length)
chars = str[i];
if(chars == " ") chars = " ";
dupText = "<span>" + chars + "</span>";
var firstHalf = $(dupText);
var secondHalf = $(dupText);
$hc.append(firstHalf)
$hc.append(secondHalf)
var width = firstHalf.width()/2;
firstHalf.width(width);
secondHalf.css('text-indent', -width);
i++;
);
.half-color span
font-size: 2em;
display: inline-block;
overflow: hidden;
.half-color span:nth-child(even)
color: red;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="half-color">This is a sentence</div>
【讨论】:
【参考方案13】:另一种纯 CSS 解决方案(如果您不想编写特定于字母的 CSS,则需要数据属性)。这个更全面(测试 IE 9/10,Chrome 最新和 FF 最新)
span
position: relative;
color: rgba(50,50,200,0.5);
span:before
content: attr(data-char);
position: absolute;
width: 50%;
overflow: hidden;
color: rgb(50,50,200);
<span data-char="X">X</span>
【讨论】:
【参考方案14】:我能得到的最接近的:
$(function()
$('span').width($('span').width()/2);
$('span:nth-child(2)').css('text-indent', -$('span').width());
);
body
font-family: arial;
span
display: inline-block;
overflow: hidden;
span:nth-child(2)
color: red;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>X</span><span>X</span>
演示:http://jsfiddle.net/9wxfY/2/
这是一个只使用一个跨度的版本:http://jsfiddle.net/9wxfY/4/
【讨论】:
$('span').width()
只返回它找到的第一个跨度的宽度;它必须是你为每一对做的事情。这给了我一个想法......
这与在 jsfiddle.net/9WWsd 上找到的 epascarello 的示例非常相似。正如我告诉他的那样,您的示例是朝着正确方向迈出的一步,但是,在更大范围内使用将是一场噩梦。
@MathewMacLean,我没看到。为什么会是噩梦?这个怎么样:jsfiddle.net/9wxfY/4
当你去实现多个字符时会导致问题。
@MathewMacLean 这就是美妙的Lettering.JS 的用武之地。【参考方案15】:
这可以通过 CSS :before
选择器和 content property value
来实现。
.halfed, .halfed1
float: left;
.halfed, .halfed1
font-family: arial;
font-size: 300px;
font-weight: bolder;
width: 200px;
height: 300px;
position: relative; /* To help hold the content value within */
overflow: hidden;
color: #000;
.halfed:before, .halfed1:before
width: 50%; /* How much we'd like to show */
overflow: hidden; /* Hide what goes beyond our dimension */
content: 'X'; /* Halfed character */
height: 100%;
position: absolute;
color: #28507D;
/* For Horizontal cut off */
.halfed1:before
width: 100%;
height: 55%;
<div class="halfed"> X </div>
<div class="halfed1"> X </div>
>> See on jsFiddle
【讨论】:
【参考方案16】:如果你愿意,你也可以使用 SVG:
var title = document.querySelector('h1'),
text = title.innerHTML,
svgTemplate = document.querySelector('svg'),
charStyle = svgTemplate.querySelector('#text');
svgTemplate.style.display = 'block';
var space = 0;
for (var i = 0; i < text.length; i++)
var x = charStyle.cloneNode();
x.textContent = text[i];
svgTemplate.appendChild(x);
x.setAttribute('x', space);
space += x.clientWidth || 15;
title.innerHTML = '';
title.appendChild(svgTemplate);
<svg style="display: none; height: 100px; width: 100%" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs id="FooDefs">
<linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="50%" stop-color="blue" />
<stop offset="50%" stop-color="red" />
</linearGradient>
</defs>
<text y="50%" id="text" style="font-size: 72px; fill: url(#MyGradient)"></text>
</svg>
<h1>This is not a solution X</h1>
http://codepen.io/nicbell/pen/jGcbq
【讨论】:
【参考方案17】:如果你对此感兴趣,那么 Lucas Bebber 的 Glitch 是一个非常相似且超酷的效果:
使用简单的 SASS Mixin 创建,例如
.example-one
font-size: 100px;
@include textGlitch("example-one", 17, white, black, red, blue, 450, 115);
更多详情请访问Chris Coyer's CSS Tricks 和Lucas Bebber's Codepen page
【讨论】:
【参考方案18】:FWIW,这是我对仅使用 CSS 进行此操作的看法:http://codepen.io/ricardozea/pen/uFbts/
几个注意事项:
我这样做的主要原因是为了测试自己,看看我是否能够在为 OP 提供有意义的答案的同时完成半个角色的造型。
我知道这不是一个理想的或最具可扩展性的解决方案,这里的人们提出的解决方案对于“现实世界”的场景要好得多。
我创建的 CSS 代码是基于我想到的最初想法和我自己解决问题的方法。
我的解决方案仅适用于对称字符,如 X、A、O、M。**它不适用于非对称字符,如 B、C、F、K 或小写字母。
** 然而,这种方法创建了非常有趣的带有不对称字符的“形状”。尝试将 X 更改为 K 或小写字母,如 CSS 中的 h 或 p :)
HTML
<span class="half-letter"></span>
SCSS
.half-character
display: inline-block;
font: bold 350px/.8 Arial;
position: relative;
&:before, &:after
content: 'X'; //Change character here
display: inline-block;
width: 50%;
overflow: hidden;
color: #7db9e8;
&:after
position: absolute;
top: 0;
left: 50%;
color: #1e5799;
transform: rotateY(-180deg);
【讨论】:
【参考方案19】:这可能无关紧要,也可能不相关,但前一段时间,我创建了一个 jQuery 函数,它做同样的事情,但水平。
我称它为“Stripex”对于'stripe'+'text',演示:http://cdpn.io/FcIBg
我不是说这是任何问题的解决方案,而是我已经尝试过将css应用到半个字符上,但是横向,所以想法是一样的,实现可能很可怕,但它确实有效。
啊,最重要的是,我玩得很开心!
【讨论】:
@LukyVj 我更新了你的函数,将pointer-events:none
添加到&:nth-child(2)
- &:nth-child(5)
。这使得文本只能突出显示一次,并且您只能获得一份副本。你可以在这里看到它:codepen.io/anon/pen/upLaj
请将minimal reproducible example 添加到答案本身,而不是链接到第三方网站。当该链接失效时,答案将失去它所具有的价值。目前这在技术上是“NAA”(不是答案)。【参考方案20】:
.halfStyle
position:relative;
display:inline-block;
font-size:68px; /* or any font size will work */
color: rgba(0,0,0,0.8); /* or transparent, any color */
overflow:hidden;
white-space: pre; /* to preserve the spaces from collapsing */
transform:rotate(4deg);
-webkit-transform:rotate(4deg);
text-shadow:2px 1px 3px rgba(0,0,0,0.3);
.halfStyle:before
display:block;
z-index:1;
position:absolute;
top:-0.5px;
left:-3px;
width: 100%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
color: white;
transform:rotate(-4deg);
-webkit-transform:rotate(-4deg);
text-shadow:0 0 1px black;
http://experimental.samtremaine.co.uk/half-style/
你可以利用这段代码做各种有趣的事情——这只是我的同事和我昨晚想出的一个实现。
【讨论】:
【参考方案21】:JSFiddle DEMO
我们将只使用 CSS 伪选择器!
这种技术适用于动态生成的内容以及不同的字体大小和宽度。
HTML:
<div class='split-color'>Two is better than one.</div>
CSS:
.split-color > span
white-space: pre-line;
position: relative;
color: #409FBF;
.split-color > span:before
content: attr(data-content);
pointer-events: none; /* Prevents events from targeting pseudo-element */
position: absolute;
overflow: hidden;
color: #264A73;
width: 50%;
z-index: 1;
要包装动态生成的字符串,您可以使用如下函数:
// Wrap each letter in a span tag and return an HTML string
// that can be used to replace the original text
function wrapString(str)
var output = [];
str.split('').forEach(function(letter)
var wrapper = document.createElement('span');
wrapper.dataset.content = wrapper.innerHTML = letter;
output.push(wrapper.outerHTML);
);
return output.join('');
// Replace the original text with the split-color text
window.onload = function()
var el = document.querySelector('.split-color'),
txt = el.innerHTML;
el.innerHTML = wrapString(txt);
【讨论】:
以上是关于是否可以将 CSS 应用于字符的一半?的主要内容,如果未能解决你的问题,请参考以下文章