Подскажите конвертер PNG в CSS

@morda77 · Регистрация: 22.12.2012

Студворк — интернет-сервис помощи студентам

Привет! Подскажите, плиз, хороший онлайн конвертер PNG в CSS.
Интересует автоматическая конвертация форм из изображений в CSS код.
Спасибо.

@SD163 · 17.10.2018, 02:42

morda77, попробовал и понял, что туфта- считает по пиксельно.
CSS Hat не попробовал - он на сс2015, а у меня другой

Добавлено через 4 минуты
morda77, а почему не устраивает svg вместо css
там через img в html очень короткая строчка? Качество не хуже и размер мал.
Но svg плоская, если градиенты, как на видео, то да.

@morda77 · 17.10.2018, 14:54 **[ТС]**

Сообщение от SD163

а почему не устраивает svg вместо css

мне не картинка нужна на выходе, а код CSS. У меня много psd макетов. В них много блоков, имеющих сложные формы, которые я должен копировать в виде стилей CSS для блоков <Div> на сайтах. Я хочу автоматизировать данный процесс. Поэтому и обратился сюда с данным вопросом.

Добавлено через 1 минуту
Т.е. мне нужно создавать на сайтах блоки тех же форм, что и в psd макетах, но не тратя на это кучу времени.

@SD163 · 18.10.2018, 08:57

morda77, ясно. А можно поинтересоваться, что будет в таких сложных блоках? Обрезаться картинка наверное будет по контуру блока, думаю и текст будет размещаться, не выходя за границы такого блока? Может еще какое применение?

Добавлено через 16 минут
morda77, я тут интересный вариант нарыл - картинка или анимация внутри текста

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 500" >
<defs>
  <mask id="LetMask"  > 
  <rect x="0" y="0" width="100%" height="100%" fill="#black" />
    <text font-size="230px" font-family="Arial Black" x="50" y="200" fill="white" 
    stroke="grey" stroke-width="0">ТЕКСТ</text>
  </mask>
</defs>
 <image xlink:href="картинка.gif" width="100%" height="100%"mask="url(#LetMask)" /> 
 
</svg>  
  
  
</body>
</html>

@morda77 · 18.10.2018, 13:14 **[ТС]**

Сообщение от SD163

ясно. А можно поинтересоваться, что будет в таких сложных блоках? Обрезаться картинка наверное будет по контуру блока, думаю и текст будет размещаться, не выходя за границы такого блока? Может еще какое применение?

картинки не будет. Повторяю - мне нужно делать блоки по форме psd. Еще сдвигать эти блоки буду по вертикали и горизонтали.

@SD163 · 20.10.2018, 12:03

morda77, так это я понял, что пустые блоки в CSS. В конечном итоге не понял, что может быть, игра может какая.

@morda77 · 20.10.2018, 13:45 **[ТС]**

SD163,

Не игра. Просто блоки сайта, которые потом буду наполнять контентом.

@morda77 · 09.11.2018, 02:27 **[ТС]**

В общем, выбрал этот конветрер http://images-css.s-sd.ru/img_css2.html и уменьшил png файл до ширины в 300 px (прилагаю файлы png и psd). Сработало, но! CSS код выходит ну очень длинный - более 10 тыс. символов. Пробовал сократить разными автоматическими сервисами. Самые продвинутые из них, типа первой тройки из этого рейтинга: https://habr.com/post/306442/ , максимум сокращают код на менее, чем 1%.
Как быть? Какое решение?
Спасибо.

