Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save charlenopires/4d7c41666471a578a36d to your computer and use it in GitHub Desktop.
Save charlenopires/4d7c41666471a578a36d to your computer and use it in GitHub Desktop.
Applying CSS effects onto individual letters

Applying CSS effects onto individual letters

This is how to apply CSS styling onto individual letters inside a HTML element using jQuery. Made by Luke for a friend, you're welcome.

A Pen by Luke Brown on CodePen.

License.

<h1>How do I apply an effect on individual letters?</h1>
<div>
<p>This</p>
<p>Is</p>
<p>How</p>
<p>You</p>
<p>Do</p>
<p>It</p>
<p>Ka-Boom</p>
</div>
var myColors = ["#C23519", "#EC583A", "#FF7148", "#B22E13"];
$('div').find('p').each(function(){
var $el = $(this),
text = $el.text(),
len = text.length,
coLen = myColors.length,
newCont = '';
for(var i=0; i<len; i++){
newCont += '<span style="background:'+ myColors[i%coLen] +'">'+ text.charAt(i) +'</span>';
}
$el.html(newCont);
});
html {
background-color: #222;
}
div {
margin: auto;
display: table;
}
p, h1 {
font-size: 40px;
color: white;
text-align: center;
font-family: 'Raleway', sans-serif;
}
span {
padding: 15px;
text-transform: uppercase;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment