Решил я тут недавно на одном из своих сайтов сделать легкий редизайн. И дошло дело до фона. Показался он мне каким-то скучным. Захотелось его немного «оживить». Подобрал подходящую картинку небольшого размера, загнал ее в свойство фона:

body{
	background: url("../images/bg.jpg") no-repeat center center / cover fixed;
}

и довольный нажал F5. Красота, да и только!

Начал скроллить страничку вниз и чувствую, что-то не то…


Такое чувство, как будто я играю в Crysis на очень старом компьютере. Почему же на сайте начались «тормоза» и прокрутка проходит рывками?

Я начал свое расследование…

Представляю вашему вниманию перевод достаточно большой и объемной статьи по поводу вечного спора, какие же единицы измерения использовать при верстке: em'ы или rem'ы. В каких случаях стоит использовать одни единицы, а в каких другие. Вас ожидает много кода, примеров и их объяснений.

Добро пожаловать в мир типографики и относительных единиц измерения =)

Ох уж эта граница видимой области. Проклятье многих UX дизайнеров при переговорах со своими клиентами. Предмет сатиры, насмешливые вебсайты. Ну, на самом деле, всего несколько.

Немого истории

Идея границы видимой области (далее, ГВО) пришла в веб из печатной индустрии (первый тревожный звоночек). То есть это есть пережиток прошлого. Газеты были, как бы это сказать, ограничены, когда выпускались в печать и продавались. Идея заключалась в том, что было чрезвычайно важно помещать крупные заголовки и изображение в самой видимой области — вверху страницы. Делалось это для того, чтобы привлечь тем самым читателей. И вуаля — родилась новая тенденция.

Со стремительным приближением Angular 2.0, параллельно существующим с большим количеством других frontend-фреймворков, в воздухе витает множество волнений по поводу предстоящих затрат (как временных, так и денежных), связанных с переводом своих проектов на новую версию. Как вы думаете, есть ли у разработчиков желание изучить еще один новый фреймворк?

Давайте разбираться. Прошу под кат.

Предлагаю вашему вниманию вольный перевод статьи "Styling Broken Images" с сайта bitsofco.de.

«Битые» картинки выглядят ужасно.



Но они не всегда должны так выглядеть. Мы легко можем применить CSS к элементу (тегу) img, чтобы улучшить его внешний вид — сделать его куда более привлекательнее, чем как он выглядит по умолчанию.

Если вам наскучили дефолтные уведомления о «битых» картинках, милости прошу под кат.