Новые блоги и статьи Все статьи Все блоги /
Грибы - это женщины, деревья - это мужчины. Анти инь янь для союза мужчины и женщины. anaschu 18.07.2026 ГЛАВНЫЙ НАУЧНО-ФИЛОСОФСКИЙ ВЫВОД: Сексуально-Репродуктивный Капитализм против Государства Моногамии Коллеги, мы вышли на финишную прямую 20-мерного ОДУ-моделирования вековой сукцессии (ветка. . .	Текстовый слайдер с нумерацией страниц и кроссбраузерность. russiannick 18.07.2026 Один мой друг написал текстовый слайдер с нумерацией страниц. Сегодня я расскажу как он умудрился подружить его с кроссбраузерностью. Очевидно сложно угодить с шириной каждому браузеру. Один крадет. . .	Грибы - это мемы, дерево - это человек. Применение микоризной модели к теории меметики Докинза. anaschu 18.07.2026 Меметический изоморфизм теории «всего»: Грибная сукцессия как модель эволюции идей Докинза Базовый код системы ОДУ микоризной сукцессии описывает не просто биологию, а универсальную. . .	Грибы - это корпорации, деревья - это государства. Механизм массонского захвата власти anaschu 18.07.2026 Макроэкономический изоморфизм теории «всего»: Грибная сукцессия как модель транснационального капитализма Базовый код системы ОДУ микоризной сукцессии описывает не просто биологию, а. . .
Расчёт периметра прямоугольника по координатам вершин Maks 18.07.2026 Решение задачи по прикладной информатике средствами 1С. Задача: Вычислить периметр прямоугольника, заданного координатами своих вершин на плоскости. Решение: Создан документ со следующими. . .	Подсчёт частоты трёхбуквенных слов в тексте Maks 18.07.2026 Решение задачи по прикладной информатике средствами 1С. Задача: Выясните, сколько раз в предложенном тексте встречается каждое трехбуквенное слово. Решение: Создан документ с единственным. . .	Сумма и количество положительных элементов в чётных строках массива Maks 18.07.2026 Решение задачи по прикладной информатике средствами 1С. Задача: Вычислить сумму и количество положительных элементов массива, расположенных в четных строках. Решение: Создан документ с. . .	Поиск произведения положительных чётных чисел в последовательности Maks 18.07.2026 Решение задачи по прикладной информатике средствами 1С. Задача: Дана произвольная последовательность целых чисел. Найти произведение положительных четных чисел данной последовательности. . . .

@morda77 31 / 31 / 11 Регистрация: 22.12.2012 Сообщений: 2,794

	Подскажите конвертер PNG в CSS 15.10.2018, 01:06. Показов 8673. Ответов 26 Метки converter, css, css 3, png, png to css, pngimage, конвертер (Все метки) Привет! Подскажите, плиз, хороший онлайн конвертер PNG в CSS. Интересует автоматическая конвертация форм из изображений в CSS код. Спасибо. 0

@SD163 9 / 6 / 3 Регистрация: 25.08.2018 Сообщений: 262
	17.10.2018, 02:42
	morda77, попробовал и понял, что туфта- считает по пиксельно. CSS Hat не попробовал - он на сс2015, а у меня другой Добавлено через 4 минуты morda77, а почему не устраивает svg вместо css там через img в html очень короткая строчка? Качество не хуже и размер мал. Но svg плоская, если градиенты, как на видео, то да. 0

@SD163 9 / 6 / 3 Регистрация: 25.08.2018 Сообщений: 262
	20.10.2018, 12:03
	morda77, так это я понял, что пустые блоки в CSS. В конечном итоге не понял, что может быть, игра может какая. 0

@morda77 31 / 31 / 11 Регистрация: 22.12.2012 Сообщений: 2,794
	20.10.2018, 13:45 [ТС]
	SD163, Не игра. Просто блоки сайта, которые потом буду наполнять контентом. 0

@morda77 31 / 31 / 11 Регистрация: 22.12.2012 Сообщений: 2,794
	09.11.2018, 02:27 [ТС]
	В общем, выбрал этот конветрер http://images-css.s-sd.ru/img_css2.html и уменьшил png файл до ширины в 300 px (прилагаю файлы png и psd). Сработало, но! CSS код выходит ну очень длинный - более 10 тыс. символов. Пробовал сократить разными автоматическими сервисами. Самые продвинутые из них, типа первой тройки из этого рейтинга: https://habr.com/post/306442/ , максимум сокращают код на менее, чем 1%. Как быть? Какое решение? Спасибо. Миниатюры Изображения 0