Как сверстать этот элемент?

Question

[Bohdan09]

Помогите пожалуйста сверстать, не могу расположить картинки сверху текста. Как бы вы сверстали такой блок?

Answer 1

[Mizutsune]

В этом элементе нет ничего сложного. Карточка, внутри иконка, заголовок и текст с описанием.



В песочнице в качестве иконок используются Inline SVG. Разумеется их лучше заменить тегами <img /> с путями до иконок, атрибутом alt и другими нужными атрибутами.

Comments

[Ankhena]

Разумеется их лучше заменить тегами с путями до иконок, атрибутом alt и другими нужными атрибутами.

Только лучше с пустым alt и role=presentation, поскольку у них нет смысловой нагрузки.

[Bohdan09]

Спасибо, помогло.

[Mizutsune]

Ankhena, да это точно, согласен с вами.

Answer 2

[Sergei Nazarenko]

Answer 3

[Ankhena]

не могу расположить картинки сверху текста.

Обычные блочные псевдоэлементы.
Потому что эти изображения не имеют смысла, значит в разметке они лишние.

https://codepen.io/AnnaSummer/pen/WNJZQNv

Comments

[godsplane]

Зачем делать иконки псевдоэлементами?До них же не достучишься при необходимсоти через админку сайта например.

[Одиночка Айс]

godsplane, не все знают что это)

[Сергей delphinpro]

Пожалуй псевдо здесь перебор. Обычные иконки, часто устанавливаются в админке. Лучше просто тегом img с role=presentation

[Ankhena]

godsplane, Одиночка Айс, Сергей delphinpro, элементарно через кастомное свойство инлайном.

[Ankhena]

Но если хочется через img, ну ок, заменить псевдо на img. С аналогичными стилями.

[Одиночка Айс]

Ankhena, > кастомное свойство инлайном

ниче не понял...

[Сергей delphinpro]

Ankhena,

через кастомное свойство инлайном.

хм, в принципе да. вариант норм.

[Ankhena]

Одиночка Айс, это довольно распространенный прием, думала, что короткой фразы будет достаточно для понимания.
Расшифрую: кастомное пишется инлайном элементу (т.е. для бэка по сути ничем не отличается от вставки урла для img), а используется в псевдо.

<li style="--bgi: url(путь)“

li::before {
  background: var(--bgi) no-repeat;
}

[Одиночка Айс]

Ankhena, понятно, спасибо) я просто переменными CSS не пользуюсь

[Ankhena]

Одиночка Айс, от себя скажу: офигенно удобно, мне оч нравится))

[Sergei Nazarenko]

Одиночка Айс, а зря

[Sergei Nazarenko]

Ankhena, что значит кастомное свойство? background вполне себе специфик свойство style - то-же, а то что (--bgi: url(путь)) - так это параметр а не свойство ох уж этот непонятный рунглиш )))))

[Ankhena]

Sergei Nazarenko, CSS custom properties так лучше?

[Sergei Nazarenko]

Ankhena, ну кустом - значит произвольное а оно не произвольное же )) а вполне себе конкретное.
ps даже чуть чуть не точный перевод custom - когда что-то делается по индивидуальному заказу   customer(покупателя)
или пользовательское свойство которое определяется пользователем - а в вашем примере вы не свойство определяете а параметр свойства. Это в языках программирования вот когда ты создаешь какое то свойство класса которого не существовало до этого - вот его можно назвать кастомным.

[Ankhena]

Sergei Nazarenko, Сергей, от меня вы что хотите? Я спеку не пишу. Вы можете создать issue со своими предложениями о том, как это должно называться.

Но вообще оно произвольное, конечно. Вы (разработчик) сами в праве выбирать как его назвать.
Мне нравится называть кастомное свойство для фоновых картинок сокращением bgi по аналогии с emmet. Большинству эти сокращения знакомы и понятны.