Ответы, понравившиеся пользователю Иван Фронтендов

Задать вопрос

Профиль пользователя заблокирован сроком с 26 февраля 2020 г. и навсегда по причине: Нарушение правил, п.6.4, 6.6

Лайки

Как еще ускорить верстку?

Vyach Gor @sharnirio
Front-end developer

Из необычного, пожалуй могу посоветовать, написать дополнительный скрипт на bash или node для быстрого создания блоков - по типу открыл проект в консоли, прописал что то по типу "new-block name-new-block" и автоматически создается html файл этого блока с базовой разметкой и классами (с именем этого блока) + этот файл подключается в нужный основной html файл (использую gulp-rigger для таких целей) + классы также автоматом добавляются в конец основного файла стилей, ну и проверку на существование блока не забудьте что б не перезаписывать существующие + можете под себе и свою структуру модернизировать скрипт как хотите: по типу отдельная папка для каждого блока и тд.

Ответ написан более трёх лет назад

Комментировать

Комментировать
Как сверстать пунктирную линию между двумя частями текста?

Антон @Eridani
Мимо проходил

Зачем Вам бутстраповские колонки для этого?
Это обычная таблица
https://jsfiddle.net/aynf8d05/

Ответ написан более трёх лет назад

Комментировать

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

Alex @streetflush

https://ru.bem.info/methodology/quick-start/

Ответ написан более трёх лет назад

Комментировать

Комментировать
Почему высота блока получается больше высоты дочерних блоков?
Вадим Кот @vadimkot Куратор тега CSS
Уберите для .card-item-wrapper .item-block display: inline-block;
В случае с css columns inline-block бессмыслен, да и еще и добавляет внизу отступ (есть такой нюанс при работе css columns с inline-block в некоторых версиях webkit браузеров).
А чтобы перенос происходил так, как у вас был с inline-block, добавьте breake-inside:
.card-item-wrapper .item-block { padding: 0 15px; margin-bottom: 1rem; max-width: 100%; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }

Ответ написан более трёх лет назад

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

Hlib @Mysianio
вайти в айти

Все верно
В 2019 году грех не пользоваться flexbox или grid, все актуальные браузеры поддерживают их, по этому можете смело пользоваться.

Ответ написан более трёх лет назад

1 комментарий

1 комментарий
Вёрстка двух блоков разной ширины с разными фонами до краёв экрана - как?

Вадим Кот @vadimkot

Так нужно?
snippet
https://codepen.io/web-tech/pen/zVRxeW

Ответ написан более трёх лет назад

3 комментария

3 комментария
Как сделать такую вещь?

Вадим Кот @vadimkot Куратор тега CSS

Это vertical timeline
Вот примеры:
https://codepen.io/letehaha/pen/xOxdze
https://codepen.io/shadowrogue42/pen/OYyoqN
https://codepen.io/AndreyUgarov/pen/xOrARE
https://codepen.io/knolaust/pen/ONXXJj
https://codepen.io/stefan-baumeler/pen/rLMmzg
https://codepen.io/mizpayne/pen/OROWdj

Ответ написан более трёх лет назад

Комментировать

Комментировать
Article или section, без заголовка, как вернее?
Вадим Кот @vadimkot
Заголовки у секций должны быть в любом случае. Необходимо думать и о accessibility сайта. Скринридеры должны четко видеть структуру сайта. Есть разные способы: aria-label, aria-labeledby, visually-hidden паттерн (https://htmlacademy.ru/blog/useful/css/short-12). Подробнее об этих методах почитайте в статье на css-tricks https://css-tricks.com/how-to-section-your-html/#a...
А разметка в вашем примере будет примерно такая
<section class="page-section advantages"> <h2 class="visually-hidden">Наши преимущества<h2> <div class="container advantages__container"> <div class="advantages__item">advantage1</div> <div class="advantages__item">advantage2</div> <div class="advantages__item">advantage3</div> </div> </section>

Ответ написан более трёх лет назад

8 комментариев
8 комментариев
Почему на телефоне меняется шрифт?

Дмитрий Шмаков @DimaDSblog
Пытаюсь разобраться во всем этом

А у меня отображается шрифт Adobe Garamond Pro.....

Ответ написан более трёх лет назад

Комментировать

Комментировать
Почему на телефоне меняется шрифт?

FeST1VaL @FeST1VaL
Тихий

1. У вас отсутствует глиф скорее всего на букве E и используется Times New Roman.
2. Я не вижу никакого Lora шрифта)
3. Большая часть вообще Arial
4. Большое кол-во шрифтов это плохо, темболее не стандартных

