javascript क्या सीएसएस को आधे चरित्र में लागू करना संभव है?




html css (15)

मैं क्या देख रहा हूं:

एक चरित्र के एक आधा शैली शैली का एक तरीका। (इस मामले में, आधा पत्र पारदर्शी है)

जो मैंने वर्तमान में खोजा है और कोशिश की है (बिना किसी किस्मत के):

  • एक अक्षर / पत्र के आधे स्टाइल के लिए तरीके
  • सीएसएस या जावास्क्रिप्ट के साथ एक चरित्र का स्टाइल हिस्सा
  • सीएसएस को एक चरित्र के 50% पर लागू करें

नीचे एक उदाहरण है जो मैं प्राप्त करने की कोशिश कर रहा हूं।

क्या इसके लिए कोई सीएसएस या जावास्क्रिप्ट समाधान मौजूद है, या क्या मुझे छवियों का सहारा लेना होगा? मैं छवि मार्ग नहीं जाना पसंद करूंगा क्योंकि यह पाठ गतिशील रूप से उत्पन्न होने वाला होगा।

अद्यतन करें:

चूंकि कई ने पूछा है कि मैं कभी भी चरित्र के आधा शैली क्यों बनाना चाहूंगा, यही कारण है कि। मेरे शहर ने हाल ही में अपने लिए एक नया "ब्रांड" परिभाषित करने के लिए $ 250,000 खर्च किए थे। यह logo वह है जो वे साथ आए थे। कई लोगों ने सादगी और रचनात्मकता की कमी के बारे में शिकायत की है और ऐसा करना जारी रखते हैं। मेरा लक्ष्य इस website साथ एक मजाक के रूप में आना था। 'हैलिफ़ैक्स' में टाइप करें और आप देखेंगे कि मेरा क्या मतलब है। :)


मैंने अभी @ आर्बेल के समाधान के साथ खेला:

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>


एक और सीएसएस-केवल समाधान (हालांकि यदि आप अक्षर-विशिष्ट सीएसएस लिखना नहीं चाहते हैं तो डेटा-विशेषता की आवश्यकता होती है)। यह बोर्ड में अधिक काम करता है (परीक्षण आईई 9/10, क्रोम नवीनतम और एफएफ नवीनतम)

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>


यहां कैनवास में एक बदसूरत कार्यान्वयन। मैंने इस समाधान की कोशिश की, लेकिन परिणाम मेरी अपेक्षा से भी बदतर हैं, इसलिए यहां वैसे भी है।

        $("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>


जेएसफिल्ड डेमो

हम सिर्फ सीएसएस छद्म चयनकर्ताओं का उपयोग करके करेंगे!

यह तकनीक गतिशील रूप से जेनरेट की गई सामग्री और विभिन्न फ़ॉन्ट आकार और चौड़ाई के साथ काम करेगी।

HTML:

<div class='split-color'>Two is better than one.</div>

सीएसएस:

.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);
}

छोटे पाठ के लिए ऐसा कुछ कैसे करें?

यदि आपने लूप के साथ कुछ किया है, तो जावास्क्रिप्ट के साथ अक्षर दोहराते हुए यह लंबे टेक्स्ट के लिए भी काम कर सकता है। वैसे भी, परिणाम इस तरह कुछ है:

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>


यह केवल सीएसएस :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>

>> जेएसफ़िल्ड पर देखें


एफडब्ल्यूआईडब्लू, यहां पर मेरा सीएसएस केवल सीएसएस के साथ कर रहा है: http://codepen.io/ricardozea/pen/uFbts/

