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>Is there a way to style items 1 through 10 in CSS without using nth-child selectors individually? Instead of doing: &.nth-child(1) { //style } &.nth-child(2) { //style } &.nth-child(3) { //style } I'm looking for a range selector in C ...
I am currently utilizing PHP Simple HTML DOM to extract elements from the source code of a website (which is not my own). However, when attempting to locate a ul class named "board List", it is not being found. It seems like there may be an issue with spac ...
I'm on a quest to discover the equivalent of session_start() and $_SESSION in Node.js/Express so I can store the current user's id in the session. Most tutorials and videos recommend using express-session, but I've come across a warning: ...
After retrieving multiple encrypted data using ajax queries and performing necessary manipulations to turn them into a valid video, I find myself at a standstill. The binary of the video is now stored in memory, but I am unsure how to display it. To confi ...
Currently, I am in the process of developing an audio player that includes essential functions such as backward, play, and forward buttons. Strangely enough, the backward function operates perfectly fine, but the forward button is not functioning properly ...
I have been attempting to retrieve the username column information from SQL using ajax, but only the username of the first ID is being returned. However, I need all usernames to be fetched. Below is the model: class users(db.Model): id=db.Column(db.I ...
I need to adjust the layout of my website so that the sidebar disappears when the window is resized below a certain width, and then reappears when the window is expanded. Here is the HTML code: <style type="text/css"> #sidebar{ width:290 ...
I've encountered the following code snippet: HTML: <div [class]="new_workflow_row_class" id="new_workflow_row"> <div class="col-sm-6"> <label class="checkmark-container" i18n>New Workflow <input type="che ...
Is there a way to determine the screen size and then add 253px to it? For example, in CSS: .element { width: calc(100% + 253px); } What would be the best approach to achieve this? ...
Here is the html structure I am working with: <section> <div class="v-middle"> <div class="row"> <h5 class="heading">Heading goes here</h5> </div> </div> </section> ...
Is there a way to search through a JavaScript array to find all names that start with the letter A? If so, how can I display all of the information associated with those names? Name":"Albert","age":"14" Name":"Alison","age":"14" Here is my JSON array: ...
Below is the code snippet that illustrates the objective I am attempting to achieve <div> <div style="float:left; width:220px; height:300px; border: 1px solid #aaa"> Left div <br>float:left <br> fixed width 220px </div> ...
I have been working on improving my "contenthandler" function. It currently changes different articles when I click different buttons, which I am satisfied with. However, I believe there may be a better approach to this and would appreciate any advice on h ...
After coming across this insightful question and answer about the structure of paginated data in a redux store, I found myself pondering how to implement similar principles using ngrx/store in an angular 2 application. { entities: { users: { 1 ...
My desire is to indicate this movement by triggering a mouse click or drag to the desired location. let myDrawing = Raphael(10,10,400,400); let myCircle = myDrawing.circle(200,200,15); myCircle.attr({fill:'blue', stroke:'red'}); let my ...
My project utilizes Vue.js and Nuxt.js, and within the settings page, users can modify their personal settings. This single page allows users to navigate between tabs. <template> <div class="account-wrapper"> // Code content he ...
Suppose I have a class with a function inside: var myClass = class MyClass() { constructor() {} myFunction(myObj) { function innerFunction() { return JSON.stringify(myObj, null, 2); } return myObj; } } In this scenario, callin ...
Currently, I am in the process of writing a C++ program that utilizes SQLite. The main aim is to enable users to specify their preferred hotel room options. Subsequently, the program compares these user selections with the information stored in a database. ...
Currently, I am utilizing Node.js to develop a web application. My aim is to trigger events at specific times. While I am aware of using setTimeout and computing the time difference from the present moment, this method does not account for various timezone ...
I have a tower image' - but i don't know how to replicate this for3dview using thethree.js` any assistance would be greatly appreciated! Here is the image : This is my attempt : $(function () { "use strict"; var container, scene, cam ...