Hey there! I'm seeking help in figuring out how the text on this site is designed. You can take a look at it here.
Essentially, what I'm aiming for is to have the text color match the gradient of the background color from the previous div, while being displayed on a white background.
Any assistance would be greatly appreciated! Thank you!!
This solution may not be perfect as it relies heavily on fixed positions and background sizes, but it does serve as a quick workaround.
The text within each span element seems to be cut out from the black rectangles around them.
In reality, every span text has its unique background that aligns precisely with the gradient background of the underlying h1 element.
h1 {
position: relative;
display: block;
width: 200px;
height: 200px;
background-image: linear-gradient(
red,orange,yellow,green,blue,indigo,violet
);
}
h1 span {
display: block;
position: relative;
top: 10px;
width: 180px;
height: 50px;
margin: 20px 10px;
line-height: 50px;
font-size: 40px;
text-align: center;
background-color: rgb(0, 0, 0);
}
h1 span::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-image: linear-gradient(
red,orange,yellow,green,blue,indigo,violet
);
background-size: 200px 200px;
background-clip: text;
-webkit-text-fill-color: transparent;
}
h1 span:nth-of-type(1)::after {
content: 'Example';
background-position: -20px -20px;
}
h1 span:nth-of-type(2)::after {
content: 'Text';
background-position: -20px -80px;
}<h1>
<span>Example</span>
<span>Text</span>
</h1>TO SUM IT UP: Is there a way in Javascript to activate an update on a Gravity Form that triggers the execution of conditional logic? ORIGINAL QUESTION: I'm using Gravity Forms and I have set up an "on change" event $('#gform_1').find(&apos ...
Below is the implementation of a custom pipe designed to sort records: import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'sortpipe' }) export class SortPipe implements PipeTransform { transfor ...
As a beginner in react, I'm facing an issue with preventing components from re-rendering when navigating to a different page. Specifically, I want to display only text on my Signup and Login pages, but the Navbar keeps re-rendering every time I switch ...
Having an issue with adding a <p> tag before each jQuery accordion on my MVC page. No matter what I try, the jQuery styling keeps interfering with the classes and styles of my <p> tag. Is there a way to make it look like the other non-jQuery & ...
Recently, I've been utilizing this logger in node.js: // Found on stackoverflow: https://stackoverflow.com/questions/9781218/how-to-change-node-jss-console-font-color function logC(text) { console.log('\x1b[36m%s\x1b[0m', text); ...
I seem to be making a simple mistake while following a tutorial. Even though I believe I have followed all the steps correctly, when I submit the login form, I get redirected to the "failureRedirect" page. When I checked the source code in the passport mod ...
I am presenting the following HTML code excerpt... <!DOCTYPE html> <html lang="en-US" ng-app> <head> <title>priklad00007</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angula ...
Using jQuery, I have created a form where the entered text is appended to certain elements. This functionality works correctly. Additionally, I have included a remove link with each added element. When someone clicks on the remove button, it should remove ...
I'm currently in the process of developing a search platform. I have three static divs on the search results page that display certain content, all containing similar code. For example: <div id="result" class="card"> <img src="hello.png" ...
Is there a way to access the basePath in Next.js 13 when using AppRouter? To retrieve it, we can simply get router.basePath through the useRouter hook of PageRouter by importing `import { useRouter } from 'next/router' I am currently unable to ...
Has anyone successfully achieved time traveling capabilities with Redux core? It seems that this feature is limited to the devtools and not advised for production use. I had planned on implementing Redux in a multiplayer game to assist with managing clie ...
I've encountered an issue with sorting JSON data. Here is the JSON data I'm working with: [ { nom: "TERRES LATINES", numero: "0473343687", image: "http://s604712774.onlinehome.fr/bonapp/api/wp-content/uploads/2016/12 ...
Hey there! I've been working on uploading files using Ajax and PHP, following a tutorial. Here's the code I have so far: upload.js: var handleUpload = function (event){ event.preventDefault(); event.stopPropagation(); var fileInput= document.ge ...
Is it possible to transfer a JS array created using the .push function to another PHP file? I have included the code snippets for the two files involved, game.js and gallery.php. In Game.js: imgarray.push({"img_name": img_name,"x": x_value,"y": y_value,"w ...
Do you ever wonder how certain websites are able to trigger pop-ups without being blocked by Chrome's pop-up blocker? I had always thought that pop-up blockers only allowed window.open if it was initiated by a user action. However, the situation seem ...
Curious if anyone has come across any evidence, proof, or firsthand accounts of utilizing the traditional http/https JavaScript <script> hack: <script src="//someserver.com/js/script.js"></script> Have you faced any problems with this m ...
Attempting to create an ajax call and accessing a field from the table on the server yields the following: <PushProperty><Status ID = "1"> Success </Status><ResponseID> b3633c9eeb13498f </ResponseID><ID> 9098 & ...
I am currently developing a project that allows users to input SQL queries with parameters. These queries will be executed at specified intervals determined by the user (e.g., every 2 hours for 6 months), and the results will be sent to their email address ...
Our app is developed using ReactJS on Rails API, with a Google map integrated. However, when visiting this link and clicking "Map View", some grey space appears under the Google Map. An example image can be found here: example We are having trouble findi ...
$.getJSON("data.php", function(data) { ... this callback is for handling successful retrieval of data }); What is the best way to manage errors in relation to the ongoing $.getJSON request? ...