CODEWITHSUNDEEP
csshtml
Kryptix
Kryptix

Reputation: 129

Is it possible to use CSS to alter the colour of half a word (logo name)?

I have a logo name called Example.

I want the Exam to be blue and the le to be red.

I know you can use :first-letter but I need to change up to 4 characters. It's the only thing stopping me from making a pure CSS logo instead of using an image.

Upvotes: 3

Views: 7947

Answers (7)

Qvatra
Qvatra

Reputation: 3857

Its possible even without modifying the markup:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
      display: inline-block;
      margin: 0;
      line-height: 1em; 
      font-family: Helvetica, Arial, sans-serif;
      font-weight: bold;
      font-size: 100px;
      background: linear-gradient(to right, #1c87c9 50%, #8ebf42 50%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      }
    </style>
  </head>
  <body>
    <h1>R</h1>
    <p>This is a character with half-style.</p>
  </body>
</html>

Upvotes: 1

SimplyAzuma
SimplyAzuma

Reputation: 25594

I know you have already accepted an answer, but I figured I would contribute this method using jQuery, as it may be useful to you or future readers of this question.

HTML:

<span class="logo">Example</span>

CSS:

.logo{
   color:blue;
}

jQuery:

$('.logo').each(function() {
    $(this).html(
        $(this).html().substr(0, $(this).html().length-3)
        + "<span style='color: red'>"
        + $(this).html().substr(-3)
        + "</span>");
});

DEMO

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Hey i think you want to this as like

This is css Part

.logo{
    font-size: 33px;
    font-family: Helvetica;
    color:red;
}
.logo > span{
    color:blue;
}

This is HTML Part

<div class="logo">
    Exam
    <span>ple</span>
</div>

and now check to live demo http://jsfiddle.net/SyPfG/

Upvotes: 0

reisio
reisio

Reputation: 3242

<!doctype html>
<html>
    <head>
        <title></title>
        <style>
h1 {
    font-size: 0;
}
h1:before {
    content: 'Examp';
    color: #0000ff;
    font-size: 32px;
}
h1:after {
    content: 'le';
    color: #ff0000;
    font-size: 32px;
}
        </style>
    </head>
    <body>
        <h1>Example</h1>
    </body>
</html>

Upvotes: 2

Steve
Steve

Reputation: 2345

You could split the single (what i assume is a span) into 3 separate spans.

<span class="blue logo">Exam</span><span class="logo">p</span><span class="red logo">le</span>

then your css could look something like this

.blue {
    color: blue;
}

.red {
    color: red;
}

.logo {
    font-size: 33px;
    font-family: Helvetica;
}

Upvotes: 5

mahaidery
mahaidery

Reputation: 631

You can use this Method as O.V suggested!:
<div id="logo"><span style="color:red">Exam</span><span style="black">p</span><span style="blue">le</span></div>

Upvotes: -1

Oleg
Oleg

Reputation: 24988

Assuming you can modify the markup, you could just re-wrap the text:

<span class="branding-highlight">Exam</span>ple
.branding-highlight {color:red;}

CSS does not have mechanics for accessing n-th everything just yet. And if it will, it will take time for browsers to adopt it - the sample above would remain best supported.

Upvotes: 1

Related Questions