Генератор случайных чисел   •   Online-инструменты
601 просм
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
Текст комментария