Случайный выбор победителя «Вконтакте»
Артем Мáлков
507 просм
0 комм
Поделиться

Иконка желудя на html+css

Недавно, сидя за компьютером в поисках информации, наткнулся на неприметную иконку желудя размерами 15х15 и ее 6-ти кратное увеличение от дизайнера «Omega». Увидев сплошные пиксели, я подумал – а почему бы, не реализовать такое на html+css. Тем более, что тут те же самые пиксели. В Photoshop’е я увеличил и разметил картинку, чтобы было проще брать цвета и не сбиться при счете.

Несложно высчитать, что квадрат у нас 15х15 px – а это значит, что всего у нас 225 квадратов. Исключив белый цвет, получаем 205 рабочих пикселей.

Иконка желудя на html+css

Для удобства, я разделил иконку на 15 слоев, высотой 1 px и шириной 15 px, соответственно. И дальше – дело техники. Для каждого пикселя, через пипетку, я подобрал соответствующий цвет, после чего прогнал код на дубли, тем самым – объединив одинаковые пиксели в один код.

Исходники прилагаю, можете покопаться и посмотреть, как это реализовано.

ФайлРазмерСсылка
0
комментарий
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария