I have a <table> that I would like to overlay a circle on and have everything outside of the circle be blurred. The circle will change position based on a function, so it needs to be dynamic. I know how to do this with an image, but this needs to be a table. I have used the following CSS, but this will only let me blur an entire cell.
-webkit-filter: blur(10px)
The two options I can think of would be to overlay some sort of svg that is made up of a square and a circle and blur the space between in the edges (is this possible?), or to apply some sort of blur gradient to the cells that meet the edges of the circle.
Any ideas would be greatly appreciated.
Here is an example of what i am trying to accomplish. http://i.stack.imgur.com/f5EqT.png
It's possible to do something like this, but it might not be as straightforward as you were hoping.
JSFiddle Example
My technique involves cloning the entire content area, and overlaying it exactly on top of the original, but only revealing a portion of it.
You can clone the area through javascript (jQuery's .clone() works nicely), or you can simply include all the markup again in your HTML, but for a table this large, that's not very efficient.
To reveal only a small circle of it, I placed it all inside of a div element that had overflow: hidden set, so all the overflow gets cut off.
The tricky part comes with keeping that overlaid position right where it needs to be.
In my example, I have the circle move to follow the mouse. By default, both the circle, and the cloned content are absolutely positioned to the top left of the original content, allowing it to line up, but as my circle moves, the content moves with it, since it lives within the circle (setting overflow: hidden causes the circle to act as it would with position: relative, containing absolute positions within).
So, to compensate for this, I always move the cloned content an equal amount in the opposite direction as the circle is moving.
Then it's just a matter of blurring the original content, whilst keeping the cloned content crisp.
I hope that helps!
Related
I am trying to do this fun resume site and am stuck with the backgrounds itself. I have 3 backgrounds in all: a picture with a mountain and some sky, another picture with just the mountain cut out, and a nice little Easter egg hidden in between. I made the front and back layers scroll-able, and the middle one fixed, so the little dickbutt hides behind the mountain when the user scrolls down.
But the problem is, the dickbutt image is somehow not positioned properly even if I manually positioned it in Photoshop before saving it as an image. So I used the background-position tool to set it right, and it's all right now, except, it is so just for that specific browser size. In the mobile view, not only is the background not centered on the mountain peak, but the dickbutt is way off with respect to position.
TL;DR: I want to position one of my multiple backgrounds with respect to one of the other backgrounds, but instead it is getting positioned with respect to the viewport. What should I do?
Here's my code: (github link)
I want the page to look like this:
There is no way to position of images with respect to other background . but you can achieved your task with multiple div having multiple background and arrange them using position absolute and z-index
I've got a line of text that gets revealed when a dropdown arrow is clicked. However, certain pages of the site I'm building have divs that extend beyond the single line of text I'm hiding.
Here's an example:
The green div (ordinarily white) needs to overlap the div above (blue body with orange margins). My goal is to cover up a link that will sit 15px beneath the arrow under the word "Bukau", leaving the text to left unaffected.
I have a hunch the solution I'm looking for might involve making the 'green' div fixed/changing z-index values.
I also want to make sure the green block acts like an extension of the content below it, getting pulled up/down when a user clicks the arrow toggle.
Appreciate any advice/suggestions!
Solution: Simple as making the top-margin on the 'green' div -50 or so pixels, and setting its position to 'relative'
What I am trying to do is similar to an image map - in reverse. I have a large image (over 2000x2000) and want to give links to coordinates on the image. There are items in the image that I would like users to be able to jump directly to with having to scan over the whole image manually. Is this possible with either CSS or HTML by adding links to coordinates or adding anchors to the image? I would use js if that was an option as well.
Interesting. The notion of jumping to a position on a web browser window is limited in general. Here are some general possibilities, without specific implementation details:
You could treat it as a sprite image, and use JavaScript/jQuery to change the image coordinates so that the point of the image you are interested in moves to the the top left of a div positioned on the page. But the portion of the image above and to the left of that point would not be visible.
You could define it as a background image in a div, and define an invisible table or invisible fixed-position divs within that div, and link to specific divs or cells in that overlay. In this case, a y-coordinate in the image where the div or cell is positioned would probably move to the top of the browser window, but horizontal positioning would be problematic. If the div or cell you target is off the screen to the right or left, the page would shift to expose it, but I don't thing that you could guarantee where the specific x-coordinate would be positioned. Also, if the target is near the bottom of the web page, that target point will not move to the top. But this solution wouldn't require JavaScript/jQuery - it would just mean linking to element ID's on the page.
This is almost the same as #2... You could overlay the image with divs and/or a table at higher z-levels, and link to those divs or table cells.
You could use JavaScript/jQuery to position a fixed-size div with visible borders so that its upper-left corner is at the position in the image that you are interested in. I think you'd still have to link to that div in order to make sure that it is visible in the current viewport.
You should be able to lay out a form over the image and move the cursor to fields on the form. I think that the form could be transparent so that the cursor appears to be moving around on the image. But you'd need be confident that the data entry cursor is sufficiently visible on top of the image to be useful.
I have applied the following tutorial in a JavaScript script:
http://www.html5canvastutorials.com/labs/html5-canvas-interactive-building-map/
It works like a charm in most cases. Whenever I scroll the entire website, everything goes well, hovering over the shapes works perfect.
But whenever I make a div inside the website scrollable with the shape in it, the visible shapes do stay in place (with visible shapes I mean what you're actually seeing), together with the picture, but whenever I hover, I have to hover lower whenever I scroll down, as can be seen on:
http://i45.tinypic.com/28cn7ur.png
(notice the position of the scrollbar and the position of my mouse relative to the blue shape above it)
The div in the center is positioned relative, and within this div I have a canvas-wrapper div (also position relative) and therein the canvas itself.
What is causing this problem?
I was using kinetic version 3.8.2, upgrading to version 3.10.4 fixed the problem.
I'm working on an HTML+Javascript Page flip effect.
I want this to accomplish this without the HTML5 Canvas element so that I can use this with text/forms etc.
This is what I have hacked together so far(webkit browsers,im using chrome 12):
JSFIDDLE: Page Flip
Preview:
What I want to do is not show the regions of the red rectangle outside of the blue rectangle.
My problem Lies in the MASKING / CLIPPING of the overlapping region (the purple area).
I tried to embed the page (red) div within the mask (blue) div and set overflow : hidden
but the problem was whenever the mask (blue) rotated, the page (red) rotated as well and the calculations were leading nowhere to correct with an offset.
Are there any other ways I can clip this region?
You have to calculate and implement counter rotation for the inner div to offset the rotation of the outer/masking div. Here's an example from our Sencha Animator demos:
I'm sure you've seen Roman Cortes's original CSS pageflip - whose method we copied for the demo who uses a common fixed rotation point for both divs.
If I understand the question properly, you want to have the (blue) div above the (red) div? If that's correct then add a z-index property to both and have the (blue) div z-index higher than that of the (red) div.
Update: It may be worth looking into the CSS clip property because your (red) div is already positioned absolutely. The only problem then would be that your (red) div, I believe, would need to be inside of the (blue) div.