I'm trying to use CSS3 animations to scale up a div. However, I want to keep the top side of the div where it's at. So I only want the bottom part of the div to scale up. How do I do this?
You must use -transform-origin , by default at 50% 50%
More info : https://developer.mozilla.org/en/CSS/transform-origin
Related
We have a DIV that is centered vertically in its parent and shows different text at different times, meaning its height is not fixed.
Is it possible to use CSS only to position this DIV just off the screen, at the top, then slide it down with animation?
We tried various combinations of translateY and webkit-transform, but these fail because translateY is based on the element's height, not the parent's, when using percentages. Using pixels doesn't work since the DIV's height varies.
A JavaScript solution is obviously possible, but is there a way to do this with CSS only?
http://pastebin.com/pVmXyfxi
Not 100% sure if this is what you mean, but you can move the div off the screen with top:-1000px and then change the top: value on hover (or click or whatnot). The animation part is defined in the div css settings and it runs when one of the settings is changed.
I'm having some troubles with keyframe animation using CSS3. The position of the image being animated changes based on the window/screen size. I've tried to find a solution to this problem but I'm lost. I tried to specify a boundary so the animation only plays inside that, but it did not work.
See here, and try resizing the window. I know this has something to do with the position:absolute. My ultimate goal was to have the space background move left to right but still be dead in center if that makes sense.
Thanks for your help.
The problem is that the margin-left and margin-right properties are being set to auto, which adjusts the left margin of tdr-main, while space-bg's animation modifies the absolute left position. When the window is resized to a smaller size, the left-margin on tdr-main shrinks down to 45px, but the left position on the background image still moves betweens an absolute 342px and 450px.
If you embed space-bg inside the same container that has the auto margins on it,
<div id="tdr-main">
<div id="space-bg">
</div>
[...]
</div>
then both will stay centered, and the position on space-bg will be relative to the centered container div. Just use z-index with absolute or relative positioning to keep things stacked correctly.
I need to create this layout and I'd like to do as much of it as possible with CSS, rather than using images and whatever.
As such, how can I do this in CSS? (if at all?)
As you can see, there is the image behind, with the button overlaid with padding. The bit that I'm struggling with is creating the curves on the IMAGE above and to the left of the button and bottom to the right of the button (I've pointed them out on the pic below).
Any help would be great.
Thanks
I know just enough CSS to be dangerous so I can't detail every step, but I think you can approach it like this:
Split the background image into two separate images both at a z-index of 0 at the height of the top of the grey box. I think you can use two div's that reference the same original image with different offsets (similar to CSS Sprites) but I don't know the details of how to do that. The left edge of the lower div would start where the grey box ends. Round the lower-left corner of each "image" div.
Add the grey box at a z-index of 1 with appropriate rounding, and then the blue box at a z-index of 2, again with appropriate rounding.
The background of the block element containing all of this would also have to be grey to match the grey border and properly fill in grey where your right-most arrow is pointing.
You don't have to split your image at all, only the container divs.
Let me detail a bit:
You can have your image set as a background image instead of putting it in a src attribute of an img tag. This technique is most commonly used when working with CSS sprites.
So, if you have you uppermost div at a constant width and height, if you try to apply the background image in it, you'll see it fits very nice.
On the bottom, you have two divs or whatever block element you'll like, just be sure to put fixed width and height, so the background will be applied and you will be able to actually see it.
Then all you have to do is fiddle with css background-position to adjust the SE chunk of image.
I'll be putting a small demo together to better illustrate the idea.
After you have a big div at the top, and two smaller at the bottom, where two of them share the same background-image, but with different background-position, you can safely add some css3 border-radius to fit your roundness needs. You can also use some tool like http://css3generator.com/ to add a compatibility layer on all browsers with ease.
That is very easy to realize with pure css. The page you have shown is divided into 3 divs without any margin. You only need to set the right border radius for each div.
This is a function of the background image, which is a css element if that's what you mean, but it is not a seperate attribute for a selector, at least not in standard CSS. Wait until CSS3 becomes more prevelant, then it's corner-radius or some such thing.
Well it's 3 probably 3 seperate divs, a hole "burned" into the background image, or a div being overlayed for the button.
The best way to figure out how it's done is to read the source of the page you found it on.
For convenience:
If you have a webkit based browser like chrome or safari then enable developper mode mouse over the button "right click" and choose inspect element. Otherwise you can pour over the page source until you find what you want.
I want to make a menu with semi-transparent blurred background.
At the moment, I've only found a solution for IE: filter: blur(strength=50);.
How can I do this cross-browser, without using images?
There is no blur property in CSS, and filters are an IE-only feature. You'll have to use images.
The only way around this is to use a second, blurred version of the image and apply that as the background. You'll need to set up a common background position to line them up, e.g. using position: fixed or calculating the offset position from the top left corner of your menu.
I want to build a fixed width website which is 960px wide and aligned to the left. However, I want to use a background which is wider than 960px and that fills the space to the right if the user has a screen wider than 960px.
This is easy using a background image:
body {background:url(myreallywidebgimage.png) 0 0 no-repeat}
#wrapper {width:960px;}
But can I do it where the background is an SVG, without a horizontal scroll bar appearing?
The only thing I can think of that would turn off the horizontal scrollbar is to do something like as follows:
#wrapper {width:960px; overflow-x:hidden}
Edit: Upon further reflection I decided it was best to see if Google offered up an other possible suggestions and I came across this: http://helephant.com/2009/08/svg-images-as-css-backgrounds/. The above solution will only work if you assign the background to that div element. You can, however try assigning overflow-x:hidden to the body itself to see if that solves the problem as well. Hopefully these suggestions help.
The background will scroll only if your SVG image has pixel dimensions which exceeds that of the browser window. If you set the image to have 100% width and 100% height, the background should not scroll.
Take a look at this web site. They're essentially doing what you want. They have an SVG gradient as the background. As you resize the browser, the gradient adjusts to fill the entire window.
http://emacsformacosx.com/
They also have a lot of other SVG on the page, but the background gradient is all you need.