Как применить стили CSS только к половине слова или символа
Иногда по каким-то причинам, возможно в связи с дизайном веб-сайта, вам может понадобиться добавить стиль только к половине символа, слова или предложения.
Для этого вам потребуется CSS, а также JavaScript. Ниже мы представим, как можно получить такой эффект.
Стилизация половины только с помощью CSS
Возможно получить стилизацию половины символа, используя только CSS.
Сначала установите свойство background со значением "linear-gradient" для вашего предпочитаемого направления и укажите видимость видимость 50% для каждого цвета.
Потом установите свойство background-clip как background-clip: text;
Следующим шагом будет установление свойства text-fill-color, которое указывает цвет заливки переднего плана для текстового контента элемента. Задайте webkit-text-fill-color: transparent; , чтобы текст имел цвет, указанный свойством background.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
h1 {
display: inline-block;
margin: 0;
line-height: 1em;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 200px;
background: linear-gradient(to right, #1c87c9 50%, #8ebf42 50%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<h1>X</h1>
<p>Стилизация половины символа.</p>
</body>
</html>Если хотите отобразить только половину символа и применить к ней стиль, задайте значение "transparent" для второй половины линейного градиента.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
h1 {
display: inline-block;
margin: 0;
line-height: 1em;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 200px;
background: linear-gradient(to right, #1c87c9 50%, transparent 50%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<p>Прозрачная стилизация половины символа. Выберите символ, чтобы увидеть его скрытую часть.</p>
<h1>X</h1>
</body>
</html>Теперь давайте рассмотрим случай, когда нужна стилизация половины слова, а не символа. Это нетрудно. Здесь вам просто необходимо разместить каждую букву в элемент <span> и применить вышеуказанную стилизацию для элемента span.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
span {
display: inline-block;
margin: 0;
line-height: 1em;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 60px;
background: linear-gradient(to right, #1c87c9 50%,#113155 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div>
<span>T</span>
<span>E</span>
<span>X</span>
<span>T</span>
</div>
</body>
</html>Вертикальная и горизонтальная стилизация половины
Можно легко указать, должна ли стилизация половины быть вертикальной или горизонтальной. Вам просто необходимо указать линейный градиент справа налево или сверху вниз.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.vertical {
display: inline-block;
margin: 0;
line-height: 1em;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 60px;
background: linear-gradient(to right, #1c87c9 50%,#113155 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.horizontal {
display: inline-block;
margin: 0;
line-height: 1em;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 60px;
background: linear-gradient(to top, #1c87c9 50%,#113155 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div>
<h2>Вертикальная стилизация половины буквы.</h2>
<span class="vertical">X</span>
<h2>Горизонтальная стилизация половины буквы.</h2>
<span class="horizontal">X</span>
</div>
</body>
</html>Стилизация половины с помощью JavaScript/jQuery
Смотрите другой пример, где CSS псевдоэлемент ::before используется вместе с JavaScript. Можно также задать text-shadow для стилизации половины текста.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 60px;
font-weight: bold;
text-align: center;
}
.half-style > span {
white-space: pre-line;
position: relative;
color: #1c87c9 ;
}
.half-style > span::before {
content: attr(data-content);
pointer-events: none;
position: absolute;
overflow: hidden;
color: #113155;
width: 50%;
z-index: 1;
}
</style>
</head>
<body>
<div class='half-style'>W3docs</div>
<script>
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('');
}
window.onload = function() {
var el = document.querySelector('.half-style'),
txt = el.innerHTML;
el.innerHTML = wrapString(txt);
}
</script>
</body>
</html>Рассмотрим другой пример, где используется jQuery для получения эффекта тройной стилизации.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<style>
.halfStyle { /* базовый символ и правый 1/3 */
position:relative;
display:inline-block;
font-size:80px; /* или любой размер шрифта будет работать */
color: transparent; /* скрыть базовый символ */
overflow:hidden;
white-space: pre; /* чтобы избегать свертывания пространств */
color: #1c87c9; /* в целях демо использования */
text-shadow: 2px 2px 0px #eee; /* в целях демо использования */
}
.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: #8ebf42; /* в целях демо использования */
text-shadow: 2px -2px 0px #eee; /* в целях демо использования */
}
.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: #666; /* в целях демо использования */
text-shadow: 2px 2px 0px cyan; /* в целях демо использования */
}
</style>
</head>
<body>
<hr/>
<p>Single Characters:</p>
<span class="halfStyle" data-content="T">T</span>
<span class="halfStyle" data-content="E">E</span>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="T">T</span>
<hr/>
<p>Automated on any text:</p>
<span class="textToHalfStyle">Half-style text.</span>
<hr/>
<script>
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;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>';
}
// Chrome 59 and above specific fix - Part 1 - Addresses a Chrome bug where Chrome fails to corectly render and repaint pseudo elements
var _applyChromeFix = !!window.chrome && !!navigator.appVersion.match(/.*Chrome\/([0-9\.]+)/) && parseInt(navigator.appVersion.match(/.*Chrome\/([0-9\.]+)/)[1], 10) >= 59;
if (_applyChromeFix) {
halfstyle_output += '<style>.halfStyle{}</style>';
}
// Обратитесь к DOM только один раз
$halfstyle_el.append(halfstyle_output);
// Chrome 59 and above specific fix - Part 2
if (_applyChromeFix) {
setTimeout(function(){
$halfstyle_el.find('style').remove();
}, 0);
}
});
});
</script>
</body>
</html>