I’ve been learning the basics of front-end web dev and started doing "The Odin Project"
I saw an example of a website that I saw on Git-Hub that used HTML and CSS only.
I tried taking some inspiration and making my own version.
I added some text and wanted to see if it’s possible to add a gradient to text using CSS.
A lot of examples that use CSS use the same type of code which is using
-webkit-background-clip: text background-clip: text; color: transparent;
It works fine until I imported this custom text: https://www.dafont.com/the-sunset.font
I made a <h2> tag and it seems like it cut the edge off the right side.
Image Without The Gradient Code
As you can see in the image with the code, the last character seems to be cut off
It works better with other fonts but I want to use that font.
Is there some other way I can make gradient text without issues like that?
Even if it’s in Javascript, which I’m still yet to learn anything about or maybe something like
sass? I don’t mind waiting until I eventually have to learn it, I’ve been told coding is a life long process.
My other question will be about the code itself other than the gradient text, is what I’m writing in good practice? Better way to do something than I already am doing? which there probably is since I’ve been learning for only a couple of weeks.
I appreciate any answers, thank you!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="mine.css">
</head>
<body>
<div class="container">
<div class="block1">
<h2 class="block2">SunSet</h2>
</div>
<div class="block3"></div>
<div class="block4"></div>
</div>
</body>
</html>
CSS
@import url("myfont.css");
body {
margin: 0;
padding: 0;
}
.container .block1 {
background: url(../css/train.png) no-repeat center center fixed;
background-size: cover;
height: 1000px;
position: relative;
}
.container .block2 {
padding: 0px;
top: 20px;
left: 50px;
position: absolute;
font-family: Bingo;
font-size: 150px;
background: linear-gradient(45deg, #ff7e5f, #feb47b, #ff7e5f);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
Font CSS
@font-face {
font-family:'Bingo'; /* Choose a name for your font */
src: url('../css/Bont/The-Sunset.ttf') format('truetype'); /* Adjust the path and format based on your font file */
/* Add additional src entries for other font formats if needed (e.g., woff, woff2) */
}
Ignore the font names like "Bingo" and folder name "Bont" I just name stuff really weird.
I’ve tried removing everything besides that one div I’m calling in css to place the image because maybe there was another div cutting the end of the text but it doesn’t seem to be the case.
Changing fonts which seems to fox it, but I’m not sure if there is a problem with how I think but I refuse to use another font just to fix the problem because I want to use that font I should be able to use that font…right?
2
Answers
I appreciate the answer given by @herrstrietzel, I thought I checked all the of threads on this issue but I was wrong, I will paste below the solution that I have been using thus far and it has been working well. It's all to do with the way the text is presented.
Solution that I use
If you select the text you see it’s cropped
based on the actual glyph/character bounding boxes.
The lowercase
tis exceeding the bounding box (defined by its metrics: left and right side bearings).So you can add a
width:100%property to extend the masks to the full width.