Is it possible to apply CSS to half of a character/word?

10 replies
  • WEB DESIGN
  • |
Is it possible to apply CSS to half of a character/word?
#apply #character or word #css #half
  • Profile picture of the author nmwf
    Half of a word? Yes, via span tags. Half a character? Have no idea. (Probably not!)
    Signature
    Write comprehensible articles on *any* topic in seconds with First Draft...
    First Draft's: Download | Add-Ons | Templates | Purchase | Support | Affiliates
    {{ DiscussionBoard.errors[10229167].message }}
  • half word yes, <span style="color:red;">Word</span> Same can be done for a single character. Half a character no.
    Signature
    Premium WooCommerce & WordPress Plugins $10/ea. or FREE With Membership. PluginForage.com
    {{ DiscussionBoard.errors[10230667].message }}
  • Profile picture of the author adlerdale
    Yes, you can do by making the changes in HTML. Just wrap the text you want to affect in inline tags, such as a <span>:

    In HTML: Welcome Back

    Welcome<span="Green">Back</span>

    Now go to the CSS file and reference the class name green: .green{color:#008000;}
    Signature
    Latest Technology Updates - For SEO Updates Click Here
    {{ DiscussionBoard.errors[10231006].message }}
  • Profile picture of the author umadjawed
    no it is not possibe use span
    example:<span style="color:red;">WEL</span><span style="color:Black;">COME</span>
    {{ DiscussionBoard.errors[10236890].message }}
  • Profile picture of the author kmjyoti
    Yes, it is possible.
    Signature

    One and only one Best Web Hosting Companies discount coupon code available

    {{ DiscussionBoard.errors[10238362].message }}
  • Profile picture of the author worldprime
    Yes it's possible. You can do this.
    {{ DiscussionBoard.errors[10238401].message }}
  • Profile picture of the author lpfacun
    On character, yes. Use css tricks gradients so it will like two colors.
    {{ DiscussionBoard.errors[10239005].message }}
    • Profile picture of the author fulltimewp
      Originally Posted by lpfacun View Post

      On character, yes. Use css tricks gradients so it will like two colors.
      Maybe you could do something like this, but it would only work in webkit browsers.


      Originally Posted by protekconsulting View Post

      Is it possible to apply CSS to half of a character/word?
      Yes, you can do this!

      You need to have two of the same character in your markup and then use some fancy CSS to get it all arranged. Here's an example, you'll need to adjust the values to work with your font size:

      HTML
      Code:
      <div class="split-text"><span>S</span><span>S</span></div>
      CSS
      Code:
      .split-text span{
          font-size: 200px;
          font-weight: bold;
          display:inline-block;
          font-family: Arial;
          width: 68px;
          overflow: hidden;
      }
      
      
      .split-text > span{
          color: #CE0000;
      }
      .split-text > span + span{
         color: #000;
         text-indent: -66px;
      }
      {{ DiscussionBoard.errors[10242157].message }}

Trending Topics