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>
Related
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?
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
So basically the other day, I was messing around with Xcode.
I saw an Apple video explaining about UI and some new blur effects in IOS 13 so I tested it out and really liked it.
So what I achieved was an image with a blur effect and some text on top, but the text had a different blur than the image, so it was somehow see-tough.
Here is the result:
So basically I would like to achieve this using HTML and CSS but it looks quite difficult.
Is there any possible way to do this?
Thanks in advance anyway.
Using CSS, you can either use opacity property or use rgba colour values.
like so:
<style>
div.background {
background: url(https://loremflickr.com/320/240) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
/* using the opacity property */
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
/* Green background with 70% opacity */
color: rgba(76, 175, 80, 0.7);
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
My computer isn't allowing me to see the image at the moment, but if you want to blur the background, you can use:
filter: blur(8px);
-webkit-filter: blur(8px);
etcetera, for each browser. Be sure to apply those styles to the image itself, and not the container.
You can check out the effect here: https://theexplorerblog.com/learning-base.php
Hope this helps.
This question already has answers here:
CSS to select/style first word
(14 answers)
Style the first word of a sentence with CSS [duplicate]
(1 answer)
Color the First word of Sentence CSS [duplicate]
(5 answers)
Closed 3 years ago.
This is probably a very basic, but I have the following header tag
<h2>This is a Title</h2>
Now what I want to do is just change the colour of the text and background of 'This' and leave 'is a title' alone and on the same line as 'This' to still be a header.
Pseudo-elements allow you to select the first letter or first line, but not the first word.
To target This you will need to add a real element (e.g. a <span>) around it.
If you can adjust the HTML:
<h2><span class="bg">This</span> is a Title</h2>
Then .bg {background-color:blue;}
You could also look at background-clip or mix-blend-mode if you know the length where letters have to be a different color, see this has infos before an answer, since i do not believe it really fits your needs.
DEMO or snippet below.
demo includs #supports to filter rules not supported by the browser
#supports ( background-clip: text) or ( -webkit-background-clip: text) {
h2[id] {
background: linear-gradient(to right, green 2em, black 2em, black 7.75em, purple 7.75em);
color: white
}
h2[id="bgimg"] {
display:table;/* so it shrinks on the text , only for the demo*/
background:url(http://lorempixel.com/90/100) no-repeat left, url(http://lorempixel.com/170/100) tomato no-repeat right
}
h2[id] {
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
}
#supports (mix-blend-mode:screen) {
h2[class] {
position: relative;
background: white;
color: black;
}
h2[class]::before {
background: linear-gradient(to right, green 2em, black 2em, black 7.75em, purple 7.75em);
mix-blend-mode: screen;
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
}
h2[id][class] {
color:white;
background: linear-gradient(to right, green 2em, black 2em, black 7.75em, purple 7.75em);
/*reset where it works*/
background-clip:none;
mix-blend-mode:normal;
}
<h2 id>This is a Title and background-clip</h2>
<h2 id="bgimg">This is a Title and background-clip</h2>
<h2 class>This is a Title and mix-blend-mode</h2>
<h2 class id>to show the gradient used</h2>
<hr>
<p> and if it does not work ? use #supports to filter the rules .</p>
<h2> Go to default styling when css rules are not supported </h2>
<h2> regular h2 without style to avoid funny result, sends you back to question :)</h2>
What it looks like if browser understands these rules :screenshot for Chrome
here is another demo https://codepen.io/gcyrillus/details/grOEGp just about black and white
I have a number of headings and in the background of each I want to show the same gradient color, but a different (non-repeating) background image. I want to avoid duplicating any CSS rules for the background gradient color or background image position, because they will be the same for each heading. In other words, the only thing I should need to specify for an individual heading is the path to the background image file.
Here's what I have at the moment:
<h1 class="banner bgImage img1">background image 1</h1>
<h1 class="banner bgImage img2">background image 2</h1>
<h1 class="banner bgImage img3">background image 3</h1>
<h1 class="banner">heading without background image</h1>
.banner {
/* For old browsers that don't support gradients */
background-color: #9FCC1D;
/* browser-specific prefixes omitted */
background-image: linear-gradient(#75A319, #9FCC1D);
padding: 7px 7px 7px 15px;
}
/* Specifies position of background image */
.bgImage {
background-position: 5px 50%, 0 0;
background-repeat: no-repeat;
padding-left: 30px;
}
.img1 {
background-image: url(img1.png"), linear-gradient(#75A319, #9FCC1D);
}
.img2 {
background-image: url(img2.png"), linear-gradient(#75A319, #9FCC1D);
}
.img3 {
background-image: url(img3.png"), linear-gradient(#75A319, #9FCC1D);
}
There are a couple of problems with this
I have to repeat the linear-gradient style in each .imgX rule
It doesn't render correctly in Chrome, which doesn't seem to support a comma-separated list of background-image and background-repeat properties. This is what gets displayed in Chrome
How can I fix the problem with the way the background is rendered in Chrome while minimising duplication of CSS rules?
Use the :before pseudo-class for your background icons.
.img1:before {
content: '';
float: left;
position: relative;
background: transparent url('img1.png') left top no-repeat;
width: 16px; /* change to actual width of img */
height: 16px; /* change to actual height of img */
}
Or, since you're trying to relieve the amount of CSS, you can specify a class for the gradient and append that in your HTML.
Don, you have two classes which this background gradient can be applied to, bgImage and banner. Simply apply your gradient on to one of those classes and go from there. Also append repeat-x right after your image url to ensure it will repeat across.