Goal
A hero section with text
The hero text contains spans
A circle follows the mouse position
Where the circle overlaps the spans, an animated background is revealed
All other text remains black, even if they are within the circle
Ideally, I'd like to use a single animated background that is shared across all spans
Mockup
I can't figure out how to set up the HTML and CSS for this.
What I have So Far
I got a part of it working, though it's in a round-about way and I'm not sure the approach will let me continue on toward the desired goal.
The solution uses a background image applied to the heading text with background-clip: text;. If I'm not mistaken, this approach won't let me achieve the circle-reveal effect. I assume for that the image needs to be a separate layer below the text so I can mask it with the circle that follows the mouse.
Instead of revealing the background for the selected spans, I'm revealing the background for the entire h1, and using spans to define which text should remain black. For some reason I couldn't get it to work the other way around.
<h1 class="text-animated-bg">
<span class="text-black">This is some</span> text <span class="text-black">that I wrote with</span> various words <span class="text-black">that reveal an animated </span>background
</h1>
.text-animated-bg {
padding-top: 20px;
padding-bottom: 20px;
background-image: url("animation.gif");
background-position: 0px 0px;
background-size: cover;
font-family: Ogg, sans-serif;
color: #000;
font-style: italic;
font-weight: 700;
text-align: center;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-black {
background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000));
background-image: linear-gradient(180deg, #000, #000);
font-family: Inconsolata, monospace;
font-style: normal;
font-weight: 400;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
Ask
Any ideas on how to approach the HTML and CSS to achieve the desired effect?
Related
On the website of Palantir.com, the color of the logo (originally black) is always the inverse of the color of the background behind it, even as the background scrolls/changes.
I'm creating a website via Wordpress and would like to have the same effect. I've tried using "mix-blend-mode: exclusion;", and while similar, doesn't give the true effect of a proper color inverse.
How can I do this in CSS? Thanks!
mix-blend-mode: difference with the font color set at white might help.
The difference with white on white is 0 - ie black.
The difference with white on blue is rgb(255, 255, 0) ie yellow.
body {
background-image: linear-gradient(white 0 30px, blue 30px 100%);
width: 100vw;
height: 100vh;
}
.text {
mix-blend-mode: difference;
color: white;
font-size: 60px;
}
<body>
<div class="text">SOME TEXT</div>
</body>
There can be problems with grays though - you can end up with gray on gray so it depends a bit on what your underlying image is actually like as to whether this will be satisfactory enough. (One trick is to apply a slight shadow to the text).
I've been trying to achieve a result in CSS where a title is displayed with a marker-like effect and a gradient text color.
This is the code I made up for the two effects:
/* GRADIENT TEXT */
h1 {
background: -webkit-linear-gradient(#229, #aaf);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* MARKER EFFECT */
em {
background: gray;
}
If I try to combine the two, the marker effect just overcomes the gradient text.
This is probably caused by the fact that both define a background, but I don't know how to solve it.
Thanks
One thing you can do is create a child element inside of em and apply the gradient there.
<h1>
<em>
<span>Testing</span>
</em>
</h1>
h1 span {
background: -webkit-linear-gradient(#229, #aaf);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* MARKER EFFECT */
em {
background: gray;
}
<h1>
<em>
<span>Testing</span>
</em>
</h1>
So this is my code:
font-size: 44px;
font-weight: 500;
background: linear-gradient(to-right, #494964, #6f6f89);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
I wanted to use the background clip property to clip the background to the text. Problem is visual studio is not recognizing the text property. What can I do to fix this?
You need to make sure you are setting the background-clip property on the parent text element i.e. <p> tag then you can apply the background color as a class. Please see below for a working example.
Please note your linear gradient declaration should also be written like below without the hyphen in to-right:
background: linear-gradient(to right, #494964, #6f6f89);
.container p {
background-clip: text;
-webkit-background-clip: text;
color: rgba(0, 0, 0, 0.2);
font: 900 1.2em sans-serif;
}
.background-color {
background: linear-gradient(60deg, blue, yellow, red, yellow, red);
}
<div class="container">
<p class="background-color">
The background is clipped to the foreground text.
</p>
</div>
This could also have to do with the fact that background-clip: text is an experimental feature, according to MDN docs
I'm attempting to use repeating-linear-gradient to zebra-stripe a code block. To that end, I specified an explicit line-height in the code block and alternated the color at intervals of that value.
It works great for a few lines, but the text and stripes eventually stop lining up. Does anyone know why this is and whether it can be fixed?
pre {
font-family: monospace;
font-size: 12px;
line-height: 1.4em;
background: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 1.4em,
#ddd 1.4em,
#ddd 2.8em);
}
<pre>Here
I
will
write
many
lines
of
text
and
the
spacing
starts
out
quite
well
but
eventually
the
lines
and
stripes
get
messed
up
and
this
makes
me
sad.</pre>
From w3.org:
On a block container element whose content is composed of inline-level
elements, 'line-height' specifies the minimal height of line boxes
within the element.
The keyword here being "minimal". If the font-size is large enough it will increase the spacing of your lines to more than your defined line-height.
To illustrate, here is your snippet with a smaller font-size:
pre {
font-family: monospace;
font-size: 10px;
line-height: 1.4em;
background: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 1.4em,
#ddd 1.4em,
#ddd 2.8em);
}
<pre>Here
I
will
write
many
lines
of
text
and
the
spacing
starts
out
quite
well
and
the
lines
and
stripes
don't
ever
get
messed
up
and
this
makes
me
happy. :-)</pre>
Or here with a larger line-height:
pre {
font-family: monospace;
font-size: 12px;
line-height: 2em;
background: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 2em,
#ddd 2em,
#ddd 4em);
}
<pre>Here
I
will
write
many
lines
of
text
and
the
spacing
starts
out
quite
well
and
the
lines
and
stripes
don't
ever
get
messed
up
and
this
makes
me
happy. :-)</pre>
I have a text heading which is white in color. I want to put an image instead of white color to the text. The Text is big enough to show the image which will be filled in.
This is what I basically want..
There's completely different background image behind the text and I want to fill in another image on the text.
You need background-clip to mask up the text. Here's the solution:
<h1>Shashank Jaiswal</h1>
h1 {
font-family: Arial;
font-size: 5em;
text-align: center;
background-image: url(http://tn.clashot.com/thumbs/3391302/58941884/thumb_w800.jpg);
-webkit-background-clip: text;
background-clip: text;
color: rgba(0,0,0,0);
}
DEMO : http://jsfiddle.net/gnoyubwc/
You can use photoshop for that and create a clipping mask. You'll get exactly what you wanted!