Не могу понять как прижать изображения к правому краю?

Думаю, что если вы обведете рамочкой того у кого space-between, то выяснится, кто именно не прижимается к правому краю (родитель).

Но тут не нужен space-between, обратите внимание на правую картинку - она обрезана, т.е. выходит за край окна.
Дизайнер показал слайдер и его начальное положение. После прокрутки он станет симметричным.

Сначала нужно вынуть этот блок из общего контейнера (если он там) и растянуть на весь вьюпорт.
Потом приделать слайдер. Swiper подойдёт отлично.

Помощь на сайте с CSS с галереей и превью?

Чтобы картинки были в одном размере:
- нарезать их в одном размере
- сделать блоки одинаковых размеров и использовать object-fit для вложенных картинок

Но помнить, что геометрию и пропорции никто не отменял.

Как сверстать подобный блок?

Ещё проще две svg по углам текстового блока добавить. Адаптивно, динамично и всё такое.

Как такие вещи верстаются?

Сергей delphinpro, у меня уже 139 хром - всё показывает ;)
Пока сайт сверстают, хромы обновятся.
С остальными да, надо решать как быть.

Я что-то так, по-детски чисто, радуюсь с этого свойства, как когда бордер-радиус завезли.

Как выровнять поля в таблице по максимально длинному?

toffi,

В одном классе я разместил float: right; и clear: both.

float в 2025 году используется только для того, для чего был придуман: обтекания одного элемента другими.
Тут обтекания нет, есть просто два столбца: а это гриды или флексы.

Заодно имеет смысл освежить что делают float и clear и оценить перспективу их совместного использования в таком сочетании значений. Одно из них включает обтекание, а другое запрещает. И вот вы пишете: прижми к правому краю, обтекай слева, но не обтекай ни с одной из сторон. Браузеру будет тяжко.

Как выровнять поля в таблице по максимально длинному?

Затейник однако.

Нормальный план: сделать одну таблицу.
План похуже: гриды, сабгриды и display contents для избавления от tbody.

Там разная заливка у заголовка и непосредственно таблицы с данными - поэтому пришлось разделить.

Поддержу Adamos - причина очень надуманная.
Для заголовочных ячеек th.
Ну либо через thead или first-child.

Как сделать скролл для body у таблицы?

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

Теория такая: чтобы был скролл, должна быть ограничена высота. Иначе, с чего бы ему начать скроллиться?

Стоит ли начинать готовиться к перечневым олимпиадам по информатике в 10 классе?

Поддержу вопрос выше: какая цель?

Хотела бы участвовать

А тут уже есть ответ. Если хотите участвовать, то имеет смысл готовиться, если есть пробелы в знаниях.

и впринципе что нужно знать и уметь для этих олимпиад

Без сарказма, только конкретика: хорошо бы знать где поисковик и уметь найти в нём задания предыдущих лет.
Если не получится, то можно сэкономить силы и время, отказавшись от затеи.

Есть для готовый плагин для проверки css-переменных со следующими фичами (см. описание)?

https://stylelint.io/user-guide/rules/no-unknown-c...

Как сделать такую сетку?

Минимум - 5 колонок 2fr 1fr 2fr 1fr 2fr
Большим элементам span 2
Можно 8 колонок по 1fr.
Это на глаз. Нужно, конечно, проверить размеры по макету.

Дублирующийся контент - действительно ли это так плохо?

С появлением display contents и grid стало гораздо легче решать задачи, которые раньше могли требовать дублирования или перестроений DOM на JS.
Сейчас в большинстве случаев этого можно избежать.

Поэтому, почему бы и не сделать, как просит SEOшник. Тем более, что он прав и этот аргумент был всегда.

Как выровнять крестик?

vlados096zver, как хотите и смотря как вы храните svg

Как лучше всего реализовать данный фон?

Никита Геннадич,

У меня проблем с ними нет, потому что я ими пользуюсь по назначению, а не для установки основного фона страницы.

По меньшей мере дважды написали, что есть.

Нюансов у псевдоэлементов там не меньше перечислено.

Пока нет примера или ссылки на эти нюансы - пустые слова.

Я вам большой секрет открою: такие вещи как иконки зачастую делаются именно вставкой SVG, либо буквально тегом SVG, либо спаном с бэкграундом, представляете

