I have to prototype a bulb shape (even an ellipse would be fine) vertical slider. I started with using http://jqueryui.com/demos/slider/slider-vertical.html and changed the shape of the parent element to the desired (ellipse for now) shape. The problem is that when I drag the slider it grows in rectangular manner and thus, doesn't take the elliptical shape (as it's parent element).
Can you please suggest if there is a better way to achieve this. If this is the correct way then how should I mask off the color from the edges so as to make the slider background elliptical too.
For reference to the problem: http://share.axure.com/UMILTD/
I would recommend achieving this effect with the border-radius CSS property. You can set the border-radius of the parent to create the shape and then set its overflow to hidden to keep the rectangle behind it from showing through.
I have a live example of this here - http://jsfiddle.net/qUbZf/3/. There does seem to be some issue in Chrome with how the overflow is handled, but it looks fine in Firefox and IE9.
IE < 9 do not support border-radius, but the shape will simply fallback to a box and will still be usable.
Related
I'm trying to achieve a metaball effect by blurring svg's (CSS Blur), then applying CSS contrast to the parent div to get hard edges back. Below is an example. For some reason, the filter does a weird thing on the edges.
I believe i would need to first extend the div to be bigger than the viewport, but some elements are dependent on VW and would therefore scale in an unexpected manner.. Anyone have an idea of how to expand the filter past the viewport edges?
Don't really know how to approach this, i would like the blur to extend past the viewport but retain current layout.
EDIT:
Needed to add white background to container div to make the contrast behave in the way i wanted. ( not go crazy on the viewport edges)
The effect I want to achieve is an image in a div that has a coloured highlight on top (with some opacity to see through it) and when you hover over that image a certain radius around the mouse will have the highlight removed (think of shining a torch over a greyed out image to reveal a brighter around around the torchlight)
I don't know where to start with this because I wasn't sure about dynamically styling a portion of a div without setting proportional properties in css. I know i can achieve a 'blocky' version of this with on hover and styling sections of a div on hover but that means i would have to constrain the styling to seperate div elements and it would not be 'fluid' so I'm looking for some pointers to a js solution I can write (possibly on mouseover call a function that gets mouse position and gets radius around it but then I wasn't sure how to dynamically style that radial area?)
Are there any functions that allow this type of styling within a dynamic area?
The solution you're looking for might be achieved through CSS but using JavaScript mouse events can also help.
Like discussed in the comments section, you can use help of the mousemove event to somehow achieve what you desire.
For other users reference, here is the link to the codepen https://codepen.io/edupoch/pen/GIhJq
In the codepen above, instead of the zoomin cursor image, you can use some gif image with the effect you want and apply it using the above code.
I'm working with svg files and some processing.js code to create a homepage.
It has some animation and static elements but the idea is to have everything the same but with different colours - Like an alternative homepage. I want this alternative to "peek" through as the mouse moves around. Only a small area around the mouse.
Does anyone have any idea how to do that?
since it isn't an image file it's a bit tricky.
I tried doing it by using the an image and the "drawing" element of processing.js thinking it could paint the alternative homepage, however it repeats the image everywhere the mouse go and what i want is for everything to remain in the same position only show the different colours in that spot.
You might consider superimposing two versions of your site, the "top" one completely covering the "bottom" one (make sure all backgrounds are opaque). Then you could try applying an SVG mask to the top page, making it transparent at a specific area and causing the bottom page to shine through. You could modify the mask as the mouse moves.
The other way round - i.e. clipping the top layer - is also thinkable.
I see the risk that this approach is slow and not consistent across browsers - you'd have to give it a try. Speed may differ depending on whether you clip/mask the top or the bottom layer.
W3C SVG Clipping, Masking and Compositing specs
MDN page on clipping and masking
MDN page on applying SVG effects to HTML content
If one version of the page can be converted to other by swapping out colors, SVG filters might be an option as well.
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
Google has the coolest effects - once it was a Pac-man game, today is apparently the 160th anniversary of the first World Fair, and Google's logo has an image of it. They also turn the mouse into a magnifying glass that can sweep over the picture (the gold ring).
I'm wondering how they do that. It's obviously Javascript, and I looked at the page source, but it's not especially readable (no surprise).
Looking at their source code, it seems they are using rather basic techniques to achieve this.
Ignoring all the embedded nifty animated gif's, there are basically two images - large, and small of the entire scene. The larger image is repeated thrice in the document. Look at the annotated image below to get a better idea of how the zoom works.
The portion inside the magnifying circle is split up in three div's - top, mid, and bottom. The overflow for each div should be hidden. Each div is relatively positioned inside the zoom circle. On mouse move, change the absolute position of the zoom circle to the mouse coordinates. Their example also uses CSS3 for the scaling and adding some animation delays.
Here's a sorta minimal reconstructed example.
Another example where we don't hide the div overflow to reveal the entire thing as a square.
Well, firstly, for anyone who wants to use such an effect, there are loads of jQuery plugins. Here are just a few:
Power Zoomer
Featured Image
Zoomer
Cloud Zoom
Secondly, it's quite easy to achieve. Just load the full-size image, but give it a width smaller than it's actual width, so it is scaled by CSS. Then, use JavaScript+CSS to create a Div (the magnifying glass) with the same image as background, but change the background-position property to the corresponding scaled x,y coordinate that the user's mouse is currently on.
There are other ways of doing it I suppose, and Google might be doing it differently, but this is the most obvious way for me that comes to mind.
Visit http://codeblab.com/glass/ for an real life example and in depth explanation of this technique. Flash and CSS v3 have ample functionality to construct a round magnifying glass.
However, simulate-a-circle-with-overlapping-rectangles works on (many) more platforms.
(DISCLOSURE: codeblab.com is my personal hobby blog with some weak links to my work in The Netherlands.)
There is a full example of magnifying any sort of HTML, including HTML5 at http://www.aplweb.co.uk/blog/js/magnifying-glass/. Works cross-browser too - although rounded corners are a bit iffy on most browsers - so you are going to have to use a box rather than circle.
Here is how to works:
Duplicate the content you want to zoom
Place the duplicated content into another element and set the visible width/height and overflow hidden
Use JavaScript to move the duplicated content so that it moves by the zoom amount * mouse movement. Also move the visible div by the mouse movement.
That is pretty much it too it. There are lots of little things to look out for though to make it work on all browsers.
I don't know how Google does it, since the logo is no longer showing in my area; but this effect can be achieved by clipping the enlarged animated GIF over the regular image using canvas. Alternatively, it is also possible to create create a circular clipping using CSS border-radius (commonly used to implement rounded corners).
EDIT: I've hacked this up together to show the basic technique that you need if you used CSS border-radius: http://jsfiddle.net/yjBuS/
Looks like they're using two images, one for the logo and one for the zoom (the zoomed one is actually sliced, to run the animations separately...?) They probably detect if the mouse is over the normal logo, then show the yellow circle and attach it to the mouse position. Then showing the other image, shifting it opposite of the mouse. Or something similar.