是否可以将CSS应用于angular色的一半？
我在找什么：
devise一个angular色的一个半angular的方法。 （在这种情况下，一半的字母是透明的）
我目前search和尝试（没有运气）：
- devise一半字符/字母的方法
- 使用CSS或JavaScriptdeviseangular色的一部分
- 将CSS应用于一个angular色的50％
下面是我想要获得的一个例子。
是否存在一个CSS或JavaScript解决scheme，或者我将不得不求助于图像？ 我宁愿不去图像路由，因为这个文本将最终dynamic生成。
更新：
因为很多人问我为什么会想塑造一半angular色，所以这就是为什么。 我的城市最近花了25万美元为自己定义一个新的“品牌”。 这个标志是他们想出来的。 许多人抱怨简单和缺乏创造力，并继续这样做。 我的目标是想出这个网站作为一个笑话。 input“哈利法克斯”，你会明白我的意思。 🙂
现在在GitHub上作为一个插件！
随意叉和改善。
演示 | 下载Zip | Half-Style.com （redirect到GitHub）
- 纯CSS的单个字符
- 用于跨文本或多个字符自动化的JavaScript
- 为盲人或视觉障碍者的屏幕阅读器保留文本可访问性
第1部分：基本解决scheme
演示： http : //jsfiddle.net/arbel/pd9yB/1362/
这适用于任何dynamic文本或单个字符，并且都是自动的。 所有你需要做的是在目标文本上添加一个类，其余的都照顾。
此外，为盲人或视觉障碍者的屏幕阅读器保留原始文本的可访问性。
单个字符的解释：
纯粹的CSS。 所有你需要做的就是将.halfStyle类应用到每个包含你想成为半.halfStyle的字符的元素。
对于每个包含字符的span元素，可以创build一个data属性，例如data-content="X" ，在伪元素上使用content: attr(data-content); 所以.halfStyle:before类将是dynamic的，你不需要为每个实例使用硬编码。
任何文字的解释：
只需将textToHalfStyle类添加到包含文本的元素即可。
CSS：
.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; }
HTML
<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>
为了使其自动化，只需将textToHalfStyle类添加到包含文本的元素。
jQuery的自动模式：
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); }); });
演示： http : //jsfiddle.net/arbel/pd9yB/1363/
第2部分：高级解决scheme – 独立的左侧和右侧部分
有了这个解决scheme，您可以单独和独立地devise左侧和右侧的零件 。
一切都是一样的，只有更高级的CSS才能做到这一点。
演示： http : //jsfiddle.net/arbel/pd9yB/1363/
.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 */ }
第3部分：混搭和改进
现在我们知道什么是可能的，我们来创build一些变体。
– 水平半部分
演示
.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 */ }
– 垂直1/3部分
演示
.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 */ }
– 水平1/3部分
演示
.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 */ }
-HefStyle改进@KevinGranger
演示
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; }
@SamTremaine改善HalfStyle的风格
演示和samtremaine.co.uk
.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; }
第4部分：准备生产
可以在同一页面的所需元素上使用自定义的不同的半格式样式集。 你可以定义多个样式集，并告诉插件使用哪一个。
该插件使用目标.textToHalfStyle元素上的数据属性data-halfstyle="[-CustomClassName-]" ，并自动进行所有必要的更改。
所以，只需在包含文本的元素上添加textToHalfStyle类和数据属性data-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'); 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); }); });
此外，CSS样式集的类定义匹配上面提到的[-CustomClassName-]部分，被链接到.halfStyle ，所以我们将有.halfStyle.[-CustomClassName-]
/* 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
HTML：
<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>
多个半风格的演示在同一页上。
我刚刚完成开发插件，它是供大家使用！ 希望你会喜欢它。
在GitHub上查看项目 – 查看项目网站 。 （所以你可以看到所有的分割样式）
用法
首先，确保你已经包含了jQuery库。 得到最新的jQuery版本的最好方法是更新你的head标签：
<script src="jquery-1.11.1.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();
定制
为了使文本看起来完全符合您的要求，您所要做的就是像这样应用您的devise：
.horizontal { /* Base CSS - eg font-size */ } .horizontal:before { /* CSS for the left half */ } .horizontal:after { /* CSS for the right half */ }
而已！ 现在你已经拥有了Splitchar插件。 更多信息请访问http://razvanbalosin.com/Splitchar.js/ 。
编辑（2017年10月）：现在，每个主要浏览器都支持
background-clip或backbackground-image options： CanIUse
是的，你可以只用一个字符，只有CSS。
Webkit（和Chrome）只有：
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%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
<h1>X</h1>
JSFiddle DEMO
我们将只使用CSS伪select器来做到这一点！
这种技术将与dynamic生成的内容和不同的字体大小和宽度一起工作。
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; }
要包装dynamic生成的string，你可以使用这样的函数：
// 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); }
这可能是无关紧要的，也许不是，但是前一段时间，我创build了一个jQuery函数来做同样的事情，但水平地。
我把它称为“Strippex”对于“条纹”+“文本”，演示： http ：//cdpn.io/FcIBg
我并不是说这是任何问题的解决scheme，但是我已经尝试将CSS应用于一半angular色，但横向，所以这个想法是相同的，实现可能是可怕的，但它的工作原理。
啊，最重要的是，我很开心创造它！
这里是一个丑陋的实现在canvas上。 我尝试了这个解决scheme，但是结果比我预期的要糟糕，所以在这里它是无论如何。
<div>Example Text</div> $(function(){ $("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); }); }); });
如果您对此感兴趣，那么Lucas Bebber's Glitch就是一个非常相似和超级酷的效果：
用一个简单的SASS Mixin创build如
.example-one { font-size: 100px; @include textGlitch("example-one", 17, white, black, red, blue, 450, 115); }
Chris Coyer的CSS技巧和Lucas Bebber的Codepen页面的更多细节
最近我可以得到：
$(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>
我刚刚玩过Arbel的解决scheme：
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的解决scheme（尽pipe如果你不想编写特定于字母的CSS，则需要data-attribute）。 这个更全面的工作（经testing的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解决scheme
我不确定这个解决scheme有多优雅，但是它把所有东西都切成两半： http : //jsfiddle.net/9wxfY/11/
否则，我已经为你创build了一个很好的解决scheme…所有你需要做的就是为你的HTML：
看看这个最新的，准确的，编辑截至6/13/2016： 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/
你可以撬开这些代码，做各种有趣的事情 – 这只是我的一个实现，我昨天晚上想到了。
一个很好的WebKit解决scheme，利用background-clip: text支持： http : //jsfiddle.net/sandro_paganotti/wLkVt/
span{ font-size: 100px; background: linear-gradient(to right, black, black 50%, grey 50%, grey); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
FWIW, here's my take on this doing it only with CSS: http://codepen.io/ricardozea/pen/uFbts/
Several notes:
-
The main reason I did this was to test myself and see if I was able to accomplish styling half of a character while actually providing a meaningful answer to the OP.
-
I am aware that this is not an ideal or the most scalable solution and the solutions proposed by the people here are far better for "real world" scenarios.
-
The CSS code I created is based on the first thoughts that came to my mind and my own personal approach to the problem.
-
My solution only works on symmetrical characters, like X, A, O, M. **It does not work on asymmetric characters like B, C, F, K or lower case letters.
-
** HOWEVER, this approach creates very interesting 'shapes' with asymmetric characters. Try changing the X to a K or to a lower case letter like an h or a p in the CSS 🙂
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); } }
You can also do it using SVG, if you wish:
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>
This can be achieved with just CSS :before selector and 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>
How about something like this for shorter text?
It could even works for longer characters if you do something loop and repeating over the characters with JavaScript, anyway the result is something like this:
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>
You can use below code. Here in this example I have used h1 tag and added an attribute data-title-text="Display Text" which will appear with different color text on h1 tag text element ,which gives effect halfcolored text as shown in below example
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>
