javascript - Est-il possible d'appliquer CSS à la moitié d'un caractère

Mots clés : javascripthtmlcssjavascript

meilleur 4 Réponses javascript - Est-il possible d'appliquer CSS à la moitié d'un caractère

vote vote

92

// 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>
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>
// 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>
// 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>
// 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>
// 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>
// 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>
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>
vote vote

89

<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> 
<h1 class="splitchar horizontal">Splitchar</h1> 
$(".splitchar").splitchar(); 
.horizontal { /* Base CSS - e.g font-size */ } .horizontal:before { /* CSS for the left half */ } .horizontal:after { /* CSS for the right half */ } 
vote vote

78

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>
vote vote

65

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

Questions similaires