The ruler and the likelihood to attract auxiliary strains are indispensable options of Photoshop and different picture modifying and drawing purposes. Why solely Photoshop and such? Measuring distances and checking orientations by way of auxiliary strains might be useful on an internet site as nicely. RulerGuides.js involves your rescue. It provides a ruler with the talked about options to any web site by way of a bookmarklet.
RulersGuides.js: Options Recognized from Photoshop
To have the ability to use RulersGuides.js, the JavaScript needs to be arrange as a bookmarklet within the browser. As soon as completed it shows a Photoshop-like ruler on any web site when the bookmarklet is clicked. The models of the ruler are in pixels solely. This doesn’t shock you, does it?
X and Y Coordinates as Nicely as Width and Peak of the Drawn Rectangles
Horizontal and vertical auxiliary strains can now be drawn with the assistance of the ruler after which keep on with the web site. Extra options can be found from a menu. When utilizing auxiliary strains to measure distances, sizes and positions, the perform „Present detailed information“ could be very helpful. It exhibits the x and y coordinates in addition to width and peak of each rectangle drawn with the ledger strains.
Totally different Presentation Choices
By default, the rulers are tied to the higher left border of the HTML doc. Thus, the horizontal ruler disappears when scrolling down. The choice „Unlock rulers“ loosens them from their fastened place in order that they’re all the time seen.
It is also potential to fade the rulers and ledger strains in or out unbiased from one another. In fact, it’s also possible to delete all strains directly.
Aligning Auxiliary Strains with DOM Parts
The perform „Snap to DOM“ cares for a exact placement of the ledger strains. Right here, the strains are all the time aligned with the outer borders of
The post RulersGuides.js: Photoshop-impressed Net Design Helper Device appeared first on DICKLEUNG DESIGN 2014.
沒有留言:
張貼留言