Комментарии пользователя Ankhena

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

<section class="block">
  <div class="block__wrapper container">
    <h2 class="block__title"></h2>
    <p class="block__text"></p>
  </div>
</section>>

2. Вчера я вам говорила, что неверно подключены шрифты, три повторения. Всё так и осталось.

3. Про БЭМ.
Если начать как раз с семантики, то и блоки легче выделятся и их элементы тоже.
Секции делать section, хедер header, навигацию nav и т.д.

Сейчас у вас вместо БЭМ просто классы с __

4. nav__wrapper - нет родительского блока с классом nav.
И аналогичные ошибки.

5. Логотип это всегда блок. Его переиспользуют много раз.
И аналогичные ошибки.

6. nav__right - не лучшее название класса. Очень странно будет выглядеть такой блок, когда при адаптиве окажется под левым. Называйте по смыслу и назначению.
Если нормального названия не придумывается, то очень может быть, что эта обертка вообще лишняя. Сейчас именно так.

7. Очень много лишних оберток.
background__enjoy - задавайте фон секции.
Enjoy Your Morning Coffee. - этому достаточно одно тега h2. Вместо по крайней мере трёх div.
и аналогичные проблемы.

8. Ни поиск ни другие иконки не являются контентными изображениями, их можно смело убрать в стили. Вместо этого написать текст и доступно скрыть его. Гуглите visually-hidden.

9. <span class="number__card">01</span>
меняется на псевдоэлементы и ol (или ul, если в действительности порядок не важен)

Ещё почему-то меню у вас нумерованный список вместо маркированного. В нём что, поменяется смысл от перемены порядка?

Звезды в 5 тегов img это дичь.
-----

Хватит пока

Написано 23 нояб. 2024

Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?

Ankhena @Ankhena Куратор тега CSS

SQLpodavan228,

box sizing border box у меня подключен прямо к HTML

Что?
Это очень интересная фраза.
Но в предоставленном коде этого свойства нет вообще.
Впрочем, как и паддингов или марджинов у указанного блока, от которых у вас проблемы.

Но по скринам именно так и выходит: мин ширина 550 part-right__wrapper + два отступа по 56 родительскому блоку. Итого родительский блок (т.е. ваш проблемный part__right) как раз и выходит 662.

ссылка на него почему то не скидывается

Достаточно знаний, что он должен быть 550.

Написано 22 нояб. 2024

Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?

Ankhena @Ankhena Куратор тега CSS

По вашему коду ширина part__right выходит 550px.
Поэтому, нужно сделать песочницу с видимой проблемой на codepen.io или аналоги.

Также порекомендую ознакомится со свойством box-sizing.

p.s.
Зачем вы 3 раза подключаете шрифты? Одного раза вполне достаточно.

Написано 22 нояб. 2024

Как отключить MSO в PHPStorm?

Ankhena @Ankhena

Andrew E, у меня в шторме всегда работало и работает обычный dn + tab.
И в любом случае всё эти сокращения точно можно изменить в настройках.

Что за странная логика, выводить первым то, что вообще использует хз кто

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

Но у меня и так первой строчкой показывает нужный вариант, как раз тот, который хочется.

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

Написано 22 нояб. 2024

Как отключить MSO в PHPStorm?

Ankhena @Ankhena

Кажется, подсказки будут нормально работать, если вы будете нормально набирать буквы. Т.е. желая получить display: none, нужно набирать dis или типа того, а не аббревиатуры из эммента.
Если используете эммет, так и нажимайте таб после dn.

Написано 22 нояб. 2024

Почему JS не видит SVG-элементы по ID?

Ankhena @Ankhena Куратор тега JavaScript

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

Поэтому выкладывайте неполучившееся в песочницу на codepen.io

id="Ellipse 3"

Обратите внимание на то, что в id не может быть пробелов.

Написано 22 нояб. 2024

Как на html реализовать блоки "Внимание / Важно"?

Ankhena @Ankhena Куратор тега HTML

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

Если не разбираетесь в верстке, то проще и быстрее попросить на фрилансе.

Если блок с такими стилями повторяется, то их можно вынести всё таки в CSS файл, а в редакторе сделать его применение, по аналогии как для стилей заголовков. Чтобы мог добавить кто угодно.

<section style="padding: 1em; border-left: 4px solid #d9a83a ; border-radius: 8px; background:rgb(252,246,230); color: #49390d; box-shadow:  0 2px 0 #efefef">
  <h2 style="margin-top: 0; text-transform:uppercase;">⚠ Предупреждение</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet natus laborum eveniet? Unde nesciunt, architecto error iste accusamus veritatis? Fuga!</p>
</section>

Написано 21 нояб. 2024

