Многие вебмастера и разработчики сайтов не раз задавались вопросом: «Как перевести картинку в CSS»! Представляю Вам три конвертера которые делают эту задачу реальной!
№1
Качество Вы можете оценить в примере приведенном ниже (пример сделан в этом генераторе) :
Внимание! Данная страница может немного тормозить, так как ниже представлены примеры изображений с огромным стилем CSS
Картинка
CSS
Так как пример мы сделали из «Конвертера изображения в CSS, на основе теней», то и разберем его подробнее!
В первую очередь данный генератор конвертирует хорошо изображения из формата .jpg (он не умеет делать прозрачность, которая присутствует в .png) и размер картинки которую вы хотите перевести в CSS неограничен!
HTML
Для вывода стиля картинки нам необходимо вставить в нужное место div (я приведу пример который использовал на этой странице для демонстрации)
<div style="display: block;overflow: hidden;">
<div style="margin-top:0px; margin-left:0px;" id="output-image"> <!-- css картинка --></div>
</div>Можно использовать так:
<div id="output-image"> <!-- css картинка --> </div>Сам файл CSS я демонстрировать не буду, так как он реально огромный
№2
Немного хочу описать «Конвертер любого изображения в CSS, с эффектом прозрачности»
Оптимальный размер загружаемого изображения 300x150px. Форматы: jpg, png, gif. Прекрасно справляется с прозрачностью! ( бета версия )
Картинка
CSS
№3
И еще один «Конвертер любого изображения в CSS»
Конвертер не поддерживает прозрачность (PNG).
Пожалуйста, попробуйте с небольшого изображения. CSS файл будет очень большой!
Картинка
CSS
Вот и всё!
Пользуйтесь! Буду рад если это Вам поможет в осуществлении своих проектов!