3 заметки с тегом

верстка

Краем уха слышу разговор:
— А можешь мне вот эти все кадры анимации из png сделать gif? Так меньше весить будет при верстке!
— Да конечно!

Для тех кто не знал, в gif есть два варианта, это либо пиксель цветной, либо прозрачный. Все полупрозрачные пиксели заменятся на белый с наложением этого самого полупрозрачного пикселя.

— Твои предложения?
Соберем из всех картинок анимации (т. е. кадров) спрайт, например через этот сервис. Я делаю его вертикальным и без отступов (можно и с ними, дальше в коде скажу где поправить).

— А дальше что?
Дальше надо сжать картинку, например тут. Где, разницы нет, нормальный сжиматель удалит лишнюю информацию из png и оставит только ту, что строит картинку. Качество не пострадает. Сжимать с потерей качества можно, но не стоит.

Дальше по коду:

  1. В html создаем div в нужном месте, например, с классом «film»
  2. Пишем в css следующие строки
.film {
    background: url('spritesheetmin.png');
    animation: play 2s steps(60) infinite;
    height: 100px;
    width: 100px;
    display: block;
}
@keyframes play { 
      0% { background-position:    0 0px; } 
    100% { background-position: 0 -6000px; }
}

steps — количество кадров
100% {ba... — смещение (размер в высоту * количество кадров), тут же добавляем отступ, если добавляли при создании спрайта.

На выходе получаем анимацию из png, принцип как у пленки в кино. Тут за 2 секунды, мы показываем все 60 кадров.

Еще немного интересного о png
Картинка весит меньше, если у нее по горизонтали больше одинаковых пикселей. Это потому, что png записывает для каждого пикселя отдельно цвет. Но если встречается, что подряд идут 10 одинаковых, он напишет диапазон «с 1 по 10 пиксель — черный», что значительно сокращает размер файла.

22 июля 2015, 16:49

Матрица

— Я знаю кунг фу, сказал Нео
— Я знаю замыкания, сказал Я.

javascriptверстка

В названиях файлов должна быть логика. Это вроде очевидно, но когда доходит до практики редко применимо. Получается лишь отделять кнопки от не кнопок и т. п.
Хотел ввести систему для названия файлов для верстки, да так, что бы взглянул на название и сразу знаешь что это. Или еще лучше, верстаешь и не смотришь на название файлов, так как и так знаешь как он называется. Все же логично.

В PPP (Pixel Perfect Precision) предлагают следующее:
— пишем тип картинки (button, photo...),
— на каком экране эта картинка (global, home...),
— тип кнопки (play, stop, back...),
— стиль кнопки (green, blue...),
— состояние кнопки (default, disabled...).

В итоге у нас получаются названия типа:

btn_global_play_orange_default.png

Это же все применимо и для стилей CSS:

.bg_home_description

Для стилей это даже больше подходит, т. к. кнопки лучше делать спрайтами, но это кто как верстает. Главное запомнить порядок параметров в названии и все становится проще.

P.S. Рекомендую к обязательному прочтению книгу Pixel Perfect Precision. Книга расскажет о полезных, местами конечно уже очевидных, приёмах и хитростях. Книга PPP на русском

версткакнигиработа