О чём смеются верстальщики

Вадим Макеев, Opera Software

Prosmotr

О чём
смеются
верстальщики

Лого Оперы

Инструменты

Советы

Почаще посещать Петропавловск-Камчатский

Или познакомиться с рентгеноэлектро­кардиографической одиннадцатиклассницей

Научиться дизайнить в браузере

Придерживаться выбранной сетки

Навести порядок в макетах

Мыслить компонентами, а не макетами

Перестать делать картинки и начать решать задачи

Помогать проектировать адаптивное поведение

Описывать сложные моменты комментариями

Описывать взаимодействие и важные состояния

Не изобретать свои велосипеды с контролами

Не использовать режимы наложения

Прилагать к макету шрифты

Всё в векторе!

Рисовать кривые Безье, а не возить кисточкой

Не склеивать слои

Попадать в пиксельную сетку

Не думать как верстать, иначе всё будет квадратное и Ариалом

Немного кода

Фон блока

			.wave {
				background-image: url(wave.png);
				background-position: 0 0;
				background-repeat: repeat-y;
				}
		

Описание анимации

			@keyframes wave {
				from { background-position: 0 0 }
				to { background-position: 0 622px }
				}
		

Высота картинки 622 пикселя.

Применение анимации

			.wave {
				animation-name: wave;
				animation-duration: 2s;
				animation-timing-function: linear;
				animation-iteration-count: infinite;
				}
		

CodePen

Что дальше?

A Book Apart

Ещё? Ещё!

sokr.me/dla

@pepelsbey

pepelsbey@gmail.com

Логотип Шовера

Shower

Вопросы?