I'm trying to replicate this (or something like it) on a Wix site:
https://www.dropbox.com/s/vvrddboc9me6g6t/RefractionImg.mov?dl=0
Or the "hello" in the top right corner.
https://www.andreburnier.com/
where the css:hover will distort the image, bending it towards the mouse.
I've seen a way to do it with Babel, but Wix doesn't have a plugin or access to babel.
I'm thinking a way could be something to do with an area map of the image with some sort of fish lens / skew() going on, but the
A push in the right direction would be much appreciated :o)
You can't do it with Babel. Babel helps you support old browsers, not create cool effects.
You should use BlotterJS. This is tutorial: https://www.youtube.com/watch?v=Ry7yksI595U
Related
I am really hoping someone can help me. I am trying to create a round menubar in CSS and I've searched and searched for solutions but have found nothing. I know how to create round areas (by setting the radius), and I know how to create a simple straight line menu using <ul> & <li> but, as said, I want to create a round one.
there is a picture of something alike what I'd love to get working:
If anyone could help me on this I'd be so thoroughly grateful.
Closest things I know of are these:
http://www.cssplay.co.uk/menus/cssplay-round-and-round.html
http://codepen.io/tgrant54/pen/lBHwK
Is that what you're after?
This menu looks almost like Path's Button.
You can find the link to Path's Button here.
You just need to modify it a bit so the menu displayed in full sphere.
This isn't something you really want to be doing in pure CSS.
You may be able to make circle shapes with border-radius, but you're not actually making a circular object -- it's still a regular box shape as far as the browser is concerned, just with the corners rounded off. This has absolutely no bearing at all on your ability to do anything else to do with circles or curves in CSS.
Yes, it's possible to do something along the lines you're after, by putting every character into its own element, and styling each of them with a specific position, but that's going to be painful, inflexible, and difficult to work with. If you really want to do this, there's a code generator you could try out here, but I'd say you're barking up the wrong tree.
If you want to do this kind of thing properly, what you really need to be thinking about is doing it in graphical format, using either Canvas or SVG, plus plenty of javascript code.
I'd suggest looking into a JS library like Raphael for this; there are people who have tried similar things already using Raphael, which may help you -- see here, for example: Radial Pie Menu With Raphael JS
Hope that helps.
I have an image and want to create a mouse over effect as soon on the following page:
http://www.zalando.de/roxy-pam-snowboot-winterstiefel-grey-ro511c00e-101.html
To see the effect, move your mouse over the "Auf den Wunschzettel" on the right side. How are those tings done?
Thanks!
If you want to do this the 'easy way', take a look at the jQuery plugin qTip: little link.
If you want to build this yourself, here are the stuff you'll mostly likely need to learn:
CSS Positioning.
onmouseover/onmouseout events.
The CSS display property.
Hope that's enough to get you started!
Note: this might be possible to achieve using CSS only, but it's more paradigmatic to use JavaScript for such things.
I'm new here and I didn't know where to ask this sort of question, so here's a go. I'm trying to build my new portfolio website, and I'm trying to make it so that in the background I have a cloud that moves from left to right on the screen in the top left hand corner and it wraps around the website when it goes off the screen. How would I go about accomplishing this?
I'm building my site on wordpress, and I'm using HTML5, JS, PHP and CSS3. I tried going about using the css3 #keyframes class to move the cloud, but it didn't work.
Here's a link to my site.
http://www.secret.irmattstenquist.com
Simila sites that do this :
http://vimeo.com/ <-- With the sun and the bottom footer.
http://jsanim.com/ might be a solution. Its a javascript library for animations and you can see on their site they like animated background clouds :)
Mac OSX Finder has a search feature that darkens everything but the part that matches.
(source: justaddwater.dk)
Is there a way to emulate it via CSS? I was thinking about adding a semi-transparent black div with opacity 50. But how then do I cut a hole in it?? and possibly make the edge fuzzy?
Any suggestions?
Check out the Expose jquery plugin from the jQuery TOOLS collection. I think it will accomplish exactly what you are looking for. They even have a demo of styling the mask with a background image.
Due to the irregular shapes, you're probably looking for an image. And due to the need for varying levels of transparency, you probably want a .png that would just be stuck over the selected item.
Good question, one way would be to have a "selected" png that had the glowing circle cover the selected one, and a different just dark png cover everything else.
EDIT: But you would probably want to use a library like jquery rather than coding everything from scrath your self, as to not reinvent the wheel and save TONS of time :D
maybe a PNG image will work, a square with hole
I would like to change the hotspot of a mouse pointer, which we've changed the icon using a .cur file, to be in the bottom right of the image, rather then the top left.
Pretty much like an inverted arrow cursor, the designers/boss have come up with a nice design which almost requires this.
Is it possible to change the hotspot of a mouse cursor on a web page?
I have not tested it, got it from developer.mozilla.org:
Support for the CSS3 syntax for cursor values got added in Gecko 1.8beta3; it therefore works in Firefox 1.5. It allows specifying the coordinates of the cursor's hotspot, which will be clamped to the boundaries of the cursor image. If none are specified, the coordinates of the hotspot are read from the file itself (for CUR and XBM files) or are set to the top left corner of the image. An example of the CSS3 syntax is:
cursor: url(foo.png) 4 12, auto;
Link to CCS3 cursor
It's not possible, and I'm glad - I think you'd only frustrate your users with this.
Edit: I was wrong - I didn't think this was possible - I still don't think you should do it though.
You can't. And as most people here I'd tell you to not do it even if you could...
However, I could imagine something like this for very specific cases like the page of some artist, or for a game cursor, or a sort of 3D-like map with the cursor pointing down. Now if you really need a special cursor for a media oriented site, as opposed to an information site, I'd hide the cursor, with a blank cursor file and use some Javascript to attach a floating image over the cursor so it "looks like" the hot spot is someplace else.
Of course your sites usability and compatibility will go way down, but the solution above is if you really need to take the creative liberty, and your users are open minded to this sort of stuff.