Обзор интернета Легкая версия Веб-мастеру Графика Игры, Спорт Программы Рецепты Время Рождество Библия
Свой сайт Хостинг Облака Домены Ресурсы Формы на сайт Раскрутка
API ASCII CMS CSS CSS3 DDoS GIF HTML HTML5 IP IT robots.txt RSS SEO UI Whois Веб-мастеру Веб-редакторы Построитель сайтов Проверка сайта Продвижение



Генератор CSS спрайтов

Например, у нас на сайте много мелкий картинок:
  • маленькие флаги языков телеканала,
  • логотипы телеканалов,
  • иконки социальных сетей,
  • ...
Всего более 1000 мелких и очень легких картинок. Но на загрузку страницы уходило время, потому что каждая мелочь - это обращение к серверу. Сервер делает не более 5 обращений за раз. А кому нравится стоять в очереди.

Для того, чтобы облегчить загрузку картинок - мы объединили группы мелких картинок в одну и получилось всего 10 картинок. У каждой свои координаты и выводится нужное исходя из координат и размера свойствами CSS.

пример картинок

Английский язык

email: draeton@gmail.com

CSS Sprite Generator

Сервис от Projectfondue, генератор CSS спрайтов.

Как это работает

  1. Собираем требуемые картинки в папку (ну так лично мне удобнее).
  2. Жмем на сайте синенький пункт меню CLEAR, чтобы убрать существующие там иконки для примера.
  3. Настраиваем:
    • Вы задаете расстояние между картинок, и до края. Они предложили сразу 50, но это много. Ноль не прошел, потом мы выставили 1, что вполне достаточно.
    • Можно задать цвет фона или сделать прозрачным.
    • Имена переменным будут присвоены по именам картинок в архиве. В форме вы можете добавить ко всем именам префикс или суффикс, ну или оставить поле пустым.
    • Можно сделать картинку компактной, вертикальной или горизонтальной.
    • Картинку можно встроить конвертируя в Base64 в CSS файл.
  4. Перетаскиваем файлы из нашей папки в это поле.
  5. Как только ваши иконки стали четкими, а не бледными и мерцающими, как вначале, спрайт готов.
  6. Жмем зеленую кнопку Download, а затем появившиеся зеленые кнопки Spritesheet и Stylesheet.
  7. Полученный текст корректируем под наш сайт.
Эта техника может быть очень эффективной для того, чтобы улучшить работу сайта, особенно в ситуации, когда используется много маленьких изображений, таких как иконки меню. Yahoo!, например, использует эту технику именно для этого.

CSS Sprites Generator

http://www.toptal.com/developers/css/sprite-generat...

Английский язык

Перетаскиваем в поле картинки или выбираем нажав кнопку Choose files.
В результате получаем картинку спрайта в .PNG и CSS код, который очевидно стоит самому допилить, потому что вы получите для каждой картинки отдельно полный код.

Генератор CSS спрайтов

http://ru.inettools.net/image/generator-css-sprayt...

Русский язык

Перетаскиваем в поле картинки или выбираем нажав кнопку Выбрать.
Ждем пока они неспешно подгрузятся.
Тут мы ждем еще добавить или удалить ненужные.
Затем жмем создать и скачиваем архив: папка с нашими картинками (непонятно зачем), спрайт в .PNG и CSS код, который очевидно стоит самому допилить, потому что вы получите для каждой картинки отдельно полный код.


Print Friendly and PDF




Интернет ресурсы 300 потрясающих бесплатных сервисов Измеряем скорость интернета Яндекс.Вебмастер Google вебмастеру Статистика посещаемости сайта Мониторинг сайта Защита от DDoS атак Используем Google webfonts
Генераторы
Генератор текстов Генератор иконок CSS3 генераторы CSS3 валидатор Анимированный загрузчик Анимированные кнопки Обложки браузеров
Редакторы
Декодер текста Транслитеры Веб-редакторы онлайн Платформа онлайн веб-программирования
Еще
Скриншоты онлайн Совместный просмотр сайтов Изобразить работу Сломать софт или файл Учимся кодировать HTML Instacode





Подать статью
Рассылка
О нас

Почта

Графика

Шрифты
Логотипы
Брендбуки
Пиктограммы
Геральдика

Популярное

Уровень сайта
Регистрация сайта
Как сделать сайт
1 место на Google
Переводчики Онлайн
Пароль

Топ интернета

Ph4 в социальный сетях, рассылки и контакт

©2005-2018, Веб-студия Ph4 - Каталог интернета пользователю, веб-мастеру и дизайнеру v. 4.3