[英]Is it possible to apply CSS to half of a character?
我在找什么：
一種為角色的一半設置樣式的方法。 （在這種情況下，一半的字母是透明的）
我目前搜索和嘗試的內容（沒有運氣）：
以下是我試圖獲得的示例。
是否存在 CSS 或 JavaScript 解決方案，或者我將不得不求助於圖像？ 我不希望 go 圖像路由，因為此文本最終將動態生成。
更新：
由於許多人問我為什么要設計一半角色的樣式，這就是原因。 我所在的城市最近花費了 250,000 美元為自己定義了一個新的“品牌”。 這個標志是他們想出的。 許多人抱怨過簡單和缺乏創造力，並繼續這樣做。 我的目標是想出這個網站作為一個笑話。 輸入“Halifax”，您就會明白我的意思。
隨意分叉和改進。
演示： 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 演示)
使用此解決方案，您可以單獨和獨立地設置左右部分的樣式。
一切都一樣，只有更高級的 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 演示)
現在我們知道什么是可能的，讓我們創造一些變化。
// 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 演示)
// 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 演示)
// 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 演示)
// 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 演示)
// 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 演示和samtremaine.co.uk ）
可以在同一頁面上的所需元素上使用自定義的不同 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 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 { /* 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 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); /* 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 演示)
我剛剛完成了插件的開發，供大家使用！ 希望你會喜歡它。
首先，請確保您已包含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/ 。
是的，你可以只用一個字符和 CSS 來做到這一點：
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 添加了內容，這可能會導致可訪問性——以及文本選擇/剪切/粘貼問題。
我們將僅使用 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);
}
它可能無關緊要，也可能無關緊要，但前一段時間，我創建了一個 jQuery 函數，它可以做同樣的事情，但是是水平的。
我稱它為“Strippex”對於'stripe'+'text'，演示： http ://cdpn.io/FcIBg
我不是說這是任何問題的解決方案，但我已經嘗試將 css 應用於一半字符，但水平，所以想法是一樣的，實現可能很糟糕，但它有效。
啊，最重要的是，我在創造它時玩得很開心！
這是畫布中一個丑陋的實現。 我嘗試了這個解決方案，但結果比我預期的要差，所以無論如何都在這里。
$("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>
如果你對此感興趣，那么 Lucas Bebber's Glitch 是一個非常相似且超酷的效果：
使用簡單的 SASS Mixin 創建，例如
.example-one {
font-size: 100px;
@include textGlitch("example-one", 17, white, black, red, blue, 450, 115);
}
我能得到的最近的：
$(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/
我剛剛玩過@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>
另一個僅 CSS 的解決方案（盡管如果您不想編寫特定於字母的 CSS，則需要 data-attribute）。 這個更全面（經過測試 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>
有限的 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>
.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/
你可以撬開這段代碼來做各種有趣的事情——這只是我的同事和我昨晚想到的一個實現。
一個利用background-clip: text的不錯的解決方案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;
}
對於較短的文本，這樣的事情怎么樣？
如果你用循環做一些事情，用 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>
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>
社會保障局
.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);
}
}
如果您願意，您也可以使用 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>
這可以通過 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>
您可以使用以下代碼。 在這個例子中，我使用了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>
只為載入史冊！
我在 5-6 年前為自己的工作提出了一個解決方案，即Gradeext （純 javascript 和純 css，無依賴）。
技術解釋是你可以創建一個這樣的元素：
<span>A</span>
現在，如果要在文本上制作漸變，則需要創建多個圖層，每個圖層都具有特定的顏色，所創建的光譜將說明漸變效果。
例如，看看這是一個<span>里面的詞lorem並且會導致水平漸變效果（檢查示例）：
<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 也支持！
在這里你可以找到一個有效的現場演示，原始存儲庫也在 GitHub 上，開源並准備獲得一些更新 (:D)
這是我第一次（是的，5 年后，你沒聽錯）在 Internet 上的任何地方提到這個存儲庫，我對此感到很興奮！
[更新 - 2019 年 8 月：] Github 刪除了該存儲庫的github-pages演示，因為我來自伊朗！ 此處僅提供源代碼...
注意：這僅適用於一個字符，但如果您想要更多字符，請為每個信號字符添加一個類。 並且您可以在線性漸變中使用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>
這是用於整行文本的僅 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放大/縮小。
如果 Firefox 不是一個選項，則使用此腳本進行救援。
它的工作原理是為每個字符插入一個子span 。 在每個跨度內，一個非重復的 CSS 掩碼放置在 [0% - 50%] 和 [50% - 100%] 字母寬度（即 span 元素的寬度）之間。
這樣我們就不再有使用等寬字符的限制了。
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 === ' ' ? '\ ' : 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>
所有解決方案都通過拆分字母並將它們包裝在<span>中來工作。 我們不必在兩種情況下拆分字母：
div { font-size: 80px; font-weight: bolder; color: transparent; padding: 0; margin: 0; background: linear-gradient(90deg, rgb(34, 67, 143) 0% 50%, #409FBF 50%); background-clip: text; -webkit-background-clip: text; } .one { font-family: 'Nova Mono'; background-repeat: repeat-x; background-size: 45px; } .two { font-family: 'Gideon Roman'; writing-mode: vertical-lr; text-orientation: upright; letter-spacing: -35px; height: 500px; }
<!-- get the fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Nova+Mono&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Gideon+Roman&display=swap" rel="stylesheet"> <div id='one' class="one">X-RAY Winter</div> <div class="two">Minty</div>
預期輸出，以防字體不可用：
我知道背景剪輯和漸變的使用已經在其他答案中得到了證明，只是在你不必拆分字母的情況下。
我知道我在這里玩游戲遲到了......但我也對其中一些答案的復雜性感到困惑。 我誤解了要求嗎？ 這就像 4-5 行 css，對吧？
如何使用css顯示一半字符（html實體）（如果需要jquery）
[英]How to display half of a character(html entity) using css (and if required jquery)
我想將javascript和CSS應用於所有瀏覽器，但不應用於IE6，這可能嗎？
[英]I want to apply javascript and CSS to all browser but not to IE6 is it possible?
Chrome 擴展程序 - 如何正確應用暗模式 CSS（盡快）？
[英]Chrome extension - how to apply dark mode CSS correctly (as soon as possible)?
使用 CSS 輕松將不同的動畫應用於特定的 div，如果不可能的話 JS？
[英]Easily apply a different animations to a specific div using CSS and if not possible JS?
是否可以在數據屬性中使用json內容應用CSS規則？
[英]Is it possible to apply css rules using json content in a data attribute?
是否可以僅將某些 CSS 應用於禁用 Javascript 的用戶？
[英]Possible to apply some CSS only to users with Javascript disabled?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.