alex_web64

Здравствуйте. Есть такой пример jsfiddle.net Можно как-то заставить изображение сжиматься по высоте, занимая все доступное место контейнера, но не более? На ум приходит только абсолютное позиционирование.

Здравствуйте. Есть такой пример. По окончании анимации path должен закрашиватся градиентом. Везде работает, кроме safari на ios, фон остается белым. Подскажите в чем причина и как это исправить?

Супер. Спасибо!

В фф иконка не по центру.

Все три примера с моей ссылки - это попытки добиться одного нужного результата. В первом блоке у меня отображено желаемое поведение ссылки (бордер у каждой строки, пустота во второй строке не кликабельная). Во втором блоке работает вертикальное выравнивание иконки, но бордер уже применился к блоку. Строк неограниченное количество, иконка должна выравниватся отностельно всех строк, а не первой, не подчеркиватся, но тот уже как получится. Вот внешне и по поведению идеальный результат https://jsfiddle.net/vde4u218/, но пришлось добавить два тега ссылки, чего хотелось бы избежать.

https://jsfiddle.net/q2Lfaew5/2/ Пытаюсь добавить иконку к ссылке. Казалось бы, довольно простая задача, но есть несколько условностей, из-за которых пока ничего не получается. 1) Текст должен быть inline-элементом. Для того, чтобы к каждой строке применялась граница, и пустота в них была не кликабельной (как в первом примере). 2) Иконка всегда должна быть вертикально отцентрированная. Реально ли это сделать?

Здравствуйте. Почему в этом примере https://jsfiddle.net/pk2rgj3o/4/ в IE11 не срабатывает max-width для изображения? Мне нужно, чтобы фото не выходило за пределы родителя, при этом его ширина и ширина flex-item оставались автоматическими. В данный момент я нашел два решения этой проблемы: 1) width: 100% для фото и 2) flex: 1 для flex-item, но они оба не подходят.

Здравствуйте. Мне необходимо вывести вертикальные однопиксельные линии через равные промежутки. Что-то примерное я нагуглил https://jsfiddle.net/6eq501tz/ Но проблема в том, что линия должна всегда находится в центре экрана. Если уменьшите ширину экрана в демо таким образом, чтобы помещались только две линии, то увидите, что при background-position: 50% 0; линии располагаются по краям экрана. Второе - на некотором разрешении в фф линии исчезают. Может есть другие идеи, как реализовать подобное, или пофиксить текущий вариант? Upd: получилось отцентрировать с помощью calc https://jsfiddle.net/8ztwr95e/ Проблема с исчезающими линиями в ФФ актуальна. Кстати, глянул в хроме - там линии постоянно отображаются, но меняется ширина в пределах 1-2px

https://jsfiddle.net/qvberz4d/

Здравствуйте. Сейчас все большую популярность набирает вывод иконок на сайте с помощью тегов svg>use. Для создания наборов я использую сервис IcoMoon. Проблема в том, что при выводе одной и той же иконки с помощью шрифта и тегом качество последней оставляет желать лучшего. Если на больших размерах разница не так заметна, то на маленьких все совсем плохо (см. скрин. Иконка menu c набора FontAwesome). В интернете находил советы применить к тегу svg transform: translateZ(0); или shape-rendering: crispedges; В случае с иконкой-бургером это решает проблему, но с чем-то более сложным результат выходит еще хуже, чем был до этого. Еще и ФФ при некоторых размерах шрифта обрезает иконки на несколько пикселей. При этом иконочный шрифт работает превосходно отображает любые иконки и в любом размере. Как мне добиться такого же качества, как у иконочных шрифтов?

Здравствуйте. Есть вот такой пример https://jsfiddle.net/5dnz61qu/ Мне нужно, чтобы центр зеленого блока всегда находился в центре родительского. У меня два варианта, но они оба мне не нравятся: 1) Абсолютное позиционирование. 2) Задать синему блоку такую же ширину, как и в красного. В блоках динамический контент, поэтому хотелось бы, чтобы они могли занимать все свободное пространство, а с этим вариантом такого не получится. Есть еще идеи?

