Ivan Bogachev

Пример с градиентами

По умолчанию div имеет box-sizing: content-box. В вашем случае это дает у .box-2 общую ширину в 50% + 30px. Соответственно два таких имеют общую ширину больше 100% и, разумеется, не влезают по ширине. Используйте box-sizing: border-box и ваш float: left заработает.

Можно с помощью фильтров добиться такого (или очень близкого) результата - codepen. Но придется что-то решать с IE, ибо он в фильтры не умеет

Да, суммарная ширина пунктов меню больше ширины контейнера

Распутаться вам поможет статья на хабре про геометрические фигуры на css ("сужение" называется "трапеция").

Лучше всего не заниматься ... странностями и писать css в css, извините за тавтологию. И использовать какой-нибудь автопрефиксер, который решит за вас какие префиксы куда вставлять. Если у вас в скриптах возникает необходимость поменять внешний вид или расположение элементов - создавайте для них отдельные css классы и в скриптах добавляйте эти классы или убирайте. Это имеет смысл делать хотя бы потому, что смесь javascript и css (имеется ввиду изменение свойств напрямую) в одном файле очень быстро превращается в такую лапшу, в которой потом ничего нельзя понять.

Можно например вот так

Ответ, как ни странно, очевиден до невозможности: иконка называется не ic_payment а просто payment. А три символа "ic_" дают три пробела, или, лучше сказать, три символа, которых нет в этом материальном шрифте. Codepen

У вас сам шрифт грузится только в формате eot, а это, как говорится, ослик-only. Ссылки на остальные форматы у вас битые (404), что нетрудно заметить из консоли. Так что вам нужно или добавить к себе на сайт остальные форматы, или подключать FontAwesome например с cdnjs.

Страница, на которую вы дали ссылку чуть более чем полностью состоит из плиточек у которых и ширина и высота задаются в vw. Собственно так квадратную плитку обычно и делают. У этих плиточек явно есть overflow: hidden и анимации при наведении. Такие анимации вполне себе делаются на чистом CSS. Не совсем понятно что вы имеете ввиду под "плавной" загрузкой фотографий - они хорошо сжаты, поэтому быстро загружаются, но главная причина скорости загрузки страницы состоит в том, что там нет лишних километров скриптов, которые обычно присутствуют на таких страницах и все тормозят. Да и хостинг у людей похоже неплохой (и находится в России) - пинг в 15-16ms благоприятно влияет на восприятие сайта в целом

CSS Color Extractor