Итак, я натолкнулся на это недавно: http://www.nicalis.com/index.php
И мне было любопытно: есть ли способ сделать такие вещи с меньшими изображениями? Я имею в виду, это пиксельное искусство, и вместо того, чтобы использовать изображение с каждым пикселем в четыре раза по размеру, мы не могли бы растянуть их с помощью кода? Поэтому я начал пытаться это сделать.
Я пробовал CSS, Javascript и даже HTML, ни один из которых не работал. Они все сильно размываются (например: http://jsfiddle.net/nUVJt/2/), что подводит меня к моему вопросу: вы можете растянуть изображение в браузере без любое сглаживание?
Я открыт для любых предложений, будь то использование холста, jQuery, CSS3 и т.д.
Спасибо за помощь!
EDIT: Там лучший способ сделать это сейчас! Немного менее хакерский путь! Здесь волшебство:
.pixelated {
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;
image-rendering: pixelated;
}
И это остановит сглаживание во всех современных браузерах. Это даже будет работать в IE7-8, но не в 9, и я не знаю, как это сделать в 9, к сожалению (кроме холста, описанного ниже). Это даже не смешно, насколько быстрее он делает это так, как с JS. Здесь более подробная информация о них: https://developer.mozilla.org/en-US/docs/CSS/Image-rendering
EDIT2: Поскольку это еще не официальная спецификация, она не очень надежна. Chrome и FF оба, похоже, перестали поддерживать его, так как я написал выше (согласно спецификация CSS3. Поддержка super spotty прямо сейчас, но Chrome просто добавила поддержку поэтому перед слишком длинным успехом можно просто сказать image-rendering: pixelated;
и itll работать во всех местах (yaayy вечнозеленые браузеры!)