mikoart

43 минуты назад, by chris сказал:

Если только не нужна поддержка ie10.

Да, похоже в IE без JS не обойтись, для реализации данного эффекта. Спасибо, by chris, за напоминание.

31 минуту назад, wwt сказал:

раскроить фоновое изображение и верхнюю часть положить на фон меню что мешает?

Статичный фон, можно было бы и раскроить, но в этом макете элемент слайдера, который будет постоянно меняться, перекрывает меню.

6 минут назад, Igor Schnaider сказал:

pointer-events: none;

 

Это свойство именно то, что нужно! Первый раз его вижу Благодарю!

В макете нужно реализовать наложение картинки на меню, но хотелось бы при этом оставить элементы меню доступными для клика полностью, а не частично.
Сейчас реализовано так, что доступна только верхняя часть кнопки https://arthurmiko.github.io/shadows_portfolio/

Здесь воспроизведена подобная ситуация и вопрос относительно этого случая. Можно ли как-то оставить серые блоки доступными для курсора, в области их перекрытия синим блоком?

Наверняка это можно реализовать с помощью JS, но есть ли способ обойтись HTML/CSS?

Каким-то образом у меня оказалась dev версия Chrome и в ней это сочетание свойств не работает сейчас. Поставил обычный Chrome, теперь всё в порядке.
Извините за лишнее беспокойство 

Здравствуйте!
Столкнулся с проблемой в Chrome 53 - не работает transition для opacity на псевдо-элементе.
При этом в перечисленных браузерах эффект работает как нужно IE 10, 11, Opera 38, Firefox 47.
Сайт на котором возникла проблема, кнопка "Get started" должна меняться.
Воспроизведение проблемы https://jsfiddle.net/mikoart/foqLwnf5/

Это особенность Chrome или я что-то не так делаю?

Похоже, что это Google bot пытается использовать эти файлы, для приложений. Здесь немного детальнее. Вот тут объяснение для Apple и тут для Android.

4 часа назад, by chris сказал:

Почему в шапке нижняя тень вместе с картинкой вырезана?

Это из-за уголков - не сразу придумал как можно на CSS сделать эти тени. Исправил, но получилось меньше сходства с макетом.

8 часов назад, Xenia Wanger сказал:

1) Верхнее меню - нужно делать список ul li, без лишних классов у элементов. Плюс добавить эффект при наведении (да хотя бы сделать тот, что на первом пункте)

Сделал в виде списка. Вы могли бы пояснить, какое преимущество списка в данном случае? И чем плохо <p class="content--text-title">?

8 часов назад, Xenia Wanger сказал:

Какой-нибудь hover-эффект хочется на кнопке "Read More".

Да, c этим ещё нужно, что-то сделать. Потому что в Opera hover-эффект есть, а почему его нет в Chrome - ещё не понял.

15 часов назад, MadSandwich сказал:

По-моему ты слишком увлекся списками, не очень практичный вариант.

В каком месте на данной странице использование списка неуместно, на ваш взгляд?

Незначительные изменения - исправлена тень в шапке, добавлен hover к элементам меню и изменена структура меню на ul>li.

Благодарю всех откликнувшихся за обратную связь!

p.s. Осталось понять, что с кнопками "read more" не так и устранить перекрытие картинкой телефонов - элементов меню, оставив при этом картинку сверху.

Надеюсь, что в некоторой степени это всё таки возможно. Вопрос кросс-браузерности ещё не изучал, пока ориентируюсь на последние версии Chrome и Opera и хотелось бы получить обратную связь о текущем понимании вёрстки. Наверняка есть какие-то недочёты кроме отсутствия поддержки IE.

В целях практики сверстал макет. Прошу оценить качество вёрстки и указать на недостатки и ошибки.

Сайт   Макет

Наибольшие сомнения у меня вызывает реализация теней - замечания по этому вопросу интересуют больше всего.

P.S. без адаптивности и кросс-браузерности

Очевидно, вы не проверяли как сайт будет выглядеть на разных разрешениях вот, что с ним происходит при ширине 1920px. Также посмотрите, что будет если высоту браузера уменьшить.

<div id="shapka"> Транслит в названиях классов не используется. Вы используете id не по назначению. У данного атрибута высокий приоритет в CSS и при возможности лучше ограничиться использованием class. Также вы очень практически для каждого элемента используете position: absolute - в этом нет необходимости. Лучше использовать другие способы позиционирования.