GreatBOND
@GreatBOND
Начинающий программист

Как вырезать эти картинки с макета?

Уже долго думаю над этим. В Интернете искал, но так и не нашел ничего подобного. Не знаю как вырезать эти картинки:

485a1f36b61c40c386889fadedddd510.jpg

Вот макет: psd-html-css.ru/templates/black-white-besplatnyy-p...

Пробывал вырезать, но у меня получается без этой серой маски(или как правильно назвать?):

083561d7e0f643e388a44db24d0fc1b1.jpg

Также еще вопрос: как правильно организовать это в коде(HTML)? Можно сделать эти картинки как фон, но я думаю что логичнее это сделать через тег , на случай если на сайт в будущем будут добавляться новые работы.

Помогите пожалуйста.
  • Вопрос задан
  • 2596 просмотров
Решения вопроса 4
ivan_tataush
@ivan_tataush
Frontend Developer
Проще всего вырезать картинки PhotoShop СС, кликай на слой правой кнопкой и "Быстрый экспорт в PNG". Но лучше делать Экспорт для Web и сохранять jpg (оптимизация размера).
Вырежи картинки так как тебе удобно и добавь css filter www.w3schools.com/cssref/css3_pr_filter.asp
Делай это тегом img так правильнее будет, при наведении на блок убирай фильтр
Ответ написан
Комментировать
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
1. В данном случае: объединить видимые слои и потом вырезать.

2. Использовать конструкцию
<figure>
  <img>
  <figcaption>
    Тут описание, которое будет появляться при наведении
  </figcaption>
</figure>
Ответ написан
Комментировать
По последнему пункту. Бэкграундом делаются изображения, которые несут в себе исключительно оформительские цели. Тегом вставляются изображения которые несут семантическую нагрузку, то есть сами являются контентом сайта и должны подпадать под индексацию поисковыми системами.
Ответ написан
Комментировать
Serj-One
@Serj-One
i'm sexy and i know it
Вырезать с рамкой и не нужно. Рамка - элемент вёрстки.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы