Hey Coder, Welcome To Our Codewithrandom Blog, In Today's Blog, We Are Going To See How To Create An Gold Text Effect Using HTML and CSS. A Gold Text is nothing that actually displays the text in golden color with a golden background using CSS Gradient Properties.
So, Let's Begin Our Gold Text Effect Project By Adding The Source Codes. For That, First, We Are Using The Html Code.
Gold Text Html Code:-
FF<div>
<h1 data-heading="Winner" contenteditable>Winner</h1>
</div>
Here We first create a div class with header tag H1 inside to make a larger font. Then we gave the data heading to the winner, The winner is actually a class name of the header So it will be used to make the gold effect on the particular text.
Now That's off for HTML Code. So we begin adding CSS code for the golden effect on the required text.
Gold Text CSS Code:-
html {
height: 100%;
}
body {
background: radial-gradient(ellipse at center, #443501 0%,#000000 100%);
height: 100%;
}
div {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
background: linear-gradient(to bottom, #cfc09f 22%,#634f2c 24%, #cfc09f 26%, #cfc09f 27%,#ffecb3 40%,#3a2c0f 78%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #fff;
font-family: 'Playfair Display', serif;
position: relative;
text-transform: uppercase;
font-size: 18vw;
margin: 0;
font-weight: 400;
}
h1:after {
background: none;
content: attr(data-heading);
left: 0;
top: 0;
z-index: -1;
position: absolute;
text-shadow:
-1px 0 1px #c6bb9f,
0 1px 1px #c6bb9f,
5px 5px 10px rgba(0, 0, 0, 0.4),
-5px -5px 10px rgba(0, 0, 0, 0.4);
}
Here We have added our CSS code for the golden effect. First, we have added the total web size to 100% for every content that meets this size and we fixed out the background color using the CSS gradient property. and These come under Html and Body section.
Second, we just fixed the contents to be centered using flex-box properties and the height would be fixed to the same as the height = 100%, and the width is even 100%. These are dining inside of the div class which contains the text inside.
The Particular code for the above explanation is given.
html {
height: 100%;
}
body {
background: radial-gradient(ellipse at center, #443501 0%,#000000 100%);
height: 100%;
}
div {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
Now We started adding the properties for the text to make it a golden effect. For that First, we fixed out the text background color using gradient property, and the color of the text is set out to be white but also the filling color is set to transparent.
and lastly, we just add the repeated properties like font family, size, and positions, and the position is set to relative other content with respective backgrounds.
h1 {
background: linear-gradient(to bottom, #cfc09f 22%,#634f2c 24%, #cfc09f 26%, #cfc09f 27%,#ffecb3 40%,#3a2c0f 78%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #fff;
font-family: 'Playfair Display', serif;
position: relative;
text-transform: uppercase;
font-size: 18vw;
margin: 0;
font-weight: 400;
}
The Last One we are doing is setting the background to none after the h1 hover. and these were done by (h1: after) which means after dragging the mouse point to the text the properties inside will be worked.
The properties inside of (h1:after) are the background which is set to none and calling the data-heading for the content and the left and right are set to 0 then we are adding the text shadow using gradient properties.
h1:after {
background: none;
content: attr(data-heading);
left: 0;
top: 0;
z-index: -1;
position: absolute;
text-shadow:
-1px 0 1px #c6bb9f,
0 1px 1px #c6bb9f,
5px 5px 10px rgba(0, 0, 0, 0.4),
-5px -5px 10px rgba(0, 0, 0, 0.4);
}
Here we have completed our CSS code and also the project is completed which means we have successfully added the Gold text effect to the particular text.
But additionally, we are adding one property which is editable text when we click on that text the text will be editable and the effects won't be changed in even new text also.
Optional Code! No need to Use
So for that, we are using JavaScript code which is given below.
JavaScript Code For Edit Gold Text:-
var h1 = document.querySelector("h1");
h1.addEventListener("input", function() {
this.setAttribute("data-heading", this.innerText);
});
Here We first call out the H1 content using Js Query Selector property and set the h1 using the event listener property to make it editable.
The editable is fully done by displaying it so for that we fix the data-heading using the set Attribute property to call the content for making it editable and for displaying it, the line this. inner Text was used.
Now We have completed the Java Script Code. and Hence We came to the end of this project but before that, we make sure to preview our project in the given output section.
Now We have Successfully created our Gold Text Effect Using HTML and CSS. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.
If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page
REFER CODE - Mandy Michael
WRITTEN BY - Ragunathan S
Top comments (1)
This is such an insightful post! I really appreciate how you broke down the topic in a way that's easy to understand. Looking forward to implementing some of these tips in my daily routine!
IB schools in Hyderabad