CSS Sprite Generator & Ruler

CSS Sprite Generator & Ruler插件简介

This will generate a sprite Image by dragging and dropping Images & also measure the size of different contents on Websites. 这将通过拖放图像生成一个sprite图像，还可以测量网站上不同内容的大小。

Css Spite Generator & Ruler is developed for Front End Website Developers.

To allow it on File URLS, go the extensions tab,find CSS SPRITE GENERATOR and click on “Allow access to file urls”.

It performs two functions,

1. CSS Sprite Generator.
2. Ruler.

What is CSS Sprite?

An image sprite is a collection of images put into a single image.
A web page with many images or icons can take a long time to load and generates multiple server requests.
Using image sprites will reduce the number of server requests and save bandwidth.

1. Sprite Generator.
It allows the user to upload the multiple icons images on the canvas, User can change the position of the icons, and at the end SPRITE GENERATOR will allow you to download the one image containing all the icons,and it will also provide you the CSS with background position,width,height of your different icons. You can also download the complete CSS Code.

2. Ruler :
Ruler Allows the user to measure anything on the web, this will allow you to know the width,height,top and left position of anything on the DOM.allow you to know the width,height,top and left position of anything on the DOM.

Developed By <a href=’http://shehrozahmed.com’>Shehroz Ahmed</a>

中文翻译

Css尽管生成器和标尺是为前端网站开发人员开发的。

若要允许在文件url上使用它，请转到“扩展”选项卡，找到Css SPRITE生成器，然后单击“允许访问文件url”。

它执行两个功能，

1。CSS精灵发生器。
2。尺。

什么是CSS精灵？

图像精灵是放入单个图像中的图像的集合。
包含许多图像或图标的网页可能需要很长时间才能加载并生成多个服务器请求。
使用图像精灵将减少服务器请求的数量并节省带宽。

1。Sprite生成器。
它允许用户在画布上上载多个图标图像，用户可以更改图标的位置，在最后Sprite生成器将允许您下载包含所有图标的一个图像，它还将为您提供不同图标的背景位置、宽度和高度的CSS。你也可以下载完整的CSS代码。标尺：
标尺允许用户测量web上的任何内容，这将允许您了解DOM上任何内容的宽度、高度、顶部和左侧位置。允许您了解DOM上任何内容的宽度、高度、顶部和左侧位置。

由&lt；a href=’http://Shehroz Ahmed.com’&gt；Shehroz Ahmed&lt；/a&gt开发

类似CSS Sprite Generator & Ruler插件

CSS Peeper

Extract CSS and build beautiful styleguides.

🔎 No more digging in a code. Inspect styles in a simple, well-organized & beautiful way. Get it now! CSS Peeper is a CSS viewer tailored for Designers. Get access to the useful..

| 开发工具

SelectorGadget

Easy, powerful CSS Selector generation.

Selector Gadget is an open source Chrome Extension that makes CSS selector generation and discovery on complicated sites a breeze. After having installed the extension, go to any p..

| 开发工具

Grid Ruler

Create grids and measure their distance easily.

It allow you to creates vertical and horizontal grids, Photoshop style. It has a ruler to measure distance between your grids too. #How to use: drag from main vertical/horizontal r..

| 开发工具

User CSS

A quick and easy way to add custom CSS to the current web site.

Insert your custom CSS code to the current web site and you will see the changes immediately. How to use: 1. Press the extension button to display the CSS editor. 2. Write your cus..

| 开发工具

CSS Dig

CSS Dig finds and groups stylesheets..

CSS Dig finds and groups stylesheets and style blocks on most websites, providing an easy way to analyze the code and plan refactors. Properties: Take a look at all your CSS proper..

| 开发工具

Alt CSS

Alternate CSS Style Selector allows ..

Alternate CSS Style Selector allows you to set an alternate style on pages which provide one Alternate CSS Style Selector (ACSS for short) provides an interface to choose from alte..

| 开发工具

CSS Spy

Showing CSS attribute on element hov..

Showing CSS attribute on element hover Inspect computed styles of any single element just on the fly. When the extension is active, hovering element will shows the width, height an..

| 开发工具

Positionable!

An extension for visually manipulating elements in the browser.

Positionable is a developer tool that lets you quickly manipulate elements the way you would in an image editor. Familiar workflows like dragging, nudging, align/distribute, and un..

| 开发工具

Devtools Rulers

Adds rulers panel to devtools! NEW i..

Adds rulers panel to devtools! NEW in 1.5! Fixed some bugs and impoved work! Rulers are just a simple divs that helps you modify your styles. Important feature: you will not lost y..

| 开发工具

Ruler

Simple measuring tool for web develo..

Simple measuring tool for web developers. Simple page ruler with high contrast, magnifier and color recognition. Made only for me and my friends web developers

| 开发工具

PochtaPlugin Adapter

Плагин для работы с электронной подписью в информационных системах Почты России Данный п..

Плагин для работы с электронной подписью в информационных системах Почты России Данный плагин предназначен для работы с электронной подписью в информационных системах Почты России ..

| 扩展

webext-storage-explorer

Allows you to easily explore the bro..

Allows you to easily explore the browser.storage content This extension allows you to explore the web extension storage (chrome.storage.sync or chrome.storage.local) and also edit ..

| 扩展

SSL Grade

This Extension Uses the SSLLabs SSL ..

This Extension Uses the SSLLabs SSL Test to Show a Security Rating of the SSL connection You Are Using # SSL Grade (Chrome Extension) ## About This Extension shows the Quality of t..

| 扩展

Don’t track me, google!

Remove annoying link conversion in g..

Remove annoying link conversion in google search results. Remove google redirects from search results.

| 扩展

clevermaps-debugger

CleverMaps Debugger CleverMaps metric debugger for Google Chrome.

CleverMaps Debugger CleverMaps metric debugger for Google Chrome.

| 扩展

Foxseo – SEO & Website Analysis

Use FoxSeo to improve your site and ..

Use FoxSeo to improve your site and identify opportunities to get ahead of the competition. - Information about site - Stasts - Google Insights - Google Pagespeed - Moz Rank - Soci..

| 扩展

Appodeal

常见问题解答 1）在白名单中禁用AdBlock或添加console.developers.google.com。 2）您只需同意Admob的条款并确认对Admob帐户的访问即可..

常见问题解答 1）在白名单中禁用AdBlock或添加console.developers.google.com。 2）您只需同意Admob的条款并确认对Admob帐户的访问即可进行操作。 3）插件会通知您每个步骤都已成功完成。 4）步骤成功完成后，它们将被标记为已完成。 5）要同步新应用程序，必须重新启动第三步。如果您已从插件注销，则必须执行步骤1。 6）同..

| 扩展

App Inspector for Sencha™

Google Chrome™ Dev Tools extension f..

Google Chrome™ Dev Tools extension for debugging Sencha™ applications. App Inspector for Sencha™ is an extension for Google Chrome DevTools which makes debugging Sencha Ext JS and ..

| 扩展

Devshot

Automatically log your web developme..

Automatically log your web development in screenshots Devshot is an extension for logging your web development in a series of images, It works by taking a screenshot every time you..

| 扩展

T21 HLS Scrubber

View all manifest retrieved by chrom..

View all manifest retrieved by chrome, and filter by tab. A new Chrome browser application from T21 Technologies for scrubbing HLS manifest files from webpages to play on the T9261..

| 扩展