Wie kann man CSS-Stile nur auf die Hälfte eines Wortes oder Zeichens anwenden
Manchmal muss man ein Zeichen, ein Wort oder einen ganzen Satz mit Halbstil einstellen.
Dafür muss man CSS und JavaScript verwenden. Unten erklären wir Ihnen, wie man das machen kann.
Halbstil mit CSS
Es ist möglich, nur ein Teil eines Zeichens nur mit CSS zu stylen.
Zunächst stellen Sie die Eigenschaft background mit dem Wert "linear-gradient" auf Ihre bevorzugte Richtung ein und geben Sie jede Farbe mit 50% Sichtbarkeit an.
Dann stellen Sie die Eigenschaft background-clip als background-clip: text;, um den Hintergrund im Vordergrundtext zu malen.
Der nächste Schritt besteht darin, die Eigenschaft text-fill-color, die die Vordergrundfarbe des Textinhalts des Elements angibt, einzustellen. Stellen Sie webkit-text-fill-color: transparent; ein, damit der Text die durch die Eigenschaft background definierten Farben erhält.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</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>Das ist ein teilweise gestyltes Zeichen.</p>
</body>
</html>Wenn Sie nur die Hälfte eines Zeichens haben und es stylen möchten, stellen Sie einfach den Wert "transparent" für den zweiten Teil Ihres linearen Gradienten ein.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</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>
Dieser Charakter hat einen transparenten Halbstil. Wählen Sie es aus, um den verborgenen Teil davon zu sehen.</p>
<h1>X</h1>
</body>
</html>Nun, lassen Sie uns einen Fall besprechen, wo Sie ein halbstilisiertes Wort benötigen, nicht ein einziges Zeichen. Es ist nicht so schwierig. In diesem Fall müssen Sie nur jeden Buchstaben in einem Element <span> platzieren und den oben genannten Stil für Ihr Element span verwenden.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</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>Vertikaler und horizontaler Halbstil
Es ist sehr einfach zu definieren, ob der Halbstil vertikal oder horizontal sein soll. Sie müssen nur angeben, dass der lineare Gradient von rechts nach links oder von oben nach unten verlaufen soll.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</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>Ich bin ein vertikal halb gestylter Buchstabe.</h2>
<span class="vertical">X</span>
<h2>Ich bin ein horizontal halb gestylter Buchstabe.</h2>
<span class="horizontal">X</span>
</div>
</body>
</html>Halbstil mit JavaScript/jQuery
Ein weiteres Beispiel, wo das CSS-Pseudoelement ::before mit JavaScript verwendet wird. Sie können auch text-shadow für Ihren halb gestylten Text einstellen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</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>Ein weiteres Beispiel, wo jQuery verwendet wird, um einen dreifachen Effekt zu bekommen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<style>
.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: #1c87c9; /* for demo purposes */
text-shadow: 2px 2px 0px #eee; /* 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: #8ebf42; /* for demo purposes */
text-shadow: 2px -2px 0px #eee; /* 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: #666; /* for demo purposes */
text-shadow: 2px 2px 0px cyan; /* for demo purposes */
}
</style>
</head>
<body>
<hr/>
<p>Einzelnes Zeichen:</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>Automatisiert für jeden Text:</p>
<span class="textToHalfStyle">Halb-Stil Text.</span>
<hr/>
<script>
jQuery(function($) {
var halfstyle_text, halfstyle_chars, $halfstyle_el, halfstyle_i, halfstyle_output, halfstyle_style;
// Iteration über alle Klassenereignisse
$('.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('');
// Screen-Reader-Text einstellen
$halfstyle_el.html('<span style="position: absolute;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + halfstyle_text + '</span>');
// Ausgabe für das Anhängen zurücksetzen
halfstyle_output = '';
// Über alle Zeichen im Text iterieren
for (halfstyle_i = 0; halfstyle_i < halfstyle_chars.length; halfstyle_i++) {
// Ein Style-Element für jedes Zeichen einstellen und es an den Container anfügen
halfstyle_output += '<span aria-hidden="true" class="halfStyle ' + halfstyle_style + '" data-content="' + halfstyle_chars[halfstyle_i] + '">' + halfstyle_chars[halfstyle_i] + '</span>';
}
// Chrome 59 und neuere Versionen spezifischer Fix - Teil 1 - beheben einen Chrome-Bug, wo Chrome Pseudoelemente nicht korrekt rendert und neu malt - wir haben diesen Fix nach vielen verschiedenen Tests entwickelt.
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>';
}
// Nur einmal in DOM schreiben
$halfstyle_el.append(halfstyle_output);
// Chrome 59 und neuere Versionen spezifischer Fix - Teil 2
if (_applyChromeFix) {
setTimeout(function(){
$halfstyle_el.find('style').remove();
}, 0);
}
});
});
</script>
</body>
</html>