I've never created a custom cursor before, and I'm having a little trouble with it. Maybe I'm doing this completely wrong, but I tried opening up an icon in photoshop, and saving it as .gif and .cur, but it still isn't working on my webpage. Does it need to be a specific size like the favicon? How would I go about doing this?
My code in the css:
body{
cursor:url('cursor.gif'), pointer;
}
The image format should be icon (.ico). And the normal size should be 32x32.
But it depends on the requirement.
See the MDN Documentation on that. It says:
In Gecko (Firefox) the limit of the cursor size is 128×128px. Larger cursor images are ignored. However, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms.
Following image formats are supported:
Related
I have a web page with text and an image. I want to place the text very precisely over the image.
I have discovered that with the font I am using, when viewing the page on windows, everything gets shifted down by about 4px. On Mac, iphone and android, it is placed correctly.
This does not happen if I use Courier New as the font, so I know that the problem is the font, however I have no choice but to use this font.
Is there a way to compensate for this purely in CSS, or do I need a javascript callback to detect windows and add a class so I can deal with it?
first of all, I would try tuning ling height, if that did not work, then I think you need to edit the font itself, you can do that using this site: https://transfonter.org/, uploading your font file and convert it to the formats you use and the important point is to check this toggle button, it adjusts some properties in the font so it has similar experience on different operating systems
if that did not work, there is a program called fontforge it gives you the ability to change font metrics, for more info you could check this question
Font Rendering / Line-Height Issue on Mac/PC (outside of element)
I am using gimp designs to style my web pages. For some reason the dimensions are always off between chrome and gimp.
For example a div selected in gimp yields 200x450.
If I enter:
.some_div {
width: 200px;
height: 450px;
}
The div that shows up in chrome is always smaller.
Can I enable some feature in gimp to make the exact?
The number of pixels of an image in GIMP is exact. I simply can't be "off by 1" - the file save plug-in, for example, would crash, if it got informed the wrong image size.
Now...pixels as defined for CSS are not that exact - so, it possible the browser is off due to some settings or preferences (like ZOOM) - anyway, post a screenshot along with your question - maybe someone can get a better clue of what is oging on there.
Have you tried simply using another browser to check this issue?
Make a screenshot of your div in chrome and paste it into gimp, so you can get the exact size of it.
As you may know, you can make your own file input control using the (hacky) approach of positioning the file input over your custom button and using opacity: 0 on the file input itself.
The image below shows the intended design with the file input absolutely positioned over the browse button.
As you can see, the faux browse button is much larger than the one the browser (Firefox 4) has drawn.
If I increase the width of the input, it seems to reach a limit where it won't increase anymore.
Here is a jsFiddle to play with, demonstrating the problem. The real browse button should be the same size as the faux one.
Is there a way to pull this off, or must I use Flash or make the button smaller?
font-size:70px;
http://jsfiddle.net/rH5SY/9/
I want to style some fonts in my css using the style- sharp found in Photoshop. Does anyone know the way?
Photoshop uses a custom font rendering engine which you won't be able to emulate using CSS. Furthermore, each platform has its own rendering engine which CSS cannot control.
For WebKit there is -webkit-font-smoothing but what it does is a far cry from what you're looking for.
No luck I'm afraid. The only way I know of (perhaps someone knows otherwise) to achieve this is to save the text in question as an image. Fine for headings etc., but not for body text.
The "sharpness" of a font is usually a thing of the font renderer which is part of the operating system. You should check the font settings. In Windows, for example, try turning off ClearType.
I'm afraid it's a browser/os combination that decides how your fonts are anti-aliased. Nothing you can do about it, except save the Photoshop output as an image, set it as a background for whichever container your text appears in and apply a negative text indent on it via css.
There is solution for font smoothing.
You can use cufon.js to render your font sharply & smoothly. This js renders your text as a cufon and if you right click on it it shows image. You can use this for heading.
I have an image that I use many times. In several cases I want to shrink its size, but obviously it loses sharpness when I do this in HTML.
Is there a way to fix this? The image is located elsewhere and I can’t save it locally.
Thanks
As dheerosaur states, SVG graphics can be used when you need to have the same image in multiple sizes but don't want to compromise quality.
Another thing to do is use an online service, such as Resize.co. You pass them the URL for your image file, the attributes and they take care of everything else.
You cannot control the way the browser renders images when they are resized. Images will look better when being passed through Photoshop's filters (or those in another tool) upon resize.
There is three way that I know to reduce an image file size in bytes :
Convert the file into a format using lossy compression algorithm such as JPG. Obviously the image will lose sharpness
Convert the file into a format using lossless compression algorithm, like PNG. Only works if the image contains lots of region with flat colors
Resize/resample the image using Photoshop or GIMP. If the new image dimension (width x height) is exactly the same as the displayed image's dimension in HTML, then web users will still see a sharp image
Firefox and Internet Explorer actually do have CSS properties that adjust the way images are rendered when resized via HTML attributes or CSS properties:
Firefox: image-rendering
Internet Explorer: -ms-interpolation-mode
These won’t work in other browsers, and may not work great in all (or any) versions of IE and Firefox.
But it might be worth experimenting with them as a fallback in case resizer.co causes any issues.