I am seeking to accomplish a design similar to this using CSS in order to create a title of
<h1>DISCOVER <span>WEB 3</span> DIMENSIONS</h1>How do you recommend achieving this?
Thank you,
I have searched on Google and asked friends for help, but have not found success. Perhaps ChatGPT can provide some insight...
Give it a shot
Css:
/* Centering the container */
.container {
position: absolute;
transform: translate(-50%, -50%);
top: 35%;
left: 35%;
color: Black;
}
/* Styling for text and transition duration of 2s */
.text {
position: absolute;
text-transform: uppercase;
font-size: 7rem;
}
/* Creating shapes with clip-path property */
.text1 {
clip-path: inset(56px 0 0 0px);
}
.text2 {
clip-path: inset(0px 0 73px 0px);
}
/* Hover effect for box 1 position */
.box .text1 {
transform: translateX(3px);
}
/* Hover effect for box 2 position */
.box .text2 {
transform: translateX(10px);
}
HTML:
<!-- Create container -->
<div class="container">
<!-- create div with class box -->
<div class="box">
<!-- Splitting text into two p tags -->
<p class="text text1">Web3</p>
<p class="text text2">Web3</p>
</div>
</div>
If you're struggling to achieve the effect you want with plain CSS, one alternative could be to convert your text into an image, split it in half horizontally, and then insert these two image halves into a div using animation. In my experience, there doesn't seem to be a simple CSS solution for what you're trying to accomplish.
Another potential workaround could involve creating a CSS animation that generates each letter individually, adjusting the animation to move letters below a certain Y axis. However, this approach might require a significant amount of effort compared to the image-splitting method.
Is there a way to instantly change the color of my span element when it's clicked by the user, rather than waiting for the mouse button to be released? This is the CSS code I'm using for the class: span.active{ color:#bdbcae; } I've tri ...
Here is a code snippet to consider: function conceal(frameElem) { var frameSet = frameElem.frameSet; //<-- this doesn't seem to be working $(frameSet).attr('cols', '0,*'); } //conceal the parent frame conceal(window.pa ...
While reviewing CSS code created by another department, I noticed an interesting media descriptor: @media (max-width:-1) { ...standard css stuff here } The value of max-width cannot be less than 0, so what could be the purpose of this? Perhaps it was ...
To address the problem of the 1px black border at the bottom of the header being cut off, try zooming into the page and scrolling right. How can this issue be resolved? ...
Hey everyone! I'm currently working on implementing a mouse follow effect, but I'm facing an issue where the circle I've created moves along with the page when scrolling, instead of staying fixed to the mouse. Any suggestions or tips would b ...
I've been working on tweaking a code snippet I came across, but I'm struggling to get it to function the way I desire. Here is the current Javascript code: function JsonUtil() { /** * Given an object, * return its type as a string. ...
Currently, I am using React and Tailwind CSS and facing an issue with the transition property. My goal is to have a div grow in width and height from the center until it covers the entire viewport when a specific state variable becomes true. The content in ...
I am currently facing an issue with the dropdown list in my bootstrap menu. <li class="dropdown"> <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Chose option<span class="c ...
My form utilizes the keyup function to calculate the total value of 3 input fields by multiplying them and displaying the result. Below is a fiddle showcasing this functionality: $(document).ready(function () { $(".txtMult1 input").keyup(multInp ...
My issue is that when I resize the window, the element stays in its position until I start dragging it. Once I drag it and then resize the window again, it doesn't stay within its container. To better illustrate my problem, you can view a demo on Fid ...
I am currently making changes to content within a <div> element. I would like to determine if the data in the <div> has been modified and, if so, save it in a session to persist on refresh. How can I verify if the data has been edited and then ...
I'm struggling to line up all the menu items at the bottom - products, activity feed, and learn store should be on the same row, with test below products. Currently, products is being pushed up and text is aligning to the right of it. Despite trying ...
In the CSS code below, I currently alternate background colors for table lines by default and can specify individual rows to not alternate. Is there a way to implement this at the table level instead of per row? Essentially, I want to define something at ...
Here is the HTML code for a table: <table class='census'> <tr> <th colspan="2">My Title</th> </tr> <tr> <td colspan="2" class='chart'><SOME PIE CHART, GENERATED W ...
I am fairly new to internet languages and I am trying to understand how to validate user input before calling a method, but I have not been successful so far. <html> <head> </head> <body> <?php $gr ...
As a newcomer to Angular, I am trying to figure out how to properly save a new user with an avatar. Can someone help me understand how to pass the Blob value of the avatar to my user Model for successful saving? Below is the code snippet I am working with ...
Having some trouble extracting a value from an href link to use in my database operations. Unfortunately, I couldn't retrieve the desired value. Displayed below is the code for a button: <a class="btn btn-info" href="scheduleSetTime.php?id=&apo ...
I'm in the process of setting up a subscription newsletter page, and everything seems to be working correctly except for the part where I need users to enter their email address twice. The second email field is meant for confirmation purposes, but I&a ...
My goal was to indent a number, but the HTML generated from my CMS is making it difficult to target the number and apply a specific style. <div class="content"> <b>01. Header</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...
I am struggling with Bootstrap 4.1 as I try to align content to the right side. Specifically, I have a Navigation Bar that triggers a Modal Dialog containing Tabs. The dropdown menu on the far right of the Tab is what I want to justify to the right. Here a ...