I have noticed a problem with CSS3 rounded corners. They contain inner elements perfectly but when the container has a position:relative applied to it they no longer contain elements. I have set up 2 fiddles to explain.
This has the container set to position:relative
http://jsfiddle.net/abqHE/12/
This one isn't.
http://jsfiddle.net/abqHE/11/
You can see that we have a rounded container only when position is not applied. The problem is that we need to use positioning. Any ideas how to fix this.
Marvellous
Related
I want to show another image on hover and due to the layout of the homepage I need to use sprite to do it. I've got it working fine, but I'm using fixed width and height for the container.
You can see my JSFiddle here:
http://jsfiddle.net/mckeene/fhk0byqt/4/
The problem arises when I want to make it responsive. I can use max-width: 100%, but what about the height?
OK, this solution is based on the known fact that some properties like padding-top and margin-top, when given values in percentage, are calculated based on the width of an element rather than its height.
Making an element “as high” as required by the known dimensions of a responsive image can be done by using padding-top – I used a value of 66.54% here based on your image’s dimensions (half the image height divided by the width, times 100) to span the container element up to the required height.
Now normally to display the upper half of an image first, and then the second half on hover, I would use absolute positioning – but we can’t use top here, since a value in percentage for that property would be based on the height. But luckily, as already mentioned, margin-top is one of those properties where percentage is calculated based on the width – so we can use margin-top: -66.54% here to “pull” the image up over its container’s padding first to show its upper half, and then double that (margin-top: -133.1%) to pull it up even further on hover, to show its lower half.
Here is my test application inthree.js- http://zheden.elitno.net/
There are 2 cubes - green is the upper one. If you uncheck "Cube 2" (yellow inner cube), it becomes invisible. And when you rotate then camera and after rotating check back "Cube 2", it becomes outer. It reproduces not with all angles of rotation.
Adding "renderer.sortObjects = false" fixed the problem. But could you please explain me the reason of this behavior? Renderer sort objects based on their positions. Why order of rendering is changed when some object is transparent? It's position is not changed.
Is this related to Transparent textures behaviour in WebGL ?
Thanks,
Zhenya
There are no transparent objects in your demo, only opaque ones. You are changing the visibility.
WebGLRenderer sorts objects based on their distance from the camera, and renders objects in the sorted order. It renders opaque objects from front to back.
The rendering order can change due to how the sorting algorithm breaks ties when two objects are the same distance from the camera.
However, the render order is not necessarily changing when you toggle the visibility off and then on again. What can be changing is the distance to the depth buffer in the least significant digits due to roundoff when you move the camera. Hence, sometimes the second object renders, and sometimes it does not.
You have two cubes of exactly the same size and orientation in exactly the same location. Do not do that. It can cause you all sorts of rendering problems -- the most common of which, is flickering.
three.js r.58
I've been provided with 8 individual images (top left, top, top right etc) for a border around the main (fixed width) content box. If I was given a single image, I'd use border-image.
What's the best way to use the 8 images? Divs with absolute positioning? Or is it such a pain I should just combine them into one?
What's so hard about combining the images into one? It has numerous other advantages, like reducing the number of HTTP requests the client needs to make, for example.
An alternative is to use CSS3's multiple background image feature, where you'd set each image as a layer in your box.
Eric Myer used a technique whereby (just to explain technique) the image was a little circle. Then, that was the background graphic in four separate divs each abs positioned in the corners of a containing div w/relative position. Background position was changed for each and a regular border was used for the straight lines in effect getting rounded corners. The circle had to be filled with white or whatever bckgrnd color you used.
This way, one could expand. You still need to have the height expand should changes occur, right?
I'd make one for the top and bottom and a third that repeats on the Y for the middle, that way your box will expand if content is added. Height that is.
Please have a look at this page:
http://www.abhi.my/lab/3D-menu.html
If you haven't already guessed, I'm trying to emulate the new iOS notification animation (that's where I first saw it), and obviously, my two paltry div's aren't behaving like a full box...
Any idea what I'm doing wrong here...?
This is what I'd like to get close to: http://www.youtube.com/watch?v=pBgVbzBJqDc
You are only transforming you elements in 2d space, even though you are going for a 3d effect.
A working example:
http://jsfiddle.net/mrlundis/wU296/
The "bottom" span is positioned behind the "front" span by using translate3d(x,y,z) where y and z correspond to half of the elements height (it's rotated around it center point.) It should be possible to achieve the same effect using -webkit-transform-origin.
-webkit-transform-origin is also used to make sure the containing div rotates around it's center point on hover.
Is there any way to combine zoom property with values different from 1 and filter?
For example, zoom: .5 on block with AlphaImageLoader make transparent areas become black. Assigning background color fix this problem but I need it to be transparent...
Or maybe there is any way to scale with background images in IE6?..
After struggling about two days with this problem,
I found, that there is several reasons, causing transparent areas on child element become black:
zoom > 1 or < 1 on parent block;
position: relative or absolute on parent element;
negative left or top on child element;
clip on child element;
filter on the same element.
I didn't tested much, but in my case applying "filter: alpha(opacity=100);" to parent block helps to get rid of transparency bug.
Maybe this will be useful to somebody...