I have been looking for this for a while:
There are a ton of ruler extensions for all the common browsers but I can't find one that has a magnifying glass. Can anyone help me out please?
I'm talking about a magnifying glass like the Awesome Color Picker extension in Chrome:
The ruler extensions I've used really hurt my eyes when trying to measure anything to pixel precision.
Any browser is fine with me.
Note #1: This is not about seeing the width of elements through 'inspect element'. I need to find the precise number of pixels between any two points on a web page.
Note #2: Zooming in the browser doesn't do it either because some of the pixels change when I zoom.
Thanks in advance!
I am not sure if this is what you were looking for, but it might be worth checking out. It has zooming in on pixels, up to 3200%.
http://matthiasschuetz.com/pixelzoomer/
It's a FireFox add-on. I am not affiliated with the add-on at all.
Check out xScope from IconFactory. http://xscopeapp.com I use it all the time for development layouts. It's got several tools, including rulers, guides, a tool for dynamically measuring elements, and a loupe for viewing an enlarged part of your layouts. It's not a browser plugin, but I find that this makes it actually MORE useful.
Related
In Opera Dragonfly (the Dev tools used in Opera Presto), there is a tab called Utilities.
In that tab, you can "take a screenshot" which loads an image screenshot of the current page into the dev tools.
You can then zoom in/out and use the color picker and the ruler (with sizes being scaled appropriately to the zoom).
This is very useful when cutting markup as it makes it easy to measure spacing, elements, etc... accurately by zooming in.
I'm looking for a similar extension / tool / addon for Chrome / Opera / Firefox that allows me to measure using a ruler when zoomed in but haven't found anything.
Does anyone know of anything that may help?
I've found PixelZoomer for Firefox (https://addons.mozilla.org/en-US/firefox/addon/pixelzoomer/) which fulfills this need.
It allow to zoom into a screenshot made, measure pixels and pick colors.
I am trying to find the best method in order to create a horizontal website, full screen and if possible responsive, minimum width to be for tablets. The thing is that I need also the horizontal scrolling with the mousewheel, and I saw that fullPage.js doesn't support that or at least i couldn't manage to make it work on this plugin.
Anyway, I need an idea on building the template, with full screen sections displayed inline - I will be very grateful for any tip. Thanks.
Making horizontally responsive is bit tricky and requires a lot of effort.. There can be many many design approaches for making it responsive. It can't just be described with JSFiddle snippets..
However, I have something for you that will definitely get you started with "Horizontal Responsive Layout designing"..
This is must guide / tutorial for people who want to get started with Horizontal Responsive approach
http://tympanus.net/codrops/2012/04/02/responsive-horizontal-layout/
you could use one of the tools listed in the following links
http://www.cssdesignawards.com/articles/15-excellent-jquery-plugins-to-spice-up-your-sites/44/
http://jquery-plugins.net/scrollit-js-jquery-plugin-for-scrolling-pages
or you could also mix raw js/jquery with anchor links and add animations when clicked. in taht case you can scroll down using mouse wheel and also have fancy animations when a link is clicked
regarding responsiveness use css media queries
I want to use After Disaster font on my website, but I can't achieve the same vertical position of displayed text in different browsers. Even more - it is dependent on system too. You may test this:
http://jsfiddle.net/z7rby/1/
On Linux Google Chrome displays text about one pixel higher than Firefox and Opera. On Windows Google Chrome displays it in the middle of background. What can I do with that?
There is no way to solve this problem. You have to accept that fonts will be rendered slightly differently on different systems, and find another way to achieve your visual goals.
You can control your layout via positioning CSS e.g. width, height but not font rendering.
If that level of control is not "good enough" then you can write browser-dependent CSS (tutorials exist online) to compensate for differences.
But please remember the goal in all computing is "good enough": Perfection is not cost-effective!
Once you have achieved a level where further improvements require a certain effort, but there are more important things to spend that effort on, that is the point when you have finished.
I can't find any free thumb icons for voting like the ones here http://www.99points.info/wp-content/uploads/2010/07/youtube.jpg. Everything I find is too colored or detailed. Does anyone know a good website where I would find such icons or an icon set?
Chances are www.99points.info bought or found the icons as well. Very unlikely they developed an in house proprietary set. You might consider contacting them to find out where to get similar icons.
why don't you just make a screenshot copy/paste and save as png?
UPDATE: you can find a lot of good icons using http://www.iconfinder.com
Here is the original image..
That's the youtube one at least. The one you want.
Since long time i been having a real problem with the different ways that each browser display text.
Sure you have noticed that even when you create a stylesheet specifying everything about the font properties, still every browser display the same text with some differences, the usual problem is the font weight, that even if you specify it different browsers display it different ways.
I would like to know if some as come with a solution. Not turning the text into a image.
Thanks.
EDIT:
This is a example of the problem. On the left Firefox and right IE. However i have defined in the CSS font family, weight, size and still they render the fonts different.
Snapshot
Do you mean that on one browser its bold and another one its normal? A reset should fix that, but if it doesn't, it might be something overriding that.
If you're talking about fonts looking different, it is possible - for example, since Google Chrome / Chromium sandboxes the renderer process, the font rendering won't be affected by other parts of the system, and I believe that it uses some sort of special font rendering. To be honest, on my Linux install, I do get bolder fonts on Chromium, but Firefox displays them fine.
There's SIFR (as pointed above), but it needs Flash and it is a bit heavy. There's also Cufon http://cufon.shoqolate.com/ that uses Javascript. Could you show a screencast so we know what's the problem? Thanks.
SIFR is a good solution, as long as you're only trying to control the appearance of small chunks of text (headings, design elements, etc.)
Beyond that, browsers are perfectly allowed to render text any way they want, and getting it pixel-perfect between browsers and operating systems is usually not even desirable for larger chunks of text. Users will have different accessibility settings and anti-aliasing settings which are tuned to the way they want to read text, and in general websites should try to respect that.
You can use SIFR.
Although this problem is already about a week old, here is a solution that I found, that might be related:
http://blog.wolffmyren.com/2009/05/28/jquery-fadeinfadeout-ie-cleartype-glitch/
If you're not using jQuery, try removing the filter attribute from the elements that are displaying non-Cleartype'd text and it should work, according to that blog post.