将CSS应用于字符的一半是否可能？
我正在寻找的：
一种样式化字符一半的方法。（在这种情况下，字母的一半是透明的）
我目前搜索过并尝试过的（但没有成功）：
- 用于样式化字符/字母的方法
- 使用CSS或JavaScript样式化字符的一部分
- 将CSS应用于字符的50%
下面是一个我想要实现的示例。
!x
是否存在CSS或JavaScript的解决方案，还是需要依靠图片？我不希望采用图像方案，因为这个文本最终会动态生成。
更新：
由于许多人问我为什么要样式化字符的一半，这就是原因。我的城市最近花了25万美元来为自己定义一个新的“品牌”。这是我找到的 徽标。很多人对这个简单和缺乏创意的设计表示不满，并且继续抱怨。我的目标是制作这个 网站 作为一个玩笑。输入'Halifax'，你就会明白我的意思。
现在在GitHub上作为插件！
请随意fork和改进。
演示 | 下载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用于自动化模式
jQuery(function($) {
var text, chars, $el, i, output;
// 遍历所有class出现的情况
$('.textToHalfStyle').each(function(idx, el) {
$el = $(el);
text = $el.text();
chars = text.split('');
// 设置屏幕阅读器文本
$el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');
// 重置输出以附加
output = '';
// 遍历文本中的所有字符
for (i = 0; i < chars.length; i++) {
// 为每个字符创建一个样式化的元素并附加到容器中
output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
}
// 只写入DOM一次
$el.append(output);
});
});
.halfStyle {
position: relative;
display: inline-block;
font-size: 80px; /* 或任何字体大小都可以 */
color: black; /* 或透明，任何颜色都可以 */
overflow: hidden;
white-space: pre; /* 保留空格不被折叠 */
}
.halfStyle:before {
display: block;
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 50%;
content: attr(data-content); /* 伪元素的动态内容 */
overflow: hidden;
color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>单个字符：</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>自动化：</p>
<span class="textToHalfStyle">半样式，求你了。</span>
第2部分：高级解决方案 - 独立的左半部分和右半部分
使用此解决方案，您可以分别设置左侧和右侧部分的样式。
一切都相同，只有更先进的CSS才能实现这种魔法。
显示代码片段
jQuery(function($) {
var text, chars, $el, i, output;
// 遍历所有类出现的情况
$('.textToHalfStyle').each(function(idx, el) {
$el = $(el);
text = $el.text();
chars = text.split('');
// 设置屏幕阅读器文本
$el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');
// 重置输出以附加
output = '';
// 遍历文本中的所有字符
for (i = 0; i < chars.length; i++) {
// 为每个字符创建一个样式化的元素并附加到容器中
output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
}
// 只写入DOM一次
$el.append(output);
});
});
.halfStyle {
position: relative;
display: inline-block;
font-size: 80px; /* 或任何字体大小都可以 */
color: transparent; /* 隐藏基本字符 */
overflow: hidden;
white-space: pre; /* 保留空格不被折叠 */
}
.halfStyle:before { /* 创建左侧部分 */
display: block;
z-index: 1;
position: absolute;
top: 0;
width: 50%;
content: attr(data-content); /* 伪元素动态内容 */
overflow: hidden;
pointer-events: none; /* 以便基本字符可以通过鼠标选择 */
color: #f00; /* 演示用途 */
}
.halfStyle:after { /* 创建右侧部分 */
display: block;
direction: rtl; /* 非常重要，将从右开始宽度 */
position: absolute;
z-index: 2;
top: 0;
left: 50%;
width: 50%;
content: attr(data-content); /* 伪元素动态内容 */
overflow: hidden;
pointer-events: none; /* 以便基本字符可以通过鼠标选择 */
color: #000; /* 演示用途 */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>单个字符：</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>自动：</p>
<span class="textToHalfStyle">半样式，求你了。</span>
第3部分：混合匹配和改进
现在我们知道的可能性，让我们创建一些变化。
-水平半部分
-
不带文本阴影：
-
可以为每个半部分独立设置文本阴影：
// jQuery for自动化模式
jQuery(function($) {
var text, chars, $el, i, output;
// 遍历所有类出现
$('.textToHalfStyle').each(function(idx, el) {
$el = $(el);
text = $el.text();
chars = text.split('');
// 设置屏幕阅读器文本
$el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');
// 重置输出以附加
output = '';
// 遍历文本中的所有字符
for (i = 0; i < chars.length; i++) {
// 为每个字符创建一个样式元素并附加到容器中
output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
}
// 仅写入DOM一次
$el.append(output);
});
});
.halfStyle {
position: relative;
display: inline-block;
font-size: 80px; /* 或任何字体大小都可以 */
color: transparent; /* 隐藏基本字符 */
overflow: hidden;
white-space: pre; /* 保留空格不被折叠 */
}
.halfStyle:before { /* 创建顶部部分 */
display: block;
z-index: 2;
position: absolute;
top: 0;
height: 50%;
content: attr(data-content); /* 伪元素动态内容 */
overflow: hidden;
pointer-events: none; /* 使基本字符可选择鼠标 */
color: #f00; /* 演示用途 */
}
.halfStyle:after { /* 创建底部部分 */
display: block;
position: absolute;
z-index: 1;
top: 0;
height: 100%;
content: attr(data-content); /* 伪元素动态内容 */
overflow: hidden;
pointer-events: none; /* 使基本字符可选择鼠标 */
color: #000; /* 演示用途 */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>单个字符：</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>自动化：</p>
<span class="textToHalfStyle">半形，请。</span>
.halfStyle { /\* 基本字符和右侧1/3 \*/
position: relative;
display: inline-block;
font-size: 80px; /\* 或任何字体大小都可以 \*/
color: transparent; /\* 隐藏基本字符 \*/
overflow: hidden;
white-space: pre; /\* 保留空格不被折叠 \*/
color: #f0f; /\* 演示用途 \*/
text-shadow: 2px 2px 0px #0af; /\* 演示用途 \*/
}
.halfStyle:before { /\* 创建左侧1/3 \*/
display: block;
z-index: 2;
position: absolute;
top: 0;
width: 33.33%;
content: attr(data-content); /\* 伪元素的动态内容 \*/
overflow: hidden;
pointer-events: none; /\* 使基本字符可选择鼠标 \*/
color: #f00; /\* 演示用途 \*/
text-shadow: 2px -2px 0px #af0; /\* 演示用途 \*/
}
.halfStyle:after { /\* 创建中间1/3 \*/
display: block;
z-index: 1;
position: absolute;
top: 0;
width: 66.66%;
content: attr(data-content); /\* 伪元素的动态内容 \*/
overflow: hidden;
pointer-events: none; /\* 使基本字符可选择鼠标 \*/
color: #000; /\* 演示用途 \*/
text-shadow: 2px 2px 0px #af0; /\* 演示用途 \*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>单个字符：</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>自动化：</p>
<span class="textToHalfStyle">请展示半形样式。</span>
(JSFiddle演示)
半形样式改进 by @SamTremaine
!halfStyle - Sam Tremaine
显示代码片段
// 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="peelingStyle" 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;
}
.peelingStyle {
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;
}
.peelingStyle: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)
显示代码片段
// jQuery for automated mode
jQuery(function($) {
var text, chars, $el, i, output;
// 遍历所有类出现的情况
$('.textToHalfStyle').each(function(idx, el) {
$el = $(el);
text = $el.text();
chars = text.split('');
// 设置屏幕阅读器文本
$el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');
// 重置输出以附加
output = '';
// 遍历文本中的所有字符
for (i = 0; i < chars.length; i++) {
// 为每个字符创建一个样式元素并附加到容器
output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
}
// 仅写入DOM一次
$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 { /* 创建左侧部分 */
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>单个字符：</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>自动化：</p>
<span class="textToHalfStyle">半风格，请。</span>
(JSFiddle演示) 和 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;
// 遍历所有类出现的情况
$('.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('');
// 设置屏幕阅读器文本
$halfstyle_el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + halfstyle_text + '</span>');
// 重置输出以附加
halfstyle_output = '';
// 遍历文本中的所有字符
for (halfstyle_i = 0; halfstyle_i < halfstyle_chars.length; halfstyle_i++) {
// 为每个字符创建一个样式元素并附加到容器中
halfstyle_output += '<span aria-hidden="true" class="halfStyle ' + halfstyle_style + '" data-content="' + halfstyle_chars[halfstyle_i] + '">' + halfstyle_chars[halfstyle_i] + '</span>';
}
// 仅写入DOM一次
$halfstyle_el.append(halfstyle_output);
});
});
/* 开始半样式 hs-base */
.halfStyle.hs-base {
position: relative;
display: inline-block;
font-size: 80px; /* 或任何字体大小都可以 */
overflow: hidden;
white-space: pre; /* 保留空格不被折叠 */
color: #000; /* 演示用途 */
}
.halfStyle.hs-base:before {
display: block;
z-index: 1;
position: absolute;
top: 0;
width: 50%;
content: attr(data-content); /* 伪元素动态内容 */
pointer-events: none; /* 以便鼠标可以选择基本字符 */
overflow: hidden;
color: #f00; /* 演示用途 */
}
/* 结束半样式 hs-base */
/* 开始半样式 hs-horizontal-third */
.halfStyle.hs-horizontal-third { /* 基本字符和底部的1/3 */
position: relative;
display: inline-block;
font-size: 80px; /* 或任何字体大小都可以 */
color: transparent;
overflow: hidden;
white-space: pre; /* 保留空格不被折叠 */
color: #f0f;
text-shadow: 2px 2px 0px #0af; /* 演示用途 */
}
.halfStyle.hs-horizontal-third:before { /* 创建顶部的1/3 */
display: block;
z-index: 2;
position: absolute;
top: 0;
height: 33.33%;
content: attr(data-content); /* 伪元素动态内容 */
overflow: hidden;
pointer-events: none; /* 以便鼠标可以选择基本字符 */
color: #f00; /* 演示用途 */
text-shadow: 2px -2px 0px #fa0; /* 演示用途 */
}
.halfStyle.hs-horizontal-third:after { /* 创建中间的1/3 */
display: block;
position: absolute;
z-index: 1;
top: 0;
height: 66.66%;
content: attr(data-content); /* 伪元素动态内容 */
overflow: hidden;
pointer-events: none; /* 以便鼠标可以选择基本字符 */
color: #000; /* 演示用途 */
text-shadow: 2px 2px 0px #af0; /* 演示用途 */
}
/* 结束半样式 hs-horizontal-third */
/* 开始半样式 hs-PeelingStyle, 由用户 SamTremaine 在 Stackoverflow.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 { /* 创建左侧部分 */
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;
}
/* 结束半样式 hs-PeelingStyle */
/* 开始半样式 hs-KevinGranger, 由用户 KevinGranger 在 StackOverflow.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); /* 伪元素动态内容 */
overflow: hidden;
color: white;
}
/* 结束半样式 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">半样式，求之不得。</span>
</p>
<p>
<span class="textToHalfStyle" data-halfstyle="hs-horizontal-third">半样式，求之不得。</span>
</p>
<p>
<span class="textToHalfStyle" data-halfstyle="hs-PeelingStyle">半样式，求之不得。</span>
</p>
<p style="background-color:#000;">
<span class="textToHalfStyle" data-halfstyle="hs-KevinGranger">半样式，求之不得。</span>
</p>
浙公网安备 33010602011771号