Is it possible to have an iframe in the shape of a hexagon or diamond or anything other than a rectangle or square?
Or possibly even a div?
You could fake it with a CSS mask.
But portions of it will be obscured by it. You can't make the iframe render its contents inside of one of these shapes.
You could set an iframe shape (or, rather, an iframe container shape) to something oval farily easy, however the problem with a diamond/hex shape is that you can't set any html element to render in that shape in the first place.
You could try using a mask as alex suggested.
I think you have to use an image as a mask and then absolute position it
Depending on what browsers you want to support, you can use border radius, transparency, and other tricks to create many shapes in css.
No, it is not. There is no posibilites in HTML standard to do this. You can wrap iframe with DIV and get some effects like rounded corners only
Related
I'd like to create a scale with stars\flowers\whatever that will enable me to graphically present a fraction, in case of average grade (say 4.35). Is there a way to partially fill an empty non-rectangular image using CSS?
TIA, Matanya
If you are okay with using a div instead of an img for the image, you could set the image as a background in the div element, and calculate the width of the div, depending on how much of the image you want to show.
The calculation would have to be done through JavaScript, or server-side and then added inline on the div element, though.
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 was wondering what would be the best way to create a feature strip of background in a website layout?
The approach that comes to mind, would be to create an absolute positioned div with a z-index of -1 and adjust top/height to match up behind a fixed layout.
Is this a good way to go about it? Or is there a better way?
Thank you for any help! :D
A div containing an image placed behind the content is probably the best way to make a scaling background.
I think CSS3 also supports background scaling, but it is not widely supported.
A more semantic approach would be to apply the background strip to an element on the page -- in the case of your example, the "slideshow" element. This element's outer constraint (whether that be a div, a ul, or something else) can then be stretched to 100% of the width of the page, and the content of the element centered (or positioned as desired).
This approach would be more maintainable than some other approaches -- content could be added before the element without breaking the layout, the strip could be changed without much effort, etc.
Background scaling could be taken care of in several ways:
Make your background big enough that it isn't likely to ever be a problem.
Use a tile-able background.
Use CSS3 background-size property. A jsfiddle example is here. (Not supported in <=IE8, but with a little creativity could degrade gracefully.)
Put the image inside your div (or similar) and then use CSS to position absolutely, set the z-index to force below the content, and stretch the image to the width and height of the element. Here's a jsfiddle example. (Note: UNSEMANTIC! Reduces maintainability, etc. But does have better support than CSS3 background-size...)
Number of websites "cheat" : the site's background image already have the strip on it
It's simple and painless but it's static.
I am currently making a website here. And to the right is a postcode search div. The top corner of that needs to be rounded.
I am using images to round the corners. I do not want to use another method unless it fully supports all browsers, up until IE7.
I have already done this on the navigation (to the left. only top right and bottom left corners). But I cannot seem to get it to work for the top left corner. Please help. This may be a silly little mistake I have made.
If the "postcode search div" is fixed width and height (as it appears to be), the simplest solution would just be to do the entire thing as an image, and set that as the background:
(yes, the images are the correct size and colour)
The problem is that your background color is covering your image. If you remove the background-color property, you will see the corner image.
Take your image http://molossi.psm2.co.uk/assets/images/li-bg-tl.png and add in the grey background with it. Set the width and height of the entire grey background element to 225x120 or whatever you want and you will be good to go. Basically move from it being just the corner image piece to the full image.
If you don't want to do it this way then take your corner image and make it 225px in length with the grey extending out all the way.
There are two methods for creating round corners without using border-radius (CSS3) and without using images:
Use four small divs of height: 1px and progressively increasing widths that create the round corner illusion. This is probably the better option. For a code sample, see the following site:
http://webdesign.about.com/od/css/a/aa072406.htm
Use an HTA file and browser hacks. I've never tried this personally. For code samples and techniques, see the following site
http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
For older browser support using images is the best and probably only option. If you don't mind lower levels of browser support CSS3 Rounded Corners (in the CSS3 Boarders page of W3Schools) may have your answer.
I'm trying to position a transparent PNG over a SWF movie through CSS (absolute positioning). But when I position the PNG directly over the SWF, all click actions on the SWF seem to be disabled. The SWF is asking to use your webcam, but you can't click any of the buttons. Check this link for an example. You can find the CSS here and the png here.
It's like the PNG acts as a overlaying plane you can't click through. I've tried some transparent properties in both the CSS and SWF, but nothing seems to work. Any ideas/suggestions/experience with this particular situation?
Thanks
Your suspicion is correct: the PNG is in a layer that's sitting right on top of your Flash piece and you cannot click through it.
Since you're just using that PNG for rounded corners, why not try the following:
Create 4 divs, one for each of the corners
In your stylesheet, give them absolute positioning, your PNG as a background image with background-repeat set to "no-repeat", and an explicit height and width that's the exact size of your rounded corner.
On a per-corner basis, use background-position to slide that PNG background into place.
Set the top and left attributes for each of your corners to snap them into place. (Since div#corners has absolute position itself, they'll sit in the right place.)
Basically, turn your corners into CSS sprites.
EDIT: You'll probably still run into problems with div#corners having an explicit height and width and acting as a layer. In that case, you might want to scrap it entirely and absolutely position the corners wrt div#corners's parent Element.
Does it work if you set pointer-events to none in your css?
Click through a DIV to underlying elements
AFAIR you cannot give swf actions if it's under another object , upper object will get all the clicks , you should edit oryginal swf or consider different graphics on page