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 8 years ago.
Improve this question
Any idea how to create that shape in CSS an how to keep it always centered while resizing ??
The point is to use transforms and set the transform-origin on the "fixed" point, here top right so :
transform-origin:100% 0;
Then you can rotate or skew your element :
DEMO
HTML :
<div></div>
CSS :
body{
background:gold;
}
div{
position:absolute;
width:100%; height:100%;
right:50%; top:0;
background:teal;
-webkit-transform-origin:100% 0;
transform-origin:100% 0;
-webkit-transform: skewX(-20deg);
transform: skewX(-20deg);
}
Not a perfect Solution and needs some modification but should do the trick:
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.container {
margin-left:-1000px;
width: 4000px;
height: 2000px;
background-color: yellow;
}
.arrow {
width: 0;
height: 0;
border-top: 2000px solid red;
border-right: 2000px solid transparent;
}
You can see it here: http://codepen.io/anon/pen/vsaLc
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
He everyone i am strugling to find a css that will work to get a overlay on my feautured image so you can see my title more clear. For the site www.quinstudio.nl/gallery. Any idea how i can get this to work?
? {
background: #000;
opacity: .1;
}
There are several ways you could approach this. There's no real difference in how they'll turn out; you can use whichever works better with the markup you have. The first option is a little simpler because there's no empty div being added as a color overlay.
Option 1: Make the colored background opaque, and the image partially transparent.
.image-wrapper {
display: inline-block;
background: #0cd;
/* You need this line for the centered h1 below to work. */
position: relative;
}
.image-wrapper img {
opacity: 0.5;
display: block;
}
.image-wrapper h1 {
/* Here's a trick for centering your title, if you want. */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: auto;
color: #fff;
}
<div class="image-wrapper">
<img src="https://loremflickr.com/320/240" alt="Kitten">
<h1>Kitty!</h1>
</div>
Option 2: Make the image opaque, and put a partially transparent overlay on top of it.
.image-wrapper {
display: inline-block;
position: relative;
}
.image-wrapper img {
display: block;
}
.image-overlay {
background: #000;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 2; /* puts this div 'in front' of the image */
}
.image-wrapper h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
z-index: 3; /* puts the text in front of the dark overlay */
}
<div class="image-wrapper">
<img src="https://loremflickr.com/320/240" alt="Kitty!">
<div class="image-overlay"></div>
<h1>Kitty?</h1>
</div>
While #jack's answer is good, I'd like to share an alternative one that doesn't use an <img> element and instead uses the :after pseudo-element.
This allows you to use the CSS background image on the container and essentially add a fake element that has the color overlay on it:
.container {
background: url(https://loremflickr.com/320/240);
width: 320px;
height: 240px;
position: relative;
}
.overlay > * {
z-index: 1;
position: relative;
color: #fff;
}
.overlay:after {
content: "";
background: #0095ee;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: .65;
}
<div class="overlay container">
<h1>Title</h1>
</div>
Edit:
Your situation is a little different. You can just lower the opacity of the image and add a black background to it's parent container. Try the following:
.edgt-justified-layout .edgt-ni-inner .edgt-ni-image-holder .edgt-post-image img {
opacity: .75;
}
.edgt-justified-layout .edgt-ni-inner .edgt-ni-image-holder .edgt-post-image {
background: #000;
}
It will lower the opacity of the image (which will make it look "whiter", so we can add a black (or whatever color you want) background to it's parent container to compensate and darken it instead.
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 3 years ago.
Improve this question
It seems something like this has been addressed before, but most of what I'm finding is for the more generic issue that doesn't pertain to most browsers today. I'm encountering the known IE issue where using border-radius with a border and a background (a color in my case) results in the background bleeding beyond the border.
I'm wondering if there is a workaround that actually can mask this issue... Some of the things I've tried:
<meta http-equiv="X-UA-Compatible" content="IE=10" />
overflow:hidden on the parent
background-clip:border-box
adding .1 to the border-radius
None of these have worked. Is there another workaround (other than "use images") while I wait for yon IE team to fix things?
I've created a fiddle that illustrates this well and documents what I've found in more detail.
I have experienced this before.
I recommend instead styling the border with CSS generated content, in a manner such as this:
.redcircle::after {
content:'';
display:block;
left:0;
top:0;
right:0;
bottom:0;
border-radius:100px;
border:10px solid yellow;
position:absolute;
pointer-events: none; //ensures no clicks propogate if this is desired
}
You can crate an ::before or ::after CSS Pseudo and make your background: red; on them. Set your width, height and border-radius on 100% and for example don't change z-index to -1, you can see his get the inside width and hight and don't bleeding out.
Screenshot from Explorer 9 on Vista
And now for example (how its look without z-index play):
body {
background: white;
}
.bluebox {
background: blue;
width: 200px;
height: 200px;
}
.redcircle {
position: absolute;
left: 140px;
top: 40px;
text-align: center;
height: 100px;
width: 100px;
border-radius: 100px;
font-size: 100px;
line-height: 100px;
color: black;
border: 10px solid yellow;
}
.redcircle::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100%;
background: red;
}
<div class="bluebox">
<div class="redcircle">
!
</div>
</div>
And this one for using:
body {
background: white;
}
.bluebox {
background: blue;
width: 200px;
height: 200px;
}
.redcircle {
z-index: 1;
position: absolute;
left: 140px;
top: 40px;
text-align: center;
height: 100px;
width: 100px;
border-radius: 100px;
font-size: 100px;
line-height: 100px;
color: black;
border: 10px solid yellow;
}
.redcircle::before {
z-index: -1;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100%;
background: red;
}
<div class="bluebox">
<div class="redcircle">
!
</div>
</div>
Fiddle Demo
Borrowing from Zeev's answer, which moves the background-color to a :before or :after (which only substitutes a subpixel gap for a subpixel bleed, and across more browsers), and Phil's answer, which moves the border to an :after (which didn't really fix the problem).
Move the background-color to a :before as suggested by Zeev, but give it padding equal to the border-width minus two (or use calc()). Then give it negative top and left positioning with that same amount.
Then move the border to the :after but give it negative top and left positioning equal to the border-width.
This creates an oversized background and recenters it below the content. Then it creates an oversized border and centers it around the content. You could probably oversize the background to other degrees and get the same result. The point is to make it bigger than the hole inside the border, but smaller than the outside of the border. This, naturally, would fail with thin borders, though.
body {
background: white;
}
.bluebox {
background: blue;
width: 200px;
height: 200px;
}
.redcircle {
z-index: 1;
position: absolute;
left: 150px;
top: 50px;
text-align: center;
height: 100px;
width: 100px;
border-radius: 100px;
font-size: 100px;
line-height: 100px;
color: black;
}
.redcircle::before,
.redcircle::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
}
.redcircle::before {
z-index: -1;
background: red;
top: -8px;
left: -8px;
padding: 8px;
}
.redcircle::after {
top: -10px;
left: -10px;
border: 10px solid yellow;
}
<div class="bluebox">
<div class="redcircle">
!
</div>
</div>
background-clip fixes this issue:
.bluebox {
background-clip: padding-box;
}
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 7 years ago.
Improve this question
I am trying to absolutely position sideways text inside a div that there are multiple occurences of.
Each child has position: absolute; ,
and each parent has position: relative;
.parent{
width: 24%;
display: inline-block;
float: left;
border-left: 1px solid #FFA500;
position: relative;
}
.child{
display: inline-block;
line-height: 1.5;
height: 5%;
position: absolute;
top: 0px;
right: 0px;
transform: translate(0px, 100%) rotate(90deg);
overflow: hidden;
float: right;
}
Of of the children go to the same exact place on the page, which seems to be the first childs parent.
The structure is
Parent
child
close
close
for all 4 divs.
Can anyone please help?
In your css, if your parent has no content other than the absolute position child div, then the parent has a 0 height declaration - so you have to set the height of the parent div in pixels in order to give it a place in the DOM.
Your height: 5% on the .child may be what is throwing it off (it was for me). That, or there could be other css that is overriding something for you. Fiddle here: https://jsfiddle.net/tagb3yja/
.parent{
width: 24%;
display: inline-block;
float: left;
border-left: 1px solid #FFA500;
position: relative;
background: yellow;
}
.child{
position: absolute;
display: inline-block;
line-height: 1.5;
top: 0px;
right: 0px;
transform: translate(0px, 100%) rotate(90deg);
overflow: hidden;
float: right;
background: silver;
}
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 9 years ago.
Improve this question
i got a div that looks like this:
+---------+
| |
+---------+
and I want to transform it like this:
+---------+
/ \
+-------------+
How can i do that ?
If you wish to use CSS transforms, see here
HTML
<div class='trapezoid'></div>
CSS
.trapezoid {
display: inline-block;
overflow: hidden;
margin: 0 3em;
/**outline: solid 1px;/**/
width: 10em;
height: 10em;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.trapezoid:before {
display: block;
background: red;
content: '';
}
.trapezoid:before {
width: 20em; height: 3em;
transform: rotate(-45deg) translate(-4.142em, -2.6em);
-webkit-transform: rotate(-45deg) translate(-4.142em, -2.6em);
}
For a simpler implementation, see this fiddle
HTML
<div></div>
CSS
div {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
margin-top:30px;
width: 100px;
}
If by "how to transform" you mean how to rotate on the x axis applying a perspective to achieve deepness, then you can do it by using CSS3 transform's perspective and rotate3d:
Running example
HTML
<div class="box">
Hover me
</div>
CSS
.box{
width: 300px;
height: 100px;
background: silver;
font-size: 4em;
margin: 100px;
}
.box:hover{
transform : perspective(400px) rotate3d(1, 0, 0, 50deg);
}
You may wanna read this other answer too.
Divs are square elements, so you can't transform the actual bounding box of the div to be trapezoidal. However, you can play with borders and box shadows to achieve visual effects like that. See CSS3 matrix3d rectangle to trapezoid transformation for some potential help.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am having a problem with horizontally centering a DIV.
I have provided a full example here.
This is inside a Content Editor WebPart in SharePoint 2010 Standard.
http://fiddle.jshell.net/hdA7d/
<div class="weathercontainer">
<div id="weather" class="items" onClick="window.open( 'http://www.weather.com/weather/today/33196','_blank' ); return false; " >
</div>
</div>
.weathercontainer{
width: 100%;
}
.items {
width: 170px;
margin: 0px auto;
position: relative;
cursor: pointer;
}
Like this
demo
css
.center
{
left: 50%;
position: absolute;
top: 50%;
}
.center div
{
border: 1px solid black;
margin-left: -50%;
margin-top: -50%;
height: 100px;
width: 100px;
}
You can just give the absolutely positioned .items a left and right position of 0 and a margin of auto:
.items {
position:absolute;
margin: 0px auto;
left:0;
right:0;
}
See this updated fiddle.
Check if this works for you.
click here
display: table-cell;
vertical-align: middle;