I have some fairly complex stacking arrangements going on in a site I'm working on. With a background image on a div being a gradient that overlays an image within it with a lower zindex. Like this:
So, this works fine at larger widths. When the width is smaller the image appears over the gradient background, like this:
Something's happening and I can't figure out what. I'm using twitter Bootstrap 2.3.0 as a framework. Link: http://www.osullivans-pubs.com/draft
EDIT: I'm pretty sure the problem is something to do with having a negative z-index on the image (#back img). But having the z-index at zero means the image appears above the gradient...
UPDATE: I worked it out. It's not really possible to have an element with a background image overlap a child element. So I created an absolutely positioned element before (and seperate from) the container and applied the appropriate zindex to that. That fixed it.
you have to add a z-index in liquid-slider.css file below is the code...
.liquid-slider-wrapper {
margin: 0 auto;
clear: both;
overflow: auto;
position: relative;
width: 1110px !important;
z-index: 20;
}
No matter what I try, I can't get this SVG gradient to work properly in the most recent Safari (5.1.7) on Windows:
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1920 200">
<linearGradient id="g186" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0" y2="200">
<stop stop-color="#0A306A" offset="0"/><stop stop-color="#030C1B" offset="1"/>
</linearGradient>
<rect x="0" y="0" width="1920" height="200" fill="url(#g186)" />
</svg>`
JSFiddle:
http://jsfiddle.net/wumnb/1/ (Note that the browser may throw an XSS warning because of the base64-encoded SVG)
When I include -webkit-background-size: 100% 200px; with and/or without the -webkit-, it re-sizes the SVG, but it looks significantly lighter than every other browser; almost as if it was cropping a full-page version of the SVG from the top to 200px from the top.
I've tried both answers from the other two questions I could find, but neither is working.
It turns out that preserveAspectRatio="none" needs to be preserveAspectRatio="xMidYMax meet" with viewbox set to the wanted dimensions. Sadly, this doesn't allow for percentages, but it's better than nothing.
W3 documentation for preserveAspectRatio.
EDIT: Upon playing with this more, I've discovered that background position is really weird in Safari. The xM(in|id|ax)yM(in|id|ax) part of the preserveAspectRatio seem to determine where the SVG will go on the page, rather than do what's described on W3.
It appears (to me at least) that xMidYMax is the equivalent of background-position: center bottom; and xMinyMin is the equivalent of background-position: center top;
I'm trying to create a radial gauge with Kendo UI. I notice on the demo, it render radial gauge as a full circle. Is it possible to have the gauge render only the top half?
I looked at the documentation on http://docs.kendoui.com/api/dataviz/radialgauge. Looks like they allow us to configure the angle of the scales, but I couldn't find one for the actual gauge itself.
Any idea on how to tackle this?
Thank you,
Turn out the frame for the radial is simply a background graphic.
Just change the CSS to the target image file to customize the graphic for radial gauge.
#gauge-container {
background: transparent url("../../content/dataviz/gauge/gauge-container.png") no-repeat 50% 50%;
width: 404px;
height: 404px;
text-align: center;
margin: 0 0 30px 50px;
}
Yes, you can set startAngle :0 and endAngle :180 and full circle is background image.
I have a lovely Star Trek Red Alert animation using CSS3. One of my parent elements has a border-radius along with overflow:hidden so that any content is cropped to the shape of the border radius.
This all works fine in Firefox but Webkit browsers leave some child elements hanging outside the cropped area.
Here is my code:
http://jsfiddle.net/doublewombat/EqK6R/embedded/result/
The div with the class name curvedEdges has the border-radius and overflow:hidden. However the blocks left & right of the 'Alert' text hang outside of this radius, even though they are child elements of curvedEdges. Or in plain English, the left and right edges of the animation should be slightly curved (as in Firefox), not dead straight.
So is this a bug in Webkit, or have I got something wrong?
Here it is on YouTube if you don't have a Webkit browser handy...
http://www.youtube.com/watch?v=3vyVy21nWsE
Firstly, what a cool demo!
I had a look around and it seems a problem not on you are having. The second answer to someone else's problem fixed it for me, although this doesn't work for safari. The fix is to use masking:
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
The accepted answer to that same question has another fix, which I think could really help you out, but I couldn't seem to get the right combination of elements and border-radius.
I'd been trying to do the same, and was using border-radius to mask elements to a circle.
I was able to use masking and a radial gradient to achieve the desired affect in Safari 6.0.3 (with transitions in position and size).
Here's the single line of code I added to the container (masking) element:
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
I thought I would have to use hard color stops, as follows, to get the hard edge:
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
However, it works the same without (perhaps someone can enlighten us on why). The clipping is not as smooth as with border-radius, but it beats the heck out of the image unpredictably exceeding the bounds.
You may need to adjust this for use with older versions of Safari/Chrome etc., I haven't tested it on different versions (aka YMMV).
It appears to be a browser issue as reported on: https://code.google.com/p/chromium/issues/detail?id=157218
Basically, when you apply animation to an element, the browser will handle it in the GPU (Graphics Processing Unit) for performance reasons, while the rest is handled by the CPU. That ends up rendering the animation above the mask.
As a workaround you can try adding an imperceptible transform property, that will also trigger GPU handling for the mask element, promoting it to the same level of the animation:
#redAlert .curvedEdge {
-webkit-transform: rotate(0.000001deg);
}
I guess it may vary depending on browser version, but these other values have also been reported to trigger GPU handling: rotate(0), translateZ(0)
It seems like its an issue with the GPU/hardware compositing. transform: translateZ(0); should fix the issue as well. For more information on this, read http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
-webkit-transform: translateZ(0);
transform: translateZ(0);
I have included vendor prefixes but you can remove them if you want.
Seems its a mixed working fix:
.wrap {
-webkit-transform: translateZ(0);
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
http://jsfiddle.net/qWdf6/82/
You could put an absolute positioned div over it with a border-radius and a thick black border, it will block the parts you want too be hidden.
I made a demo for another question about a similar problem in FF3.6: http://jsfiddle.net/vfp3v/15/
border-radius; overflow: hidden, and text is not clipped
Just as a heads up, this fix only worked for me if I applied the mask on a container with border-radius, but no border. Ultimately I ended up with something like this:
<div style="border-radius: 15px; border: 1px solid red;">
<div style="border-radius: 15px; overflow: hidden; -webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);">
<span style="position: relative; left; -20px;">Some stuff that overflows.</span>
</div>
</div>
With a border on the inner div, the clipping wasn't perfect.
Totally weird.
I found another possible solution to this bug, using CSS3 clip-path, but it only works in recent versions of webkit (it seems to work in Chrome 24, but not Safari 6.0.2). The following will clip a circle around the element:
-webkit-clip-path: circle(50%, 50%, 100%);
Hopefully this will be implemented by more browsers soon! It seems like this feature could have a lot of cool applications. Here's a relevant blog post: http://blog.romanliutikov.com/coding/css-clip-path-landed-in-webkit/.
Lets say I have a div element, with a background in position: 0%; how would I change the position to e.g position: 100%; but with keyframes on hover
I can't seem to use keyframes properly, it never works and I have all the latest browsers.
Thanks.
If you just want to animate background position on hover it's a lot easier to use a transition instead of keyframe animations. See this fiddle for an example: http://jsfiddle.net/hfXSs/
If you want to put in the extra effort of making it an animation you'll have to set the animation-play-state on the div to 'paused' and change it to 'running' on hover. See the spec on pausing animations here: http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-
EDIT: I was bored so here's the same thing using keyframe animations: http://jsfiddle.net/wGRg5/
Obviously, the fiddle has the problem that when you aren't hovering over the div the animation pauses which is probably not the desired effect.
Some Code, looks like webkit only at this point in time.
.box {
display:block;
height:300px;
width:300px;
background:url('http://lorempixum.com/300/300') no-repeat;
background-position:-300px;
-webkit-transition:background-position 1s ease;
}
.box:hover{
background-position:0px;
}
Via: http://jsfiddle.net/hfXSs/
More here: http://css-tricks.com/parallax-background-css3/