CODEWITHSUNDEEP
htmlcss
Hartvig
Hartvig

Reputation: 13

Multi-Colored Text in one line

I'm trying to make a title with multiple colors and I've already found a way but I'm not quite satisfied with it. I want it to be on attribute or a h1 element, with the text and the multiple colors

Here's what I've been using

body {
  background-color: #1A1A1D;
}

.header {
  text-align: center;
  font-size: 48px;
}

#super {
  color: #FF6447;
  text-shadow: 2px 2px #000000;
}

#bone {
  color: #FFB951;
  text-shadow: 2px 2px #000000;
}

#craft {
  color: #FFF547;
  text-shadow: 2px 2px #000000;
}
<div class="header">
  <a id="super">SUPER</a><a id="bone">BONE</a><a id="craft">CRAFT</a>
</div>

Upvotes: 0

Views: 4420

Answers (2)

EternalHour
EternalHour

Reputation: 8621

Not quite sure what you're after, but if you want the font color to be based on an attribute you can use data. The nice thing about this approach instead of using ids, is that you can easily set/get the values or elements with Javascript if needed.

Also, you should be using span tags rather than a.

body {
  background-color: #1A1A1D;
}

.header {
  text-align: center;
  font-size: 48px;
}

span[data-color] {
  text-shadow: 2px 2px #000000;
}

span[data-color="super"] {
  color: #FF6447;
}

span[data-color="bone"] {
  color: #FFB951;
}

span[data-color="craft"] {
  color: #FFF547;
}
<div class="header">
  <span data-color="super">SUPER</span><span data-color="bone">BONE</span><span data-color="craft">CRAFT</span>
</div>

Upvotes: 2

Jakub
Jakub

Reputation: 123

Try this:

#someID {
  text-shadow: 2px 2px #000000;
}

.super {
  color: #FF6447;
}

.bone {
  color: #FFB951;
}

.craft {
  color: #FFF547;
}
<div class="header">
  <a id="someID"><span class="super">SUPER</span><span class="bone">BONE</span><span class="craft">CRAFT</span></a>
</div>

In this case you have only one a tag.

Upvotes: -1

Related Questions