I have a div rotated 45 degrees, with a border image on it.
In chrome and safari, it renders fine.
In firefox, nasty anti aliasing lines appear around the edge of the rotated div, between the edge of it and its border image.
Here's the simple HTML:
<div class="container">
<div class="corner">
</div>
</div>
and here's the CSS:
.container {
margin: auto;
width: 400px;
height: 400px;
background-color: black;
outline: 1px solid #333333;
position: relative;
overflow: hidden;
}
.corner {
position: absolute;
bottom: -68px;
right: -66px;
width: 86px;
height: 82px;
background-color: #F1F2F3;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
border-style: solid;
border-width: 14px 16px 28px;
-moz-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
-webkit-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
-o-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 fill repeat;
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
}
and here's a JSFiddle. Look at it in firefox to see what I mean:
http://jsfiddle.net/uAF2u/
I've seen the tips for adding a transparent outline of 1px around the div, which would work if it didn't have a border image as in this case.
Anyone run into this before and know of a way to sort it?
Adding a translateZ seems to quick in a more accurate display and solve the issue:
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: translateZ(1px) rotate(45deg);
updated fiddle
I added the translate in the transform since firefox has been going un-prefixed for 10 versions now.
transform: rotate(0.0005deg);
FireFox 34
This works for me.
I had a very similar issue in Firefox, in which the transforming div was having a thin border outline, I fixed it by giving the div a transparent border.
May be this can help.
I have the same problem with Firefox and Safari. 1 thin line between sibbling divs.
Try also different combinations of:
border-radius: 2px 0 0 0;
or
border-radius: 0 1px 0 0;
on problematic element.
This seems to work primarily in Firefox and a bit in Safari.
In Safari you also have to cause overlapping positioned elements.
Related
Webkit animation works fine in firefox, chrome, IE and opera but not correctly in safari. webkit animation not work fine in safari. why?
.t-ads {
margin: 10px auto;
text-align:center;
width: 125px;
height: 125px;
background: #41515a;
border-radius: 10px;
font-size:10px;color:#FFFFFF;
transition-property: width, height, transform, background,color, font-size, opacity;
transition-duration: 1s, 1s, 1s, 1s, 1s, 1s,1s;
}
.t-ads:hover {
margin: 10px auto;
text-align:center;
width: 125px;
height: 125px;
background: #3399FF;
font-size:20px;
color:#000000;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
You need to add -webkit-transform to the transition property list:
.t-ads {
margin: 10px auto;
text-align: center;
width: 125px;
height: 125px;
background: #41515a;
border-radius: 10px;
font-size: 10px;
color:#FFFFFF;
-webkit-transition-property: width, height, -webkit-transform, background, color, font-size, opacity;
transition-property: width, height, -webkit-transform, transform, background, color, font-size, opacity;
-webkit-transition-duration: 1s; /* Only one value needed if all are the same */
transition-duration: 1s;
}
.t-ads:hover {
background: #3399FF;
font-size: 20px;
color: #000000;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
As you seem to want to animate all the properties you change, you could simply specify all for the transition and -webkit-transition properties. For further brevity, use the shorthand syntax to specify all the transition properties at once:
.t-ads {
margin: 10px auto;
text-align: center;
width: 125px;
height: 125px;
background: #41515a;
border-radius: 10px;
font-size: 10px;
color:#FFFFFF;
-webkit-transition: all 1s;
-transition: all 1s;
}
Your original code worked in Firefox and Chrome because they support the unprefixed transform property. Incidentally, you don't need to redefine property values in the :hover state which don't change (you'll notice I've removed margin, text-align, width and height from the :hover block).
JSFiddle
while using border-radius Opera won't actually hide the overflowing parts of elements. I already tried to apply things I managed to find in similar threads, such as defining the border style or paying attention to positioning with absolute and relative parameters. It is still not working though.
html
<div class="node">
<div class="skill skill1"></div>
<div class="skill skill2"></div>
<div class="skill skill3"></div>
<div class="skill skill4"></div>
</div>
css
.node {
position: relative;
width: 250px;
height: 250px;
opacity: 0.9;
border-radius: 50%;
overflow: hidden;
left: -60px;
border: solid 1px transparent;
}
.skill {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
}
.skill1 {
background-color: #26ac79;
-webkit-transform: rotate(90deg) skewX(45deg);
transform: rotate(90deg) skewX(45deg);
}
.skill2 {
background-color: #25765f;
-webkit-transform: rotate(135deg) skewX(45deg);
transform: rotate(135deg) skewX(45deg);
}
.skill3 {
background-color: #25313f;
-webkit-transform: rotate(180deg) skewX(45deg);
transform: rotate(180deg) skewX(45deg);
}
.skill4 {
background-color: #25193d;
-webkit-transform: rotate(225deg) skewX(45deg);
transform: rotate(225deg) skewX(45deg);
}
Here's the fiddle:
http://jsfiddle.net/Mu9Ar/
Thanks for any help.
Actually the code you provided works in latest Opera with Blink engine, so I guess you can leave your code as is. However if you need it to work in versions up to 12.16 and your page background is white, what you can do is to put .png overlay over your chart which will clip the chart, just like webdevelopers did in old days when there were no border-radius:)
According to the W3 specification:
http://www.w3.org/TR/css3-background/#corner-clipping
A box's backgrounds, but not its border-image, are clipped to the
appropriate curve (as determined by ‘background-clip’). Other effects
that clip to the border or padding edge (such as ‘overflow’ other than
‘visible’) also must clip to the curve. The content of replaced
elements is always trimmed to the content edge curve.
It appears that Firefox implemented the spec correctly by clipping the content to the edge of the curve when using overflow: hidden.
However, Opera is not compliant on this detail.
As an aside, if you add border-radius property to an img element, the image will be clipped correctly.
At this moment, there is no work-around that I know of unless you try HTML5 canvas.
I am getting a odd effect (currently in chrome). I have created my own overlay dialog box. which has a semi transparent background sitting on top of my website with a box on top of that. the top of the bar as you can see has a black background. The main part of the box is white thought.
Its not the easyist to see but it is annoying me.
The white is showing through from behind. (I know as if i change it to red it changes colour) Which you can see in the top right hand corner of the screenshots, just above the "X"
Both the header and the box has a border radius 3px
.blockUI .overlay {
background: #f00;
border-radius: 3px;
margin: 0 auto;
padding: 10px;
overflow: hidden;
position: relative;
top: 20%;
text-align: inherit;
width: 600px;
z-index: 10009;
}
blockUI .overlay h1 {
background: #000;
border-bottom: 2px solid #F48421;
border-radius: 3px 3px 0 0;
color: #FFF;
font-family: 'Roboto', sans-serif;
font-weight: 300;
margin: -10px;
padding: 10px;
}
Since overflow: hidden; along with border-radius seems to cause some rendering inconsistencies in some engines (take a look at this), one should use border-radius on both the parent and the child elements to achieve rounded corners.
As you have noticed, you still get some wierd results with extra pixels "shining" through. Just reduce the border-radius of the child (or the other way round) to compensate this.
blockUI .overlay h1 {
border-radius: 2px 2px 0 0;
}
I had same problem. But I solved.
.blockUI .overlay {background:#000;}
and remake some!
You should try on the parent div:
-webkit-background-clip: padding-box;
Finally fixed this completely by adding this on parent and child divs.
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
outline:none;
border:none;
text-decoration:none;
I have a small issue about css3 and trapeze. I have two square images side by side (float left each - white dots) and I want them to look like this :
How would you do it? Is it possible?
If the pic1 is a .png and the negative space created by the angle of the trapeze edge is transparent, then this should work:
#pic1, #pic2 {
float: left;
position: relative;
}
#pic1 {
z-index: 2;
}
#pic2 {
right: 30px; /* Or whatever the difference in image sizes is */
}
You can use the CSS triangle trick with the transparent borders
html
<div class="pic pic-1">Pic 1</div>
<div class="pic pic-2">Pic 2</div>
css
.pic{
width:100px;
height:100px;
float:left;
text-align:center;
line-height:100px;
color:white;
position:relative;
}
.pic-1{
background:orange;
}
.pic-2{
background:limegreen;
}
.pic:after{
content:'';
display:block;
position:absolute;
height:0;
width:0;
z-index:10;
}
.pic-1:after{
top:0;
right:-10px; /* must match the border left */
border-left: 10px solid orange; /*play with width to change angle*/
border-bottom:50px solid transparent;
}
.pic-2:after{
bottom:0;
left:-10px; /* must match the border right*/
border-right: 10px solid limegreen;/*play with width to change angle*/
border-top:50px solid transparent;
}
Demo at http://jsfiddle.net/gaby/eh2f3/
First of all you begin setting a strip that will cut alogn the top and botom borders, and where you will place the images:
.demo1 {
overflow-y: hidden;
}
Inside, there will be the base elements, that are floated left,
.base {
width: 100px;
height: 100px;
float: left;
}
Inside, a clipping element rotated:
.demo1 .clip {-webkit-transform: rotate(15deg);}
.clip {
height: 177%;
width: 125%;
margin-top: -40%;
-webkit-transform-origin: 0% 50%;
overflow: hidden
}
and inside, the image, counter-rotated
.demo1 .inner {
-webkit-transform: rotate(-15deg);
}
.inner {
-webkit-transform-origin: 0% 50%;
margin-left: -151%;
margin-top: 19%;
}
The html is :
WEBKITTED DEMO
webkitted means that only webkit prefixes are used :-)
Since somebody out there was offering 1 milliion points, I decided to do an extra effort. See the second strip (demo2) where the rotations are specified thru nth-child(). That allows to get different angles for every transition.
Full CSS :
.demo1, .demo2 {
overflow-y: hidden;
}
.base {
width: 100px;
height: 100px;
float; left;
}
.clip {height: 177%; width: 125%; margin-top: -40%;-webkit-transform-origin: 0% 50%; overflow: hidden}
.inner {-webkit-transform-origin: 0% 50%;margin-left: -151%;margin-top: 19%;}
.terminator {background-color: white}
.demo1 .clip {-webkit-transform: rotate(15deg);}
.demo1 .inner {-webkit-transform: rotate(-15deg);}
.demo2 :nth-child(odd) .clip {-webkit-transform: rotate(15deg);}
.demo2 :nth-child(odd) .inner {-webkit-transform: rotate(-15deg);}
.demo2 :nth-child(even) .clip {-webkit-transform: rotate(-15deg);}
.demo2 :nth-child(even) .inner {-webkit-transform: rotate(15deg);margin-left: -151%;margin-top: -30%;}
Note the calculus to place the images accurately are strange; I end doing it by trial and error. Also, you need images with plenty of margin to be cutted without losing the point of interest.
I am trying to implement this dialogue box without reverting to using images for the top right corner. The following is my implementation for it.
.box{
-webkit-border-radius: 6px 6px;
-moz-border-radius: 6px / 6px;
-khtml-border-radius: 6px / 6px;
border-radius: 6px / 6px;
width:33%;
border: 1px solid #DDD;
display: inline-block;
margin-right:10px;
margin-bottom: 10px;
max-width: 290px;
padding: 10px;
}
.triangle-topright {
width: 0;
height: 0;
border-top: 50px solid #fafad6;
border-left: 50px solid transparent;
-webkit-border-top-right-radius: 6px 6px;
-moz-border-radius-topright: 6px / 6px;
-khtml-border-top-right-radius: 6px / 6px;
border-top-right-radius: 6px / 6px;
float: right;
margin-top: -10px;
margin-right: -10px;
}
<div class="box">
<div class="triangle-topright"></div>
<h3>title</h3>
<p>stuff</p>
</div>
The problem is this works for safari, but for chrome, -webkit-border-top-right-radius: 6px 6px; seems to cause a conflict. When it is activated, the top right will be rounded, but the triangle will disappear.
is there a workaround to this? or is there a better way to do this?
thank you.
One solution that appears to work (tested in Chrome, Safari, Firefox) is removing the following lines from .triangle-topright
-webkit-border-top-right-radius: 6px 6px;
-moz-border-radius-topright: 6px / 6px;
-khtml-border-top-right-radius: 6px / 6px;
border-top-right-radius: 6px / 6px;
And instead simply adding overflow: hidden; to the .box css.
Demo: http://jsfiddle.net/BcrKH/
I think your idea of creating a triangle shape in CSS is over-thinking the problem. A CSS gradient would seem to be the simpler solution here.
It's possible to create gradients that are just an abrupt color change, and you can make them diagonal too, so it seems like it can offer exactly the solution you're after.
Now we've established a different tack to the question, we can refer to other questions like this one for reference: How to make a diagonal css gradient without the colors blending together(a sharp color change) that's displaced 70% to the right?
The only problem with CSS gradients is that they're not supported in older versions of IE. This can be resolved however. IE6/7/8 does have its own filter method of creating gradients which can do the trick, but my preference would be to use CSS3Pie, which allows you to use the standard CSS3 gradients even in old IE versions.
Hope that helps.