I am currently adding an svg image to the :after element of the underline selector.
I have it working but it only looks best when the underlined text is a few words long, is there a smarter way to do this so it looks the same when one word or multiple words are underlined?
Thanks, here is the codepen of what I currently have and you can see the difference https://codepen.io/joeincite/pen/rNJOOjE
u,
span[style*="text-decoration: underline;"] {
width: fit-content;
text-decoration: none !important;
position: relative;
}
u:after,
span[style*="text-decoration: underline;"]:after {
content: "";
position: absolute;
width: 100%;
height: 2.5em;
left: 0;
width: 100%;
z-index: 10;
background-image: url('https://239547.fs1.hubspotusercontent-na1.net/hubfs/239547/Agency%20Webinar%20Web%20Best%20Practice/underline-black.svg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
h1 {
font-size: 45px;
}
<section>
<h1>This is a title with <u>some underlined text</u></h1>
<h2>This is some more <u>text</u></h2>
</section>
Related
Is it possible to use a pseudo-element as a background for an HTML text element (h1)?
I know that the simple way of using an image as a text background is using the background-clip: text; property directly, but in my case, I need to apply some additional css properties to the background image (rotation and maybe some filter properties as well), and because of this, I cannot apply those css properties directly, as they will be applied to the text element as well.
I think that :after pseudo element can do this, but I don't have any success.
Let's say that this is my h1 wrapped in a div:
<div class="wrapper">
<h1>My title that should have an image background</h1>
</div>
And this is the css I've tried:
.wrapper {
width: 100vw;
height: 400px;
}
.wrapper h1 {
position: relative;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.wrapper h1:after {
content: '';
position: absolute;
background-image: url(https://picsum.photos/200);
background-position: 50% 50%;
background-repeat: no-repeat;
transform: rotate(-3deg); /* the image is required to be rotated */
background-size: cover;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
https://jsfiddle.net/8ztcuv12/
The expected resultL
Is there a better way of achieving this? Any solutions are welcome.
You can use backround-image on wrapper so that if you want to rotate heading.
It don't rotate image too.
.wrapper {
width: 100vw;
height: 100px;
position: relative;
}
.wrapper h1 {
transform: rotate(-3deg);
}
.wrapper:after {
content: '';
position: absolute;
background-image: url(https://picsum.photos/200);
background-position: 50% 50%;
background-repeat: no-repeat;
transform: rotate(-3deg);
/* the image is required to be rotated */
background-size: cover;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
<div class="wrapper">
<h1>My title that should have an image background</h1>
</div>
So when I tried to put a white color on some text it did not change in the browser. When I user inspect on google chrome it shows that the text is "color: rgb(34, 34, 34);" When in the code I put "color:white;"
HTML:
<div id="features">
<div id="features-filter"></div>
<div id="features-text">
<h1>Features</h1>
</div>
</div>
CSS:
#features {
background: url("img/server-room.jpg") no-repeat center;
background-size: cover;
position: relative;
height: 70%;
z-index: 99;
}
#features-filter {
position: absolute;
background: url("img/dot.png") repeat;
z-index: 999;
width: 100%;
height: 100%;
}
#features-text {
position: absolute;
z-index: 999;
}
#features-text h1 {
color: white;
}
It could be a caching issue.
Alternatively, there might be a rule within your CSS (or another style sheet) that defines the style of the element after you change the color to white.
When you inspect it, where is the "color: rgb(34, 34, 34);" style defined from? Is it defined from the #features-text h1 that you've written, or is it being defined by another rule, elsewhere in the stylesheet (or another stylesheet?) If it's being defined elsewhere - find out where and make sure this rule isn't overwriting the style you've defined.
Or, if it's being applied by a style sheet that you can't access/edit and you need to define it in your style sheet specifically, try using:
#features-text h1 {
color: white !important;
}
Well here it works try to set it important maybe something else in your code overwrites it
body{background: gray;}
#features {
background: url("img/server-room.jpg") no-repeat center;
background-size: cover;
position: relative;
height: 70%;
z-index: 99;
}
#features-filter {
position: absolute;
background: url("img/dot.png") repeat;
z-index: 999;
width: 100%;
height: 100%;
}
#features-text {
position: absolute;
z-index: 999;
}
#features-text h1 {
color: white !important;
}
<div id="features">
<div id="features-filter"></div>
<div id="features-text">
<h1>Features</h1>
</div>
</div>
Something like this should do it. Obviously I changed the color to blue.
<!DOCTYPE html>
<html>
<head>
<div id="features">
<div id="features-filter"></div>
<div id="features-text">
<h1>Features</h1>
</div>
</div>
<style>
#features {
background: url("img/server-room.jpg") no-repeat center;
background-size: cover;
position: relative;
height: 70%;
z-index: 99;
}
#features-filter {
position: absolute;
background: url("img/dot.png") repeat;
z-index: 999;
width: 100%;
height: 100%;
}
#features-text {
position: absolute;
z-index: 999;
}
#features-text h1 {
color: blue;
}</style>
</html>
Its always better to use Hex Code instead of color name. This way, you make sure every browser supports your code:
#features-text h1 {
color: #FFFFFF !important;
}
Cheers
Wrap your css code in style tags, then it'll work.
<style>
#features {
background: url("img/server-room.jpg") no-repeat center;
background-size: cover;
position: relative;
height: 70%;
z-index: 99;
}
#features-filter {
position: absolute;
background: url("img/dot.png") repeat;
z-index: 999;
width: 100%;
height: 100%;
}
#features-text {
position: absolute;
z-index: 999;
}
#features-text h1 {
color: white;
}
</style>
You can change text color by using this css code
h1{
color:#FFF;
}
try hex code and add !important:
h1{
color:#FFFFFF !important;
}
the hex code have a RGB value. it's like RR-GG-BB.
On normal number, it's count like this: 0123456789
You can count hex number like this: 0123456789ABCDEF
I'm implementing an on-boarding similar to Medium's which has text in the center of the box over an black-overlay with the background-image behind it.
However, I'm struggling with making the text INSIDE the div with the background-image NOT having opacity effect.
<div class="blackBackground">
<div class="topicImage opacityFilter" style="background-image: url(https://images.unsplash.com/photo-1444401045234-4a2ab1f645c0?ixlib=rb-0.3.5&q=80&fm=jp&crop=entropy&s=4372cb6539c799269e343dd9456b7eb3);">
<p class="text-inside-image">Fashion</p>
</div>
</div>
Here's my CSS:
.blackBackground {
background-color: black;
z-index: -1;
}
.opacityFilter {
opacity: 0.8;
position: relative;
}
.margin-bottom-negsix {
margin-bottom: -6px !important;
}
.topicImage {
padding-bottom: 75%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
margin: 0 auto;
position: relative !important;
height:150px;
background-color: rgba(0, 0, 0, 0.8) !important;
}
.text-inside-image {
position: absolute;
top: 20%;
left: 35%;
color: white;
font-size: 24px;
font-weight: 500;
z-index: 1;
}
I've tried several solutions such as CSS - Opaque text on low opacity div?
and How to keep text opacity 100 when its parent container is having opacity of 50
and a couple more, but no luck.
My progress with my JSFiddle is here: https://jsfiddle.net/RohitTigga/akz5zng7/1/
Why is this occurring and how to fix it?
Hi change your HTML like this
HTML
<div class="my-container">
<h1 class="text-inside-image">Fashion</h1>
<img src="https://images.unsplash.com/photo-1444401045234-4a2ab1f645c0?ixlib=rb-0.3.5&q=80&fm=jp&crop=entropy&s=4372cb6539c799269e343dd9456b7eb3">
</div>
CSS
.my-container {
position: relative;
background: #5C97FF;
overflow: hidden;
}
.my-container h1 {
padding: 50px;
text-align: center;
z-index: 2;
position: relative;
color: #fff;
}
.my-container img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
z-index: 1;
opacity: 0.6;
}
for reference https://plnkr.co/edit/YugyLd8H5mQExzF61rA9?p=preview
You have set a translucent background colour on the element and then covered it up with a background image.
If you want the background image to be translucent, use an image that is intrinsically translucent. The PNG image format supports this.
I would like to show the image with a non glassy display. Similar to the following one,
I am using the image as it is. I would like to show that with matte finish.
normal image:
Matte finish:
I am not able find it online. May be I am not using the right search keywords. Could anyone help me with this?
Inside a container I did put an image with reduced contrast / brightness / saturation plus a little bit of blur (all these four effects made by CSS filter). The image could've be placed as the container background but I wanted to apply these filters so it went separated.
After it, there's a colored layer with transparency covering the whole area. The letter represents the page's content that can be anything.
UPDATE: multiple filters must be all in a row, like it is on this latest update:
body {
width: 100%;
height: 100vh;
margin: 0px;
font-family: Georgia, serif;
}
#container {
width: 100%;
height: 100%;
position: relative;
background-color: navy;
overflow: hidden;
}
#thepic {
width: 100vw;
height: 100vh;
object-fit: cover;
-webkit-filter: brightness(90%) contrast(90%) blur(2px) grayscale(10%);
filter: brightness(90%) contrast(90%) blur(2px) grayscale(10%);
}
#color_layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: navy;
opacity: 0.3;
}
#content {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
text-align: center;
}
h1 {
display: inline-block;
color: white;
text-shadow: 1px 2px 2px #000;
font-size: 4em;
font-weight: 100;
letter-spacing: 2px;
text-align: center;
vertical-align: middle;
}
#letter {
vertical-align: middle;
}
<div id=container>
<img id=thepic src="http://i.imgur.com/s9J4MnI.jpg">
<div id=color_layer></div>
<span id=content><img id=letter src="http://i.imgur.com/CB1vUqy.png" alt=img><h1> 書面</h1></span>
</div>
#freestock.tk - That's the idea I had in mind also.
Here's another way to do it with less markup:
img {
max-width: 100%;
height: auto;
}
.container {
position: relative;
z-index: -1;
}
.container:before {
content: "";
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
}
<div>
<h1>Original Image</h1>
<img src="http://i.imgur.com/WjbwTUH.jpg">
</div>
<div class="container" id="content">
<h1> With Transparent Overlay </h1>
<img src="http://i.imgur.com/WjbwTUH.jpg">
</div>
In this example, I put the image inside a container that is relatively positioned. The z-index is -1 so it will be behind the next layer.
Then I used a pseudo element that is absolutely positioned so it will stretch across the whole width of the container and cover the image. The positive z-index sets it on top of the first layer. Rather than setting an opacity, I used an rgba value for the background color. The first three numbers or the red, green, and blue values as usual, but the last number is a decimal between 0 and 1 that sets the opacity level. I made it a little darker than you probably want just so you can see the difference. You may also choose a different color to fit your image.
For reference: http://nicolasgallagher.com/css-background-image-hacks/
I have the following CSS rules applied to a DIV:
.icon {
position:relative;
display: inline-block;
width: 90px;
height: 94px;
background: url("test-icon-sprite.png") no-repeat scroll transparent;
background-position: 0 0;
overflow: hidden;
z-index: 1000;
}
.icon.plaque:after {
content: url("test-icon-plaque.png");
position:absolute;
width: 90px;
height: 94px;
z-index: 1
}
...
<div class="icon plaque"></div>
What happens is that the image in the pseudo element is positioned on top of the image in the other element. That's not what I want! Is there any way to fix this?
My goal is to create an icon with an optional backplate (plaque) using only one html element, is it doable?
Use multiple backgrounds.
.icon {
background-image: url(test-icon-sprite.png);
}
.icon.plaque {
background-image: url(test-icon-sprite.png), url(test-icon-plaque.png);
}