कई नोट्स:

  • मुख्य कारण यह है कि मैंने खुद का परीक्षण किया और देखा कि क्या मैं वास्तव में ओपी को सार्थक उत्तर प्रदान करते हुए चरित्र के आधे स्टाइल को पूरा करने में सक्षम था।

  • मुझे पता है कि यह आदर्श या सबसे स्केलेबल समाधान नहीं है और यहां लोगों द्वारा प्रस्तावित समाधान "वास्तविक दुनिया" परिदृश्यों के लिए बहुत बेहतर हैं।

  • मैंने बनाया सीएसएस कोड पहले विचारों पर आधारित है जो मेरे दिमाग में आया और समस्या के लिए मेरा व्यक्तिगत दृष्टिकोण।

  • मेरा समाधान केवल एक्स, ए, ओ, एम जैसे सममित पात्रों पर काम करता है। ** यह बी, सी, एफ, के या कम केस अक्षरों जैसे असममित वर्णों पर काम नहीं करता है।

  • ** फिर भी, यह दृष्टिकोण असमान वर्णों के साथ बहुत ही रोचक 'आकार' बनाता है। एक्स को एक के या किसी कम केस अक्षर में बदलने की कोशिश करें जैसे सीएसएस में एच या पी :)

एचटीएमएल

<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);
  }
}

यदि आप इसमें रूचि रखते हैं, तो लुकास बेबर का गड़बड़ एक बहुत ही समान और सुपर कूल प्रभाव है:

एक साधारण SASS Mixin जैसे कि बनाया गया है

.example-one {
  font-size: 100px;
  @include textGlitch("example-one", 17, white, black, red, blue, 450, 115);
}

क्रिस कोयर के सीएसएस ट्रिक्स और लुकास बेबर के कोडेन पेज पर अधिक जानकारी


यह अप्रासंगिक हो सकता है, शायद नहीं, लेकिन कुछ समय पहले, मैंने एक jQuery फ़ंक्शन बनाया जो एक ही चीज़ करता है, लेकिन क्षैतिज रूप से।

मैंने इसे "स्ट्रिपपेक्स" कहा 'पट्टी' + 'टेक्स्ट' के लिए, डेमो: http://cdpn.io/FcIBg

मैं यह नहीं कह रहा हूं कि यह किसी भी समस्या का समाधान है, लेकिन मैंने पहले से ही चरित्र के आधे हिस्से में सीएसएस लागू करने की कोशिश की है, लेकिन क्षैतिज रूप से, तो विचार समान है, अहसास भयानक हो सकता है, लेकिन यह काम करता है।

आह, और सबसे महत्वपूर्ण, मुझे इसे बनाने में मजा आया!


सीमित सीएसएस और jQuery समाधान

मुझे यकीन नहीं है कि यह समाधान कितना सुरुचिपूर्ण है, लेकिन यह सब कुछ ठीक से आधे में कटौती करता है: http://jsfiddle.net/9wxfY/11/

अन्यथा, मैंने आपके लिए एक अच्छा समाधान बनाया है ... आपको बस इतना करना है कि यह आपके HTML के लिए है:

6/13/2016 के अनुसार इसे संपादित करें, सटीक, और सटीक पर एक नज़र डालें: http://jsfiddle.net/9wxfY/43/

सीएसएस के लिए, यह बहुत सीमित है ... आपको केवल इसे लागू करने की आवश्यकता है :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 = "&nbsp;";
    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>


संपादित करें (अक्टूबर 2017): background-clip या बल्कि background-image options अब हर प्रमुख ब्राउज़र द्वारा समर्थित हैं: CanIUse

हां, आप इसे केवल एक चरित्र और केवल सीएसएस के साथ कर सकते हैं।

वेबकिट (और क्रोम) केवल, हालांकि:

http://jsbin.com/rexoyice/1/

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>

दृश्यमान, दो उदाहरणों का उपयोग करने वाले सभी उदाहरण (जेएस, सीएसएस छद्म तत्व, या सिर्फ एचटीएमएल के माध्यम से) ठीक दिखते हैं, लेकिन ध्यान दें कि सभी डोम को सामग्री जोड़ते हैं जो पहुंच का कारण बन सकता है - साथ ही पाठ चयन / कट / मुद्दों को पेस्ट करें।


यदि आप चाहें तो आप एसवीजी का उपयोग करके भी ऐसा कर सकते हैं:

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>

http://codepen.io/nicbell/pen/jGcbq


आप नीचे कोड का उपयोग कर सकते हैं। यहां इस उदाहरण में मैंने 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>


निकटतम मैं प्राप्त कर सकता हूं:

$(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/


एक अच्छा वेबकिट-केवल समाधान जो 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;
}




styling