Internet review - Lite Web-master Graphics Games Freeware Time Christmas Bible
Website Hosting Clouds Domains Resources Forms on the site Promotion
API ASCII CMS CSS CSS3 GIF HTML HTML5 IP IT RSS SEO UI Whois Validators Webmasters Web Editors Website monitoring Check site

Generator CSS sprites

For example, we have to the site a lot of small pictures:
  • small flags of the languages of the channel,
  • logos of TV channels,
  • social networking icons,
  • player icons.
A total of more than 1,000 small and very light pictures. But it took time to load the page, because every little thing is going to the server. The server does not exceed 5 hits at a time. And who likes to stand in line.

In order to facilitate the loading of pictures - we combined groups of small pictures into one and it turned out to be only 10 pictures. Each has its own coordinates and displays the desired properties based on the coordinates and size of the CSS properties.

Example pictures

logo CSS Sprite Generator

https://draeton.github.io/stitches

English
reliable site
English - English

email: draeton@gmail.com
address: USA, Лаи

CSS Sprite Generator

Service from Projectfondue, CSS sprite generator.

How it works

  1. We collect the required pictures in a folder (well, it's more convenient for me personally).
  2. Click on the site blue menu item CLEAR to remove the existing icons for the example.
  3. Customize:
    • You specify the distance between the pictures, and to the edge. They offered 50 right away, but that's a lot. Zero did not pass, then we put 1, which is quite enough.
    • You can set the background color or make it transparent.
    • Names to variables will be assigned by the names of pictures in the archive. In the form, you can add a prefix or suffix to all the names, or leave the field blank.
    • You can make a picture compact, vertical or horizontal.
  4. Drag and drop files from our folder into this field.
  5. Once your icons have become clear, not pale and flickering, as in the beginning, the sprite is ready.
  6. Click the green Download button, followed by the green Spritesheet and Stylesheet buttons.
  7. The resulting text is corrected for our site.
This technique can be very effective in improving the performance of the site, especially in situations where many small images, such as menu icons, are used. Yahoo !, for example, uses this technique for this.

CSS Sprites Generator

Drag in the field of the image or select by clicking the Choose files button.
As a result, we get a picture of the sprite in .PNG and CSS code, which obviously is worth doping itself, because you will get a complete code for each image.

Drag in the field of the image or select by clicking the Choose files button.
As a result, we get a picture of the sprite in .PNG and CSS code, which obviously is worth doping itself, because you will get a complete code for each image.

Internet resources 400 stunning free services We measure the speed of Internet Yandex.Webmaster Google webmaster Site traffic statistics Monitoring site Protection against DDoS attacks We use Google webfonts

Generators
Text Generator Generator icon CSS3 generators CSS3 validator Animated loader Animated buttons Covers browsers
Editors
Decoder text Transliters Web editors online Platform Online Web programiirovaniya
More
Online Screenshots Joint viewing sites Show job Break software or file Instacode Learning to code



Mobile version

Terms of publication of the article
Advertising
About us
Graphics

Fonts
Logos
Brandbooks
Pictogramms
Heraldry

Popular

Check a website level
A website registration
How to creat a website
#1 on Google
Online Translators
Password

Internet top

©2005-2024, Web studio Ph4 - Internet Catalog for user, web-master and designer v. 6.0.3