alex_web64
-
Posts
131 -
Joined
-
Last visited
-
Days Won
3
Content Type
Profiles
Forums
Calendar
Store
Posts posted by alex_web64
-
-
Здравствуйте.
Есть такой пример. По окончании анимации 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
-
-
Здравствуйте.
Сейчас все большую популярность набирает вывод иконок на сайте с помощью тегов 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 влияет на них, меняя расположение. Значит они не до конца блочные
-
50 minutes ago, Igor Schnaider said:
У
display: block
все наоборот: он сразу стоит там, где вам нужно. И когда вы вынимаете его из потока, его левый/верхний край будет там, где был изначально – влево вверху кнопки.в теории так и должно быть, но в моем примере видно, что это не так, что собственно и вызвало у меня вопросы. Псевдоэлементы после применения к ним position: absolute должны становиться блочными, согласно спецификации, и располагаться слева кнопки. На деле же такого состояния можно добиться только явно прописав им display: block, до этого они ведут себя как строчные элементы, начинаясь с центра кнопки.
И второй теперь уже вопрос, почему отключение display: block в инспекторе никак не влияет на положение элементов, хотя удаление с исходников влияет.
-
7 hours ago, Vlad_P said:
попробуйте убрать в инструментах свойство block для псевдоэлементов во второй кнопке. Ничего не изменится.
Действительно. Но что интересно, если сделать то же самое, убрав из кода
.btn2 .hamburger-inner::after, .btn2 .hamburger-inner::before { display: block; }
и обновив страницу, то кнопка меняется.
-
15 minutes ago, npofopr said:
А можно просто left: 0; задать.
Можно, но меня интересует причина такого поведения.
-
Здравствуйте.
Все время считал, что после применения абсолютного позиционирования к элементам их свойство 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(/\+|\-/, '')
Ограничение высоты изображения
in HTML Coding
Posted
Здравствуйте. Есть такой пример jsfiddle.net
Можно как-то заставить изображение сжиматься по высоте, занимая все доступное место контейнера, но не более? На ум приходит только абсолютное позиционирование.