Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have a div in which, I need to display the div as shown in the image below.
Can we acheive this using css or with any script. Need help
Thanks
Use perspective and transform: rotate.
If you take a look at this link, perspective, you'll find some interesting things one can do
div {
margin-top: 40px;
perspective: 100px;
}
img {
height: 150px;
transform: rotateY(15deg);
}
<div>
<img src="http://lorempixel.com/500/200/nature/1/" alt="">
</div>
This is basic idea.
.parent {
perspective: 600px;
}
.child {
width: 100px;
margin: auto;
height: 35px;
text-align: center;
background: red;
transform: perspective(500px) rotateY(35deg);
}
<div class="parent">
<div class="child">Banners</div>
</div>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
When I try to make multiple circles in css and then link them to my html file.
the code looks like this:
.circle{
height: 50px;
width: 50px;
background-color: red;
}
But then when I try to make another circle (by using the same 'circle' class), it interferes with some of my javascript code, some of which are my variables. So I was wondering, if there was a second circle tag that did the same thing.
You have a css class as an example, classes are reusable in your HTML code. For example:
<div class="circle">One circle</div>
<div class="circle">Another circle</div>
Just apply the class to the element either in your JavaScript if you render elements there, or straight up in your HTML as shown above.
On another note, to get rounded edges on your element you can add a border radius in your css class:
.circle{
height: 50px;
width: 50px;
background-color: red;
border-radius: 50%;
}
Create a new div in your HTML, with another class type, f.e. cirlce2
<div class="circle2"></div>
Then just copy paste your CSS:
.circle2{
height: 50px;
width: 50px;
background-color: red;
border-radius: 100%;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
In React on a button click I make a small component (compSmall) visible on top of another big component (compBig). using css properties on compSmall such as
position: absolute;
width: 300px;
height: 150px;
margin-left: 40%;
margin-top: 200px;
border: 1px solid #0083a5;
z-index: 100;
But when compSmall is visible on top of compBig, background (means content of compBig) still visible . But I want content of compBig is to be not visible clear or blur when compSmall is visible.
How to achieve this.
PS:
I can only apply properties on compSmall, not on CompBig. Since CompBig is the whole application component except compSmall.
What about make compSmall with the same size of compBig, so you will not see the compBig and inside the compSmall you can create another component or just a div with those css properties.
JSX
<CompBig>
<CompSmall className="compSmall">
<div className="content"></div>
</CompSmall>
</CompBig>
CSS
.content {
position: absolute;
width: 300px;
height: 150px;
margin-left: 40%;
margin-top: 200px;
border: 1px solid #0083a5;
z-index: 100;
}
.compSmall {
/* Add the blur effect */
filter: blur(8px);
height: 100%;
width: 100%
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
Why these two lines' width are different? They are both supposed to 1px;
The only difference is they have different left number, but why this cause the width change?
By the way, my chrome version is 84.0.4147.105 (win10), and in firefox it looks correct.
body {
margin: 0;
padding: 0
}
.demo {
width: 500px;
height: 500px;
position: relative;
background-color: yellow;
}
.line, .line2 {
left: 300px;
position: absolute;
width: 1px;
background-color: red;
height: 500px;
}
.line2 {
left: 402px;
}
<div class="demo">
<div class="line"></div>
<div class="line2"></div>
</div>
I found because I zoomed the chrome to 125% then it cause the problem
by the way, I tried zoom to 125% in Firefox and it's still shows correct.
thanks everyone.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I would like to realize a simple tutorial to explain the role of the specific areas of my website realised with popovers.
My idea is that when user clicks on the button start tutorial, then some popovers are displayed in sequence on different elements, and when a popover is open, the rest of the screen is blocked and the user can only press next to close the current popover and open the following one, until the tutorial is concluded.
How can i do that?
When the modal is open, you have to use JS to temporarily add overflow:hidden to the body element (this will remove the scroll bars on the main window and prevent scrolling.)
The markup to manage this class toggle on the body has already been answered/provided here:
How to disable scrolling temporarily?
If you just require the user not to be able to click anywhere else, other than in the tutorial, you can make a simple overlay like so (View snippet in full screen):
html,
body {
overflow: hidden
}
.block {
height: 100vh;
width: 100vw;
background: black;
opacity: 0.8;
position: absolute;
top: 0;
left: 0;
}
.tutorial {
height: 300px;
width: 800px;
background: #ccc;
position: absolute;
top: 50vh;
left: 50vw;
transform: translateX(-50%) translateY(-50%);
}
iframe {
height: 100vh;
width: 100vw;
}
<iframe src="http://autotrader.com" frameborder="0" scrolling="no"></iframe>
<div class="block">
</div>
<div class="tutorial">
</div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 8 years ago.
Improve this question
Following on from another SO question.
Is it possible to expand the div, left and right instead of the answers on the other SO question which only expand to the right and down...
cheers
Of course it is.
Structure
You need a parent container set to position: relative; and your actual div set to position: absolute;
This way you can modify position of your div without any worry. This should work as a starting point. You can see the child div being shifted top and left compared to the parent.
<style>
.parent {
position: relative;
width: 200px;
height: 200px;
background: yellow;
margin: 40;
}
.child {
position: absolute;
top: -10px;
left: -10px;
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="parent">
<div class="child">
</div>
</div>
Expansion
so for the actual expansion, you would have to animate / change the left / top position together with width and height of the box.
For every 1px you shift your box left, you have to increase its width by 2px! to get an even expansion.
$('.child').animate({'left' : '-=10px', 'width' : '+=20px'});