Is there a way to apply a webkit transformation to a div without affecting the text inside? I need help with achieving this. Below is my current code:
.main_div {
width:200px;
height:100px;
background:red;
margin-left:55px;
margin-top: 25px;
position:relative;
-webkit-transform: skew(-30deg);
}
<div class="main_div">
Dummy Text Here
<input type="field" value="" name="" ></input>
</div>
Easily enhance your HTML structure by adding an additional div and applying transform effects as shown below.
HTML
<div class="main_div">
<div class="normal">
<label>Placeholder Text Here</label>
<input type="text" value="" name="" ></input>
</div>
</div>
CSS
.main_div {
width:200px;
height:100px;
background:red;
margin-left:55px;
margin-top:25px;
position:relative;
-webkit-transform: skew(-30deg);
}
.normal {
-webkit-transform: skew(30deg);
}
CSS
.main_div {
width:200px;
height:100px;
background:red;
margin-left:55px;
margin-top:25px;
position:relative;
-webkit-transform: skew(-30deg);
}
.main_div > * {
-webkit-transform: skew(30deg);
}
HTML
<div class="main_div">
<div>Placeholder Text Here</div>
<input type="text" value="" name="" ></input>
</div>
To achieve the desired outcome, you should assign distinct styles to both your text and input elements. Additionally, make sure to enclose your text within <p> tags:
<div class="main_div">
<p>Sample Text Here</p>
<input type="text" value="" name="" ></input>
</div>
.main_div {
width:200px;
height:100px;
background:red;
margin-left:55px;
margin-top: 25px;
position:relative;
-webkit-transform: skew(-30deg);
}
p {
width: 100px;
color: black;
font-size: 18px;
}
input{
width: 120px;
margin: 0 auto;
display: block
}
As a beginner in Python, Selenium, and coding in general, I'm not sure if my question even makes sense. My current project involves automating the task of saving edX course webpages as HTML. I am using the latest iPython and Webdriver for this purpos ...
I'm working on creating a unique pop-up window that appears when a customer adds a product to their cart. The design features red and green background divs with a darker overlay (#overlay-daddy) and a white child div (#overlay). My issue arises from ...
I am currently developing a program that aims to create 3D parametric shapes using webgl. The current code I have works successfully for rendering a sphere, but when I try switching the equations for a torus, only the upper half of the torus is being displ ...
Is there a way to increase the padding in a Colorbox modal window? I want some extra space between the edges of the modal window and the actual content. I experimented with the innerWidth and innerHeight properties, but unfortunately, I didn't notice ...
I am currently utilizing the wenzhixin bootstrap table and attempting to initialize another bootstrap table within a child row known as 'detailView' in the code. Previously, I was using datatables but found this method to be simpler and more dir ...
My application features a drawer menu that functions smoothly on desktop, but experiences issues on mobile devices with noticeable lag. Within the header, I have implemented a boolean value that toggles between true and false upon clicking the hamburger i ...
I'm encountering an issue with a function that is supposed to open a new window when a button is clicked. Strangely, on the first click, nothing happens, but on the second click, the window finally opens. Here's my code: Script <script src ...
Perhaps it's not supposed to work this way, but hear me out. I'm utilizing Google Web Fonts and adding the PT Sans font like this: <link href="https://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" ty ...
Currently working with ASP.NET 3.5 web forms. I've recently saved the path of my website in the web.config file under the key "CommonPath". I have a basic static HTML page that I would like to utilize this key on. Any suggestions on how to achieve ...
Currently, I am in the process of learning how to make API calls using React Redux. I decided to practice by implementing an example in StackBlitz. However, I encountered an error after selecting a channel and clicking on the 'Top News' button. C ...
A series of divs in my code are currently grouped together with expand and collapse functionality. It works well, except for the fact that I have to click a button twice in order to open another div. Initially, the first click only collapses the first div. ...
I am currently facing an issue with the prinzhorn/skrollr plugin when trying to use removeClass/addClass on scroll function. I have attempted to find a solution but unfortunately, nothing has worked for me. <li class="tab col s3"><a data-800="@cl ...
The ProjectsSection component is responsible for rendering a document section with a header and cards. The goal is to trigger a header animation only when the header becomes visible on the screen for the first time and have it run once. However, adding a s ...
Currently, I am working on a website that includes downloadable PDF links. We are utilizing a parameter at the end of the file download URL to instruct the browser on how to handle the file: https://example.com?ref=0&download=y By using the download= ...
I need to determine whether the div with the class "divclass" contains an anchor tag. If it does, I have to run a specific block of JavaScript code; otherwise, no action is required. <div class="divclass"> <span> some text</span> ...
<script src="https://code.jquery.com/jquery-1.11.1.js"></script> <script> $(function(){ $('.like').click(function(e){ e.preventDefault(); // stop the page from reloading alert( $('.post-container&apos ...
Currently, I am in the process of learning React. I have a file named new_card_component.js that is responsible for displaying data fetched from the data.js file. The issue arises in my AirBnB.js file, where I'm passing the AirbnbApp module to a secti ...
I am in the process of developing a mobile web app and I need assistance with flipping the background image when it repeats along the y-axis. Can someone guide me on how to achieve this using CSS or JavaScript? https://i.stack.imgur.com/b107V.jpg var el ...
When implementing the code snippet below, .packages > .ulWrapper::after { background: linear-gradient( to left, var(--edge-color) 5%, rgba(0, 0, 0, 0) 95% ); /* option 1 - red */ background: linear-gradient( to left, var(--edg ...
Query: <div class="btn btn-second-in-pair-not-desired btn-tall">Clear search</div> <div class="btn btn-second-in-pair-not-desired btn-tall">Raw Search</div> <div class="btn btn-second-in-pair-not-desired btn-tall">Basic Searc ...