Представляю, так, действительно делали и делают те, кто не заметил, что 2025.

Я всё ещё не понимаю при чём тут добавление ОДНОГО дива в конкретном кейсе.

Вы и не хотели этого понимать.

Но я и не для вас старалась, а для автора и для тех, кто ещё придёт сюда с аналогичными вопросами.

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

С вами прощаюсь.

Как лучше всего реализовать данный фон?

Никита Геннадич,

Пф... О сколько вам, открытий чудных.

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

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

Вот, например, с этой. Где, как и почему обычные before after у вас перестают одинакового работать внутри тега уже неимеющего начальных стилей при appearance none.

Ну понятно что ещё от z-index родителя зависит.

Верно. И ещё почти десятка других нюансов. В статье на MDN перечислены.

При чём тут экономия вообще? В современных сайтах десятки тысяч узлов, на это вообще плевать полностью.

Смартфонам не плевать.
Месяц назад был сайт, на смартфонах скрипел. Убрали около 10 тыс нод, сократив примерно на треть, забыла сколько точно было до, можно по коммитам посмотреть, если прям интересно. Стало заметно легче.

Во-первых у списков есть list-style-image

Есть, конечно. Ещё бы к нему можно было что-то ещё хорошее применить.

. Да, в целом семантическая вёрстка это здорово, но учитывая что в коде всё равно неизбежно торчит куча IMG или SVG этот аргумент смысл теряет.

Если эти img это декоры, а не контент, то не понятно, что они делают в разметке.

С svg аналогично. Кроме случаев сложной анимации или другого взаимодействия (например, карта с областями или схема этажа и тд) svg в разметке делать нечего. Современные спрайты (стеки) работают из css, кастомные свойства оттуда же, смена цвета тоже. Даже прилетевшая с бэка в атрибут style кастомка будет лучше.
Если на ваших сайтах они до сих пор в разметке, имеет смысл хотя бы на новых сайтах переходить на светлую сторону.

Ладно, я понял. Продолжайте верстать как вам нравится. У меня нет вопросов к вам.

Да, и бэки и, как оказалось, фулстеки не хотят понимать этих нюансов, считая верстку несущественной фигней и верстая по принципам 2010 или даже раньше. Но то, что уже видите мусор на большинстве сайтов немножко обнадеживает.

И что-то пока я ни единого внятного аргумента почему простой и очевидный способ с дивом плох я не вижу

Мне жаль, но может быть через некоторое время.

Кстати, можно загуглить критерии качественной вёрстки. В большинстве будет что-то типа "нет лишних тегов используемых только для стилизации и которые можно заменить на псевдо".
Например, начать отсюда https://habr.com/ru/companies/htmlacademy/articles...

Думаю, для ТС тут уже полно материала для размышления и выбора варианта решения.
Пожалуй, главное помнить, что это решение выбирается не на всю жизнь и в разных ситуациях можно выбирать разные подходы.

Как задать прозрачность изображению?

jjsso, Пройдите интерактивные тренажеры в htmlacademy.ru уже будет полегче

Как задать прозрачность изображению?

jjsso,

может найду решения

В смысле, "может"?

<div>
  <header/>
  <section class="intro"/>
</div>

div {
 background: url() left -20px repeat-y;
 }

20px это сдвиг вверх, посмотрите сколько он в макете.
Сама картинка из 8 лепестков: два первых ряда.

Что тут искать? Простейшие свойства.

Вроде тема фонов это одна из первых тем по CSS. Где вы учитесь, что вам не рассказали даже такой базы?

Если подразумевается, что налево фон повторяется до края окна, а контент центрирован, то структура такая же, фон псевдоэлементу с шириной 50% - "что там выходит от правого края фона до центра".
Тогда в качестве самого фона берем 4 лепестка и репитим и по горизонтали и по вертикали.

Как лучше всего реализовать данный фон?

Никита Геннадич,

Имел ввиду, разумеется, position: absolute, исправил в ответе.

Ага
Со всеми приключается.

Нет там ничего сомнительного, это просто номер слоя, в чём тут можно запутаться?

z-index
Вопрос вам, как профи (просто, чтобы вспомнить, что всё не так просто):
На странице есть элементы с z-index 0, 20 и 99. Всегда ли 99 будет поверх двух остальных?
Для новичков про нюансы контекста наложения:
css.yoksel.ru/kontekst-nalozheniya
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

