So I'm using Chrome and I really like their 'cursor: wait' style. I doubt this is possible but would it be possible to use as a background-image in a div, not on hover or where my mouse is? Or Is my only option to find the file and place it locally? The file seems like its a different file format so that would kinda complicates things.
It looks like it's using the OS animation (I get a Windows-looking spinner)
I dont know if its easily extracted from somewhere, but you can find something similar you can use however you wish from http://preloaders.net/
That's not chrome's cursor. It depends how are your mouse cursors set in windows. cursor: wait is simply telling browser which cursor should be showed when hovering over that element. Mine looks like this:
To use similar thing for background you would need a picture (can be a gif or you can animate it with CSS) and simple css.
.cursor-wait:hover {
background-image: url("image.png");
}
Related
I am making a website with some images inside. I have Imagus (similar to HoverZoom) installed so that photos are automatically enlarged on hover. However, I do not want that to happen to my images.
It seems to work for some and not for others and I can't see why? Both pngs, etc.
Is there some kind of CSS or HTML I can put it that will stop the zoom?
EDIT: I've also noticed that the images that HoverZoom/Imagus enlarge, are also the images where the CSS :hover doesn't work?
If you do not want any kind of actions happening when hovering over the images, you can add this, though I am not sure if it's exactly you want :
img {
pointer-effects: none
}
I think I found a way to stop it.
If you just resize and save the image so that it is exactly the same size as you'll show it on the website, then HoverZoom doesn't do anything.
From this website: http://waaark.com/ how is the elastic effect of the block elements achieved when you mouse past them? for example the pink and the blue block.
http://tympanus.net/Development/ElasticSVGElements/ <- this may give you a starting point.
By looking at that page with Chrome's built in Inspector, there's a <canvas> tag being used to render the effect. I'd imagine they are looking at a mousemove event and rendering to the canvas based on that. You could de-minify this JS file to work out exactly how they're doing it. http://waaark.com/wp-content/cache/min/1/e36c0a27f3c428762918cb2a4338507c.js
I'm trying to place a background image on this bootstrap site: http://rsatestamls.kaliocommerce.com/
But what happens, is that the background is behind everything. What I mean by that, is that there's some content I want to be -over- the background, but instead the background is everywhere. I'd just like for it to be on the sides and behind everything, not on top of everything.
This is what it looks like if I try using it: http://i.imgur.com/32cG2bw.jpg
This is why I'm using Bootstrap...I'm not great at design by any means. More of a Developer than a Designer.
So anyways, any ideas on how I can accomplish this? I'm looking for a similar affect to this background: gardeners.com
Just because I don't want to have a ton of whitespace.
What I've tried to do is add:
background:url("/images/art/AMLRWDBackground.jpg");
To the CSS, but that looks terrible. Any ideas? I'm not even sure where to start.
Thank you.
The way to do this would be to have all of your content in one frame with a css value of:
#frame {
background-color: #fff;
}
Once you have done this add the background to the body and it will work how you intend it to.
Is it possible to replace the cursor icon apart from these:
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor
with my custom image that I designed in Photoshop? I know this is possible because I have seen some websites with cursor having custom image. Question is: How do I do it and whether it is standard approach? Can I be sure that it works across all browsers?
Yes, just do...
cursor: url(path/to/image.png);
jsFiddle.
Try this: cursor: url(image.png);
Look paragraph 'Property Values': http://www.w3schools.com/cssref/pr_class_cursor.asp
Yes it's. when i have finished your cursor image, just upload it on a host website (there are many on the web) then use the following css property to use it. Supposing you want to use it on images, just do :
img {
cursor: url(path to your hosted cursor image) ;
}
I have a normale jpg-photo and 2 textlink. When the user mouseover textlink 1 I would like to show a transparent png-photo on top of the jpg-photo, and when the user mouseover textlink 2, I would like to show another png-photo on top of the jpg. On mouseout the png should disappear again.
Possible? And can it be done with CSS alone or do I need javascript to?
Thanks in advanced.
Yes it is possible with JQuery, JS or CSS, depending on your requirements.
Good script to use is here:
http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
You can use hover CSS selector to solve such kind of problems depending upon html layout of your page
#11:hover img {
display:inline:
Add other blocks
}
Your request can be done easily using the power of jQuery :)
I made something using jQuery and you can find it here
http://jsfiddle.net/xrmqq/
It is close to what you want to do.