Решение: попробовать поискать этот шрифт еще где нить... вдруг там будет буква E... но не верю в это))

Ответ написан более трёх лет назад

8 комментариев

8 комментариев
Как сделать отступы в тексте через css?

Вадим Кот @vadimkot Куратор тега CSS

1. Тег pre https://developer.mozilla.org/en-US/docs/Web/HTML/...
2. Свойство white-space установить в pre https://developer.mozilla.org/ru/docs/Web/CSS/whit...
3. Вполне нормально переносы расставлять с помощью br. Тег br плох для отступов между элементами.
В данном случае как раз br и является актуальным вариантом. Предрассудки по поводу его глобального неиспользования связаны лишь с непониманием его предназначения и его ложным использованием в качестве отступов.

Ответ написан более трёх лет назад

Комментировать

Комментировать
Не работают кнопки, как исправить?

Вадим Кот @vadimkot

Все отлично работает https://codepen.io/web-tech/pen/LoRbpQ
snippet
Если у вас какие то проблемы возникли, то ссылку на воспроизведение этой проблемы. Иначе гадание по кофейной гуще только возможно.

Ответ написан более трёх лет назад

3 комментария

3 комментария
Где я накосячил с флексами?

Ankhena @Ankhena Куратор тега CSS
Нежно люблю верстку

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

https://jsfiddle.net/mdeoxjb6/

Ответ написан более трёх лет назад

4 комментария

4 комментария
Есть плагин для БУРГЕР меню?

Арсений Матыцин @ArsenyMatytsyn Куратор тега CSS
Руководитель frontend направления, предприниматель

Если ОБЫЧНО пишешь САМ, то также можно использовать ПОВТОРНО.
Удивительно, но это работает.

Ответ написан более трёх лет назад

Комментировать

Комментировать
Как на css делать круг по середине линии?

ⓒⓢⓢ @JRK_DV
Рецепты https://codepen.io/jrkdv/full/LKLXdq

можно фоном, например так
https://codepen.io/anon/pen/PvwyQe?editors=1100

Ответ написан более трёх лет назад

2 комментария

2 комментария
Какую библиотеку используют для такой анимации?

Виталий Кузнецов @vitaly44
Предприниматель, веб-разработчик, дизайнер

https://michalsnik.github.io/aos/ хорошая, перешёл на неё с wow.js

Ответ написан более трёх лет назад

1 комментарий

1 комментарий
Почему не отображается псевдоэлемент befor?

Дмитрий Карпов @dimonos33ru

Для одного того же элемента .item-web::before, два раза стили прописали

Ответ написан более трёх лет назад

16 комментариев

16 комментариев
Как сверстать такое?

archelon @archelon

Можно просто картинкой, а можно попробовать эту штуку:
https://github.com/anseki/leader-line

Ответ написан более трёх лет назад

1 комментарий

1 комментарий
Как сделать 'умную' сетку?

Islam Ibakaev @devellopah

изобретаешь велосипед
https://isotope.metafizzy.co/filtering.html

Ответ написан более трёх лет назад

Комментировать

Комментировать
JavaScript. Как сделать что бы скрипт работал при определенном стиле css?
GreatRash @GreatRash
if (window.matchMedia("(min-width: 400px)").matches) { /* ширина окна больше или равна 400 */ } else { /* ширина окна меньше 400 */ }

Ответ написан более трёх лет назад

Комментировать
Комментировать