Как на html реализовать блоки "Внимание / Важно"?

Ankhena @Ankhena Куратор тега HTML

без отдельного css файла

Что мешает заинлайнить стили?

Написано 21 нояб. 2024

Как подобрать размер шрифта для баннеров?

Ankhena @Ankhena

1. Найдите баннер похожего размера, подойдите к нему на метр и посмотрите как оно.
2. На любой бумажке распечатайте заголовок выбранного вами размера. Найдите дома подходящую стенку, прикрепите к ней бумажку. Отойдите на метр.

Если я буду использовать 100px

У баннеров проблемы с пикселями.

Adobe Photoshop

Лучше б векторный редактор выбрать.

Написано 21 нояб. 2024

Как сделать border со смещением?

Ankhena @Ankhena Куратор тега CSS

Ещё более симпатичная конструкция, если иконки разные

:root {
--icon-name: url("data:image/svg+xml,%3Csvg width='980' height='980' viewBox='0 0 980 980' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='490' cy='490' r='490' fill='black'/%3E%3C/svg%3E%0A");

--icon-name2: url("data:image/svg+xml,%3Csvg width='200' height='100' viewBox='0 0 200 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H200V100H0V0Z' fill='%23FF6392'/%3E%3C/svg%3E%0A");;
}

.block {
  &::before {
    // разное нужное
    mask: var(--icon) no-repeat center;
    bg: red;
  }
}

.block--mod1 {
  --icon: var(--icon-name);
}

.block--mod2 {
  --icon: var(--icon-name2);
}

Написано 21 нояб. 2024

Как сделать border со смещением?

Ankhena @Ankhena Куратор тега CSS

Aleksey Solovyev,

А как вы вставлять будете иконку через псевдоэлемент? Так:
content: url(path/to/your.svg);

Ну уж точно не так.
Вставлять её через content очень неудобно, если нужно как-то управлять размерами. Но, впрочем, если так подходит для задачи, то почему бы и нет. Но чаще всего не подходит.

В фон или маски, если нужно менять цвет.

И иконки разумнее держать в спрайте, в современном, у которого внутри svg, а не symbol.
Альтернатива: заинлайнить прямо в css. Тоже в кастомки.

:root {
--icon-name: url("data:image/svg+xml,%3Csvg width='980' height='980' viewBox='0 0 980 980' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='490' cy='490' r='490' fill='black'/%3E%3C/svg%3E%0A");
}

.block {
  &::before {
    // разное нужное
    mask: var(--icon-name) no-repeat center;
    bg: red;
  }
}

URL-encoder для SVG

Написано 21 нояб. 2024

Как сделать border со смещением?

Ankhena @Ankhena Куратор тега CSS

Aleksey Solovyev,
суть такая:

.elem {
  --width: 50px;
  bg: linear-gradient(to right, transparent var(--width), white var(--width));
  
  &::before {
    width: var(--width);
  }
}

Написано 21 нояб. 2024

Как сделать border со смещением?

Ankhena @Ankhena Куратор тега CSS

Aleksey Solovyev, не надо считать отступ, для этого есть кастомки.
Инлайнить svg для таких штук в 2024 году это моветон.

Написано 21 нояб. 2024

Как сделать border со смещением?

Ankhena @Ankhena Куратор тега CSS

0x80070005,
Иконки всё таки лучше делать псевдоэлементами. Нечего пустым дивам делать в разметке.
А border можно заменить на градиентную полоску.

И что-то из этого должно быть интерактивным элементом, а не просто дивом.

Написано 21 нояб. 2024

Словил баг с реализацией гридов в Firefox [колонки через repeat(auto-fit) и position: absolute]?

Ankhena @Ankhena Куратор тега CSS

Ivan Ustûžanin, спасибо

Написано 20 нояб. 2024

E.target видит лишь малую область блока?

Ankhena @Ankhena Куратор тега JavaScript

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

Варианта два:
1. Исправить всё версткой. Для клика использовать кнопку. Для плюса - её псевдоэлемент.
И остальные теги тоже использовать по назначению. blockquote тут мало уместен.
Альтернатива: details + summary и немножко js.
2. Изучить статью и скорректировать код. И использовать closest для поиска нужно элемента.

Написано 20 нояб. 2024

Как добавить класс элементу до нужного по списку?

Ankhena @Ankhena Куратор тега JavaScript

Вячеслав Боргомотов, так и подставьте items вместо пятерки и проверяйте, что items меньше, чем количество элементов

var items = 5;
var elements = document.getElementsByClassName("elem");
var length = (items < elements.length) ? items : elements.length;
for (var i = 0; i < length; i++) {
  elements[i].classList.add("red");
}

Написано 19 нояб. 2024

Войдите на сайт