How to hide square image (90 degree corner) behind a content cox with border radius.
This is for iPhone mobile app.
align top http://www.kerrydeaf.com/corner.png
I had this problem when the border-radius property was first announced by the W3C. You've got to solutions: first, use background-image to set the image as your div's background.
Second, would be using <img class="my-class-rounded-corners" src="myimage">, appending a class to an <img> tag rather than a div, then setting rounded corners as a property of that class.
Related
For reference, please see this website.
I want to use the faux columns method to ensure the blue background of the #secondary sidebar extends to the bottom of its parent: #main.
However, when I use Firefox Developer Tools Responsive View, and reduce the width of the viewport, #secondary's width becomes a %, but #main's background image remains fixed, so the blue part of the background image bleeds into the #primary content area.
I once read an article where someone used the faux columns method and was able to set the position of the background image to scale down when the viewport was scaled down, so that the colour change of the background image always lined up with the right hand side of the #secondary sidebar.
I am aware you can set the background-position to a %, but this matches a specific point x% in from the left of the image with a point x% in from the left of its parent, so it always stays in the same position regardless of what % you specify.
As kangaroo has written, the solution was to set:
background-size:contain;
for #main.
This CSS property is supported by IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.
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 have an anchor within a div overlaying all the contents of the div. The problem is that IE8 is ignoring the link when you hover over any non-white-space (e.g. an image or some text): http://jsfiddle.net/jf7xf/
What CSS do I need to apply to what elements to make IE8 have the anchor overlay any sibling elements?
After a lot of experimentation, I have found that to overlay the anchor in IE8 I have to place an image into the anchor. I have used a 1x1 transparent pixel, set the width and height as 100% and it works! Yay!
http://jsfiddle.net/jf7xf/44/
I'm creating a website and I need to style some boxes like this image here. Although, their height aren't fixed for it's dynamic content I used -webkit-border-imageand -moz-image-borderand it worked perfectly. Unfortunately, IE is a bad bad guy and I wanted it to appear properly.
I thought about using CSS3 with box-shadow and -webkit-gradient and -moz-linear-gradient but again IE doesn't work.
I'd like to know some CSS technique so that I can have the gradient box and the shadows within a div with undefined size (I mean dynamic height and width)
Here is the possible solution :)
If the width is fixed, and the background is homogenous, this will work even on IE6:
Take the picture, cut out the middle gradient/white, make it transparent (the shadows should remain opaque), grey to white. Cut it into 2 pieces - the top part which can be stretched to any height without change to looks, and the bottom part with rounded corners (bg-mid.png and bg-bottom.png)
The top gradient part is also cut as a high, 1 pixel wide image.
Write this HTML code:
<div class="gradient-bg">
<div class="top-content">
your content
</div>
<div class="bottom-shadow">
</div>
</div>
Then, style them accordingly. Place the gradient image as the top div Background, the bg-mid.png as the top-content background (with repeat-x), and the bottom shadow - that's bg-bottom.png.
For IE6 you'll need to use conditional CSS statements, and filter CSS attribute to load images with alpha channel.
My CSS knowledge is very limited, so I'm putting my problem here hoping for the best.
I'm using this box: http://www.456bereastreet.com/lab/flexible_custom_corners_borders/ in my website, and I need to display content in two columns format.
I've attempted with the simple table, and using divs with float set (needed clearfix so the parent got its height). My problem is a visual bug that appears of the left side.
Only happens with table and div floated. p, h1, etc works fine.
Here is a picture of the bug: http://img18.imageshack.us/img18/8783/imagem2hdp.png
Thanks
edit:
Here's the code: http://dl.getdropbox.com/u/178438/css_test.zip
You should set a background color for .content this will hide that part of the border image.
--edit below--
The extra whitespace between the gradient and the border looks like an element is being pushed sideways, when it's really all part of the left border background image which is the second main div.
div // Right border
div // Top border with corner sub divs
div // Left border
div // Content
div // Bottom border with corner sub divs
Since the content part of the box is inside the left border div and the border background image is done sprite style with multiple images put together in a larger image the only CSS only solution to this is to apply a background color to the content area to cover the left background image (like the Left background div is doing to the right background div)
There are other ways to fix this such as separating the images out into separate files or moving the Content div outside of the Left border div, but at that point you aren't really using that same box anymore.