Can I make a div with a custom shape? I mean, I have a rectangular div by default, and a few shapes can be obtained by exploiting the border-radius property of the div, but what I am looking for is a semi-leaf shaped element, something like this:
The picture isn't all that great, but that's what I am looking for. The elements in the div should be placed in this shape. How do I attain such functionality?
I am not just looking for just a shape, but an element which is shaped this way which could hold more elements.
The major issue I am facing if I use border-radius as the solution is that, I have floated images inside this div, now if I use border-radius, it is either clipped as in Firefox or overflows out of its border as in WebKit browsers. How do I get this content to strictly be inside the shaped div?
Regarding the shape of the div, you can achieve that by tweaking the radii of the border angles using the CSS border-radius property:
width:25px;
height:200px;
background-color:#333;
border-top-left-radius:50px 200px;
border-bottom-left-radius:50px 200px;
-moz-border-radius-topleft:50px 200px;
-moz-border-radius-bottomleft:50px 200px;
Easy working solid div demo: http://jsfiddle.net/AlienWebguy/83scc/1/
Doing it with just a border on a single div will NOT render well on a Mac - for example, if you just have a white background and a black border, the border will "cut out" and then "re-appear" due to the poor calculations of the Bézier curves and fill-ins. With just a background color (in the demo) it looks great. You could easily double up your divs, one white, and one 1 pixel larger black which sits underneath it, like so:
Working outline example: http://jsfiddle.net/AlienWebguy/83scc/3/
As far as the contents of the div, they won't naturally be positioned in such a way to compliment this shape, so you'll need to give them absolute positioning and give the parent an overflow:hidden; property.
Short answer: no. A div can't do that for you. At least, not across all browsers. It is, and always will be, a rectangular element at heart (even with rounded corners).
If you want to draw something like that, you can use the cool new canvas tag and whip up some javascript magic. If you're looking for something that will actually hold things correctly (with padding and all that), then take a look at this: Polygonal Divs -- Making content overflow in a specific shape?
I asked the same question a while ago in a slightly different format. It has some good answers.
You can use percentages, to make it adjust to different sizes ;)
Try resizing this (in a browser that supports CSS resize) http://jsfiddle.net/leaverou/XHbhr/1/ and observe how it changes to match its dimensions with no JavaScript whatsoever :)
Look at mozilla's documentation about border-radius, they have pretty good examples:
border-radius
Related
I am trying to find the top and left coordinates of a background-image that by applying some CSS rules has been shifted off the viewport. Difficult to explain in words, here is a visual example:
Black box: Viewport
Red box: <div> with a background-image
Blue box: <div> containing an <a>
When I do getBoundingClientRect of the <div> with the background-image, I get 0px 0px. It makes sense, because the container is within the viewport, and it starts at the very top and left.
However, the background-image of that <div> has been shifted to the left (and it could have been shifted to the top too), and therefore the coordinates should differ from the ones from the <div>. So my question is:
How would I READ (I don't want to change) How can I find the coordinates of the green point in any page that is facing this situation? I mean, the browser must have known how many pixels it needs to cut the background-image, right?
I am currently using Javascript to access the Web/Dom API. I am willing to use anything (undocumented maybe?) to achieve this.
Here is a solution to your problem that works on modern browsers.
var testNode = document.getElementById('test');
var testBackgroundPosition = getComputedStyle(testNode,null).backgroundPosition.replace(/px/g,'').split(' ');
As you can see from the following page not all web browsers support this method.
http://caniuse.com/getcomputedstyle
There is no answer to the "Cross-browser (IE8-) getComputedStyle with Javascript?" question yet and I don't know another solution to this problem.
Without getComputedStyle() there is no reasonable way of getting the current style settings for an element since that requires going through all of the included CSS. It is possible but involves CPU intensive code. If you were to go that direction you will be able to create a temporary div inside the existing div with relative positioning, possibly setting top and left, or margins, to the values from the background position and then calculate where the div's clientTop and clientLeft ends up which may work in some cases.
There is a css property for that: the background-position. Try the following code to retrieve the information asked for:
$('#divId').css('backgroundPosition');
Is there a way to create a real circular div so overflow:hidden can hide everything in the div outside the circular region?
I tried using border-radius, -moz-border-radius, -webkit-border-radius but overflow:hidden only hide things that's outside the square/rectangle region. border-radius is indeed only giving an illusion of a circle.
Then I figured I could create a PNG image with a transparent circular area in the middle surrounded by opaque "background-like" region to hide things outside the circular region, but once again it is yet another illusion and it would be useless when the background is not static but changes accordingly to the screen width & height.
So how can I make a real circular div? By CSS or JS means?
Follow these links may be it helpful to you http://www.css3.info/preview/rounded-border/
http://border-radius.com/
http://www.w3schools.com/cssref/css3_pr_border-radius.asp
Thanks for the comments from you guys.
I just figured it out. Beforehand I've only set border-radius, -moz-border-radius, -webkit-border-radius without setting border:1px solid [color] thus resulting in the formation of a circular region without overflow:hidden working properly. Yet another weird behavior of CSS3.
How to create such (see image below) effect using pure HTML JS and CSS?
(source: narod.ru)
For a site backgrownd (And I hoe that because of JS CSS and HTML it'll be able to change colors)
Well, this can be done with CSS Gradients.
But, i am not sure if that is supported in all browsers.
For cross-browser support, use this library.
You need a different approach.
Check out this url: http://www.eyecon.ro/colorpicker/.
As you can see when you move slider up and down it changes the background of the picker div.
But if you inspected this DIV with Firebug, you would see it is always using this image: http://www.eyecon.ro/colorpicker/images/colorpicker_overlay.png
..because parent div is using the actual colour:
<div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div>
Try to replace this background value in firebug, set it to green for instance - you will see gradient is still there, but this time gradient is green.
And that's our trick. Create semi-transparent PNG image to use as a background, with the pattern you showed above. Put it on top of the solid-colour background, and when you change background colour it will look like you replaced background image.
So in the theoretical code:
body { background:red; margin:0; padding:0; /* make sure overlay can stretch 100% in all directions*/ }
#background-overlay { background:url(path/to/image.png); }
<body>
<div id="background-overlay">
..content goes here
</div>
</body>
The downside of this approach is that IE6 doesn't support transparency for PNG files. You could either use some sort of png transparency fix or ignore this effect completely for IE6 users. (as we don't care about their feelings anyway, right? ;-))
Still in my humble opinion this is the most proper way to achieve the effect you want, knowing you would want to change background colours later.
I think this may require an image (which could be set through CSS to the background of whatever container you wish to put this in), but I don't think you'll be able to do this with pure scripting.
Technically speaking you can change your background-image using CSS. Getting it to tile properly left to right means creating the image at a width which makes the borders between horizontally repeated (background-repeat: repeat-x) images seamless, so that it will look like each diagonal line picks up on the left side where diagonal on the image to the right leaves off.
I'm designing a page that has a Content Area which scales against a diagonally striped background.
The Content Area div is a fixed width that will scale vertically with content. Because the border is a drop shadow, I have a repeating background image (40px wide by 80px high) that has to line up with the page background image. I need the div to scale in multiples of 80px high so that the repeating backgrounds concur with each other.
Is there an elegant solution that will allow me to scale the Content Area div so that it always displays at a multiple of 80px high? If not, is there another approach I can take to solving this problem rather than scaling the div to a multiple of 80px?
Thanks in advance!
Ryan
Unless you absolutely need the drop shadow to appear in older browsers, you can generate it with the CSS3 box-shadow property instead of using an image. This is much more flexible as the shadow is generated by the browser and will fall nicely on the background regardless of how things line up.
Jimmy's idea is solid, assuming the browser supports this css property. Another, weirder idea to consider might be to have jquery insert a div into the DOM that has fixed positioning and is offset to your content div and a z-index that would put it behind your content div. Then you could this new under-div an opacity (you can use fadeTo but maybe there's something better). Basically give the content div a real shadow by having an identically sized div underneath with 50% opacity.
why dont you leave the stripped background out of the content areas and use a transparent png for the images that will use a drop shadow. Since you're already trying to use javascript to fix a css problem, why not use DD_belatedPNG so that the alpha transparency will display correctly in IE6
I want take a section of a picture, for example the middle of a picure, and repeat only that section in the background of a div. Is this even remotely possible? I suppose I could do this in javascript, but that would be messy.
In theory the answer to my question should be able to take a single pixel from a picture and repeat it in a line, or as a solid background.
Does anyone have any idea how I could do this in CSS?
You might be able to achieve this effect using the CSS3 border-image property.
Unfortunately, I am not aware of a way to do this sort of thing in CSS2. Also, I don't think that you can do this via CSS sprites, because sprites don't stretch parts of your image—they just allow you to show certain parts of the image.
Steve
Contrary to what some here have stated, depending on the image, you CAN do this with CSS/Sprites. But that isn't always going to be the case. It comes down to the image you want to repeat, it's height/width in relation to the sprite it exists on, the direction you want to repeat it, and the size of the container you want it to repeat in.
(source: sampsonresume.com)
This sprite could be repeated on the left 100px for use in a sidebar, while the other portions could serve as buttons and roll-over states in a navigation. with a small change, you could make the repeatable portion horizontal.
If you want a cross-browser solution, then currently you're out of luck, especially if you want a CSS-solution.
The only way to do it with JavaScript would be through the canvas element, but that's not supported by IE.
CSS cannot do this. You can however do it server-side or by using SVG graphics or Flash. Note that doing it with a plugin would not technically be a 'background-image", you'd need to position your content over the top of it.