В чём минус отдельного дива не понимаю до сих пор.

Давайте так: повторю, что один див вообще не сделает погоду и мы не будем говорить про экономию на спичках. Будем считать, что страница сложная и есть за что бороться и что оптимизировать.

before/after vs div

Простые аргументы:

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

(Если вернуться к тому же z-index или избавлению от него, совсем элементарная замена before на after поменяет порядок наложения элементов. В случае div, придётся переставлять его в разметке.)

Яркий пример: современная стилизация радио и чекбоксов. Можно нагородить древний огород из пустых тегов и сложных селекторов. (Написание таких селекторов, несомненно, очень полезно при обучении и изучении работы CSS, но в реальных проектах лучше без них)
А можно использовать appearance none и стилизовать напрямую, а также использовать before/after этих инпутов.

Посложнее:

Чем сложнее DOM дерево, тем тяжелее будут работать сложные селекторы.
Это же усложнит и замедлит операции, связанные с обходом, поиском и манипуляциями через JS.
При замене на псевдо снижается нагрузка на память, поскольку каждый DOM-элемент — это объект с собственными свойствами и событиями, а псевдоэлементы — лишь часть визуального оформления.

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

В вопросах на stackoverflow и других частных ресурсах есть примеры исследований скорости рендеринга и fps при анимациях, легко гуглятся. Не хочу приводить сюда ссылки, потому что кроме этого там есть и устаревшая информация. Да и думаю, что вы, как профи, можете самостоятпельно сотворить такой тест, если действительно интересно.

Представьте, что спискам на сайте нужно добавить стрелочки/галочки/звёздочки. Вы же не станете засовывать в каждый по пустому спану. (Я надеюсь)

Почему-то один из популярных запросов ко мне: у нас тупит страница, хепл плиз. Речь в основном о длинных страницах или многоблочных лендингах. Обычно с них удается удалить пару десятков тысяч узлов. Конечно, тут роль играет не только количество, но и их вложенность.

Псевдо для стилизации применять — это всегда кривые-косые костыли, которые везде по разному выглядят.

Действительно по-разному могут работать всякие ::marker, специфические псевдо инпутов или селектов и т.д.

::before и ::after работают всюду одинаково и их стилизация отличается от div только
1. Наличием content
2. По умолчанию разным display, у div он блочный, у псевдо инлайновый.
3. Начальный порядок "элементов". Before всегда первый, after последний, div можно вставить куда угодно.
Всё.

Если у вас что-то пошло не так, приходите с отдельным и конкретным вопросом с примером. Можете даже позвать.

Как повторить фильтр с фигмы?

vlados096zver, часто такие картинки дешевле экспортировать как png, даже с учетом разной плотности и т.д., чем блюрить.
Но окончательное решение, конечно, зависит от ТЗ и того что в макете.

Как лучше всего реализовать данный фон?

Никита Геннадич,

а в чем проблема прилипшего фона?

Ни в чем, кроме того, что он там не должен прилипать. Он там с девушкой дружит.
Пятно само по себе могло бы и прилипнуть десяток или пару десятков лет назад (когда там bg attachment было модно), но с девушкой - очень сомнительно.
Но это скорее вопросы к дизайнеру или ТЗ.

Что не так с z-index? Тоже какие-то проблемы о которых рассказали на курсах?

С одним - ничего или близко к тому для современных браузеров.
Только зачем вообще, если можно без него.

очевидно z-index должен быть выше

Очевидность работы z-index вообще сомнительна, а для новичков особенно.
И пока не появилось прозрачности или трансформа или других аспектов меняющих контекст наложения, всё будет хорошо. Но мы вообще не знаем, что там ниже в макете.

У вас, видимо, привычка верстать всратые убогие лэндинги ни на секунду не задумываясь о том как ими люди пользуются. Как и у вашего дизайнера.

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

Как лучше всего реализовать данный фон?

Никита Геннадич,

а, то есть transform это гораздо лучше отдельного дива?)

Т.е. вы всё таки знаете минусы лишнего дива вместо псевдика. Уже хорошо.

Но нет, трансформ не лучше.
Лучше просто фоном.
Но если выбирать между псевдо с трансформом и дивом с ним же, то лучше псевдик.