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
Related
I have div container with width 100%. I need to make a content hide and show according to mouse over in container. But this will need to happen with 30% from left of main container and rest(70%) with no show/hide effect. Can we make this effect without adding any additional sub containers?
An Image representation
How to make this effect?
This Fiddle illustrates a very basic solution; it calls the effect every time the mouse moves inside the 30%, so you might need to add some further logic to prevent that happening.
I've used a container of 500px width, and a subcontainer div, but only for illustrative purposes; the JavaScript will manage a single container of any width. You'll need to add any positioning, margin or padding to the 'widthModifier' variable, but you could get those from the container in JavaScript too, if you wanted.
Daniel's answer doesn't solve the problem showing and hiding the content. Take a look at my solution that does exactly what you want. I used CSS features to achieve the result.
Use Chrome to view the example. For other browsers you just have to add their specific implementations of the css features.
I'm wondering if it's possible to create a static lighting effect overlay using HTML/CSS.
What I have is a pure HTML5/JS app that consists on most pages of a top navigation bar and a series of cards in the body that are transitioned through using swipe gestures. These are all gray over a black background.
What I'd like to accomplish is have a sort of spot light gradient in the center of the screen that only effects the divs on the page and not the black background. This spotlight would be fixed so that when swiping through cards, it remains in the center of the screen.
I know I could overlay a div with a spotlight image as its background, but obviously that would mess up clicking/swiping on the page. And it would effect the black background.
Anyone have experience doing something like this?
A simple CSS solution (no events required)
Create a full-page-width bg image with the spotlight gradient.
Give each div this bg image, with a background-attachment value of fixed.
No matter where each div happens to be on the page at the time, it will act as a window through which you can see part of the spotlight gradient. In effect, the bg image stays fixed in place while the div moves over it.
Fiddle demo, and the same demo with heavily-rounded corners.
Alternately, it might be possible to give each div the same radial gradient in CSS (also fixed), rather than creating a static image file.
Try to use an absolute positioned div with a gradient. For passing through that div events use css property pointer-events (not supported by IE) or see that resource: http://www.vinylfox.com/forwarding-mouse-events-through-layers/
Sorry for the title, it's a hard issue to summarise. At the moment, I have a website which looks like this:
(as you can tell, it is inspired by Metro). I have uploaded it to jsfiddle here: http://jsfiddle.net/r46bY/4/embedded/result/
The div surrounding everything (represented by a dotted border) resizes to fit the user's browser window and I want the buttons (which are simply coloured divs) to do the same but can't figure out how. At the moment, they're in place using absolute positioning and based on a particular screen size. I would like them to keep the same layout but resize along with the container div.
I've experimented with liquid values in CSS, but I can't get the positioning right.
Please help.
Use only percentages instead of pixels for your dimensions (including margins). At resize you only have to resize the surrounding div, and the content should take the right dimensions.
I'm displaying a background picture with some semi-opaque div over it, so that it appears somewhat darker than it actually is. On top if it, I have a number of smaller, draggable divs.
I'd like the image to be completely visible, or revealed under these divs. These smaller divs should be like looking through windows to the below image.
One way to do it, is to set the background of each "window div" be a version of the larger image, and adjust the position to compensate for the div location. This works okay, but is kind of slow/jerky and very clunky.
Is there a better way?
Thanks!
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