Starting with text that has an inset shadow, how do I make a color transition for each letter, as I hover over each letter? Only using CSS & HTML
-3
Starting with text that has an inset shadow, how do I make a color transition for each letter, as I hover over each letter? Only using CSS & HTML.
I want to create the effect of a stone tablet's letters lighting up red, similar to fire. For a creative school project.
Also, if doing individual words, rather than letters is easier, that would be fine too.
body
background: #ccc;
h1
font: bold 100px arial, sans-serif;
background-color: #565656;
color: transparent;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
transition: 2s;
h1:hover
text-shadow: 2px 2px 3px rgba(255, 0, 0, 0.5);
<h1>Thou shall code.</h1>html css text colors transition
edited Dec 17 '18 at 15:53
Richard Parnaby-King
9,846857111
asked Nov 15 '18 at 18:09
Alan SmithAlan Smith
61
add a comment |
-3
Starting with text that has an inset shadow, how do I make a color transition for each letter, as I hover over each letter? Only using CSS & HTML.
I want to create the effect of a stone tablet's letters lighting up red, similar to fire. For a creative school project.
Also, if doing individual words, rather than letters is easier, that would be fine too.
body
background: #ccc;
h1
font: bold 100px arial, sans-serif;
background-color: #565656;
color: transparent;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
transition: 2s;
h1:hover
text-shadow: 2px 2px 3px rgba(255, 0, 0, 0.5);
<h1>Thou shall code.</h1>html css text colors transition
edited Dec 17 '18 at 15:53
Richard Parnaby-King
9,846857111
asked Nov 15 '18 at 18:09
Alan SmithAlan Smith
61
4
The posted question does not appear to include any attempt at all to solve the problem. StackOverflow expects you to try to solve your own problem first, as your attempts help us to better understand what you want. Please edit the question to show what you've tried, so as to illustrate a specific problem you're having in a Minimal, Complete, and Verifiable example.
– Smollet777
Nov 15 '18 at 18:12
Try something like this jsfiddle.net/desandro/Ew6Zt . You will fall in love with it.
– Love Buddha
Nov 15 '18 at 18:26
We can't help you with your homework until you at least show us what you've tried.
– webfrogs
Nov 15 '18 at 18:32
Sorry, new to this, I've updated my post with my current code. :)
– Alan Smith
Nov 15 '18 at 20:28
add a comment |
-3
-3
-3
Starting with text that has an inset shadow, how do I make a color transition for each letter, as I hover over each letter? Only using CSS & HTML.
I want to create the effect of a stone tablet's letters lighting up red, similar to fire. For a creative school project.
Also, if doing individual words, rather than letters is easier, that would be fine too.
body
background: #ccc;
h1
font: bold 100px arial, sans-serif;
background-color: #565656;
color: transparent;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
transition: 2s;
h1:hover
text-shadow: 2px 2px 3px rgba(255, 0, 0, 0.5);
<h1>Thou shall code.</h1>html css text colors transition
edited Dec 17 '18 at 15:53
Richard Parnaby-King
9,846857111
asked Nov 15 '18 at 18:09
Alan SmithAlan Smith
61
Starting with text that has an inset shadow, how do I make a color transition for each letter, as I hover over each letter? Only using CSS & HTML.
I want to create the effect of a stone tablet's letters lighting up red, similar to fire. For a creative school project.
Also, if doing individual words, rather than letters is easier, that would be fine too.
body
background: #ccc;
h1
font: bold 100px arial, sans-serif;
background-color: #565656;
color: transparent;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
transition: 2s;
h1:hover
text-shadow: 2px 2px 3px rgba(255, 0, 0, 0.5);
<h1>Thou shall code.</h1>body
background: #ccc;
h1
font: bold 100px arial, sans-serif;
background-color: #565656;
color: transparent;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
transition: 2s;
h1:hover
text-shadow: 2px 2px 3px rgba(255, 0, 0, 0.5);
<h1>Thou shall code.</h1>body
background: #ccc;
h1
font: bold 100px arial, sans-serif;
background-color: #565656;
color: transparent;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
transition: 2s;
h1:hover
text-shadow: 2px 2px 3px rgba(255, 0, 0, 0.5);
<h1>Thou shall code.</h1>html css text colors transition
html css text colors transition
edited Dec 17 '18 at 15:53
Richard Parnaby-King
9,846857111
asked Nov 15 '18 at 18:09
Alan SmithAlan Smith
61
edited Dec 17 '18 at 15:53
Richard Parnaby-King
9,846857111
asked Nov 15 '18 at 18:09
Alan SmithAlan Smith
61
edited Dec 17 '18 at 15:53
Richard Parnaby-King
9,846857111
edited Dec 17 '18 at 15:53
Richard Parnaby-King
9,846857111
edited Dec 17 '18 at 15:53
Richard Parnaby-King
9,846857111
9,846857111
asked Nov 15 '18 at 18:09
Alan SmithAlan Smith
61
asked Nov 15 '18 at 18:09
Alan SmithAlan Smith
61
asked Nov 15 '18 at 18:09
Alan SmithAlan Smith
61
61
4
The posted question does not appear to include any attempt at all to solve the problem. StackOverflow expects you to try to solve your own problem first, as your attempts help us to better understand what you want. Please edit the question to show what you've tried, so as to illustrate a specific problem you're having in a Minimal, Complete, and Verifiable example.
– Smollet777
Nov 15 '18 at 18:12
Try something like this jsfiddle.net/desandro/Ew6Zt . You will fall in love with it.
– Love Buddha
Nov 15 '18 at 18:26
We can't help you with your homework until you at least show us what you've tried.
– webfrogs
Nov 15 '18 at 18:32
Sorry, new to this, I've updated my post with my current code. :)
– Alan Smith
Nov 15 '18 at 20:28
add a comment |
4
The posted question does not appear to include any attempt at all to solve the problem. StackOverflow expects you to try to solve your own problem first, as your attempts help us to better understand what you want. Please edit the question to show what you've tried, so as to illustrate a specific problem you're having in a Minimal, Complete, and Verifiable example.
– Smollet777
Nov 15 '18 at 18:12
Try something like this jsfiddle.net/desandro/Ew6Zt . You will fall in love with it.
– Love Buddha
Nov 15 '18 at 18:26
We can't help you with your homework until you at least show us what you've tried.
– webfrogs
Nov 15 '18 at 18:32
Sorry, new to this, I've updated my post with my current code. :)
– Alan Smith
Nov 15 '18 at 20:28
4
4
The posted question does not appear to include any attempt at all to solve the problem. StackOverflow expects you to try to solve your own problem first, as your attempts help us to better understand what you want. Please edit the question to show what you've tried, so as to illustrate a specific problem you're having in a Minimal, Complete, and Verifiable example.
– Smollet777
Nov 15 '18 at 18:12
The posted question does not appear to include any attempt at all to solve the problem. StackOverflow expects you to try to solve your own problem first, as your attempts help us to better understand what you want. Please edit the question to show what you've tried, so as to illustrate a specific problem you're having in a Minimal, Complete, and Verifiable example.
– Smollet777
Nov 15 '18 at 18:12
Try something like this jsfiddle.net/desandro/Ew6Zt . You will fall in love with it.
– Love Buddha
Nov 15 '18 at 18:26
Try something like this jsfiddle.net/desandro/Ew6Zt . You will fall in love with it.
– Love Buddha
Nov 15 '18 at 18:26
We can't help you with your homework until you at least show us what you've tried.
– webfrogs
Nov 15 '18 at 18:32
We can't help you with your homework until you at least show us what you've tried.
– webfrogs
Nov 15 '18 at 18:32
Sorry, new to this, I've updated my post with my current code. :)
– Alan Smith
Nov 15 '18 at 20:28
Sorry, new to this, I've updated my post with my current code. :)
– Alan Smith
Nov 15 '18 at 20:28
add a comment |
1 Answer
1
active
oldest
votes
0
The only way to target each individual letter (or word) is to wrap them in spans and target the spans with the css. In this example I have wrapped each letter in a span.
body
background: #ccc;
h1
font: bold 100px arial, sans-serif;
background-color: #565656;
color: transparent;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
h1 span
transition: 2s;
h1 span:hover
text-shadow: 2px 2px 3px rgba(255, 0, 0, 0.5);
<h1><span>T</span><span>h</span><span>o</span><span>u</span> <span>s</span><span>h</span><span>a</span><span>l</span><span>l</span> <span>c</span><span>o</span><span>d</span><span>e</span>.</h1>answered Dec 17 '18 at 15:57
Richard Parnaby-KingRichard Parnaby-King
9,846857111
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53325511%2fstarting-with-text-that-has-an-inset-shadow-how-do-i-make-a-color-transition-fo%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
The only way to target each individual letter (or word) is to wrap them in spans and target the spans with the css. In this example I have wrapped each letter in a span.
body
background: #ccc;
h1
font: bold 100px arial, sans-serif;
background-color: #565656;
color: transparent;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
h1 span
transition: 2s;
h1 span:hover
text-shadow: 2px 2px 3px rgba(255, 0, 0, 0.5);
<h1><span>T</span><span>h</span><span>o</span><span>u</span> <span>s</span><span>h</span><span>a</span><span>l</span><span>l</span> <span>c</span><span>o</span><span>d</span><span>e</span>.</h1>answered Dec 17 '18 at 15:57
Richard Parnaby-KingRichard Parnaby-King
9,846857111
add a comment |
0
The only way to target each individual letter (or word) is to wrap them in spans and target the spans with the css. In this example I have wrapped each letter in a span.
body
background: #ccc;
h1
font: bold 100px arial, sans-serif;
background-color: #565656;
color: transparent;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
h1 span
transition: 2s;
h1 span:hover
text-shadow: 2px 2px 3px rgba(255, 0, 0, 0.5);
<h1><span>T</span><span>h</span><span>o</span><span>u</span> <span>s</span><span>h</span><span>a</span><span>l</span><span>l</span> <span>c</span><span>o</span><span>d</span><span>e</span>.</h1>answered Dec 17 '18 at 15:57
Richard Parnaby-KingRichard Parnaby-King
9,846857111
add a comment |
0
0
0
The only way to target each individual letter (or word) is to wrap them in spans and target the spans with the css. In this example I have wrapped each letter in a span.
body
background: #ccc;
h1
font: bold 100px arial, sans-serif;
background-color: #565656;
color: transparent;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
h1 span
transition: 2s;
h1 span:hover
text-shadow: 2px 2px 3px rgba(255, 0, 0, 0.5);
<h1><span>T</span><span>h</span><span>o</span><span>u</span> <span>s</span><span>h</span><span>a</span><span>l</span><span>l</span> <span>c</span><span>o</span><span>d</span><span>e</span>.</h1>answered Dec 17 '18 at 15:57
Richard Parnaby-KingRichard Parnaby-King
9,846857111
The only way to target each individual letter (or word) is to wrap them in spans and target the spans with the css. In this example I have wrapped each letter in a span.
body
background: #ccc;
h1
font: bold 100px arial, sans-serif;
background-color: #565656;
color: transparent;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
h1 span
transition: 2s;
h1 span:hover
text-shadow: 2px 2px 3px rgba(255, 0, 0, 0.5);
<h1><span>T</span><span>h</span><span>o</span><span>u</span> <span>s</span><span>h</span><span>a</span><span>l</span><span>l</span> <span>c</span><span>o</span><span>d</span><span>e</span>.</h1>body
background: #ccc;
h1
font: bold 100px arial, sans-serif;
background-color: #565656;
color: transparent;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
h1 span
transition: 2s;
h1 span:hover
text-shadow: 2px 2px 3px rgba(255, 0, 0, 0.5);
<h1><span>T</span><span>h</span><span>o</span><span>u</span> <span>s</span><span>h</span><span>a</span><span>l</span><span>l</span> <span>c</span><span>o</span><span>d</span><span>e</span>.</h1>body
background: #ccc;
h1
font: bold 100px arial, sans-serif;
background-color: #565656;
color: transparent;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
h1 span
transition: 2s;
h1 span:hover
text-shadow: 2px 2px 3px rgba(255, 0, 0, 0.5);
<h1><span>T</span><span>h</span><span>o</span><span>u</span> <span>s</span><span>h</span><span>a</span><span>l</span><span>l</span> <span>c</span><span>o</span><span>d</span><span>e</span>.</h1>answered Dec 17 '18 at 15:57
Richard Parnaby-KingRichard Parnaby-King
9,846857111
answered Dec 17 '18 at 15:57
Richard Parnaby-KingRichard Parnaby-King
9,846857111
answered Dec 17 '18 at 15:57
Richard Parnaby-KingRichard Parnaby-King
9,846857111
answered Dec 17 '18 at 15:57
Richard Parnaby-KingRichard Parnaby-King
9,846857111
9,846857111
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53325511%2fstarting-with-text-that-has-an-inset-shadow-how-do-i-make-a-color-transition-fo%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
4
The posted question does not appear to include any attempt at all to solve the problem. StackOverflow expects you to try to solve your own problem first, as your attempts help us to better understand what you want. Please edit the question to show what you've tried, so as to illustrate a specific problem you're having in a Minimal, Complete, and Verifiable example.
– Smollet777
Nov 15 '18 at 18:12
Try something like this jsfiddle.net/desandro/Ew6Zt . You will fall in love with it.
– Love Buddha
Nov 15 '18 at 18:26
We can't help you with your homework until you at least show us what you've tried.
– webfrogs
Nov 15 '18 at 18:32
Sorry, new to this, I've updated my post with my current code. :)
– Alan Smith
Nov 15 '18 at 20:28