Здравствуйте. Есть простое на первый взгляд задание - нужно после перезагрузки страницы прокрутить ее к определенному блоку. В чем состоит проблема: вешаю на window обработчик onload, чтобы отследить загрузку изображений и страница получила свою высоту до всех мнипуляций, после чего вызываю скрипт прокрутки. Но существенная часть пользователей сайта из Украины, у которых из-за санкций не грузятся скрипты и счетчики яндекса, рамблера, вк и другие, установленные на сайте. В итоге, событие onload все еще ждет загрузки, и выполняется через минуту-две, как и скрипт для прокрутки. Перезагрузка страницы вызывается кодом location.reload() чаще всего в тот момент, когда высота страницы уже стабильная, и скрипты, которые еще подгружаются, не влияют на нее. Поэтому пробовал вариант с прокруткой страницы до вызова перезагрузки. В некоторых браузерах все отлично, выполнил скролл, обновил, и после загрузки прокрутка осталась на том же месте. Но не в сафари, он грузит сайт с позиции 0, 0. Какое есть решение в этом случае? Есть другие варианты, как сделать прокрутку к нужному блоку не дожидаясь полной загрузки всех ресурсов?

Сделал фиксированной по высоте шапку, а дальше calc и 100vh. Спасибо за идею с этими единицами измерения.

Естественно я проверял ваш код, и вполне очевидно, что он не будет работать. Сделал более наглядный пример для вас https://jsfiddle.net/j0wqL4mh/24/ Вы видите все 50 пунктов?

меню находится в шапке и позиционируется относительно ее, при top: 100% - от ее нижней точки. Поэтому, если к меню применить max-height: 100vh, оно будет выпадать с области просмотра снизу экрана на высоту шапки. Конечно, можно сделать шапку фиксированной по высоте, что очень не хочется, а для меню прописать max-height: calc(100vh - высота шапки). Но в идеале - все размеры должны быть динамические.

нужно еще учитывать высоту шапки, она тоже динамическая. А меню начинается от ее нижней точки

Здравствуйте. На сайте есть шапка с position: fixed, в которой есть выпадающее меню position: absolute. В этом меню может быть очень много пунктов, из-за этого на мобильных устройствах они выходят за край экрана. Прокрутка не помогает, так как шапка зафиксирована вверху сайта и все это остается на месте. Мое решение - добавить скролл для меню. Но как это сделать, если оно имеет динамическую высоту? jsfiddle

Теперь понял, спасибо.

но ведь явное применение display: block влияет на них, меняя расположение. Значит они не до конца блочные

в теории так и должно быть, но в моем примере видно, что это не так, что собственно и вызвало у меня вопросы. Псевдоэлементы после применения к ним position: absolute должны становиться блочными, согласно спецификации, и располагаться слева кнопки. На деле же такого состояния можно добиться только явно прописав им display: block, до этого они ведут себя как строчные элементы, начинаясь с центра кнопки. И второй теперь уже вопрос, почему отключение display: block в инспекторе никак не влияет на положение элементов, хотя удаление с исходников влияет.

Действительно. Но что интересно, если сделать то же самое, убрав из кода .btn2 .hamburger-inner::after, .btn2 .hamburger-inner::before { display: block; } и обновив страницу, то кнопка меняется.

Можно, но меня интересует причина такого поведения.

Здравствуйте. Все время считал, что после применения абсолютного позиционирования к элементам их свойство display по умолчанию устанавливается в block. Но сегодня пришлось усомниться в этом. Смотрите пример https://jsfiddle.net/9z3ehbpa/2/ Две последние линии каждой из кнопок созданы с помощью ::before и ::after (display: inline по умолчанию developer.mozilla.org). При этом для второй кнопки псевдоэлементам прописано свойство display: block, что, по идее, лишнее, так как это происходит по умолчанию для position: absolute (согласно таблицы inline превращается в block www.w3.org) Почему же кнопки отображаются по разному?

Спасибо, я как-то до этого не додумался изначально.

Здравствуйте. Есть строка вида: (+text) Мне нужно удалать плюс или минус, но только в том случе, если они стоят после первой скобки. То есть должно получиться следующее: (+text) => (text) (-text) => (text) (t+ext) => (t+ext) У меня хватило знаний только составить такое рег. выражение, но оно ищет первое вхождение символов, а не проверяет символ на второй позиции: string.replace(/\+|\-/, '')