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

strelok011

Ответы пользователя по тегу CSS

  • Перемещать строки таблицы по клику на соответствующую кнопку выше или ниже. Как это сделать на javascript?

    @strelok011
    это вопрос 10-летия на js )
    Я надеюсь, что клики по элементу массива и прочую мелочь вы написать сможете.

    Берем массив, хотим изменить последовательность двух элементов
    вариант со старым js
    var b = list[y];
list[y] = list[x];
list[x] = b;

    b - временная переменная

    вариант на es6
    к примеру массив arr = [1,2,3,4]
    [arr[0], arr[1]] = [arr[1], arr[0]];
    будет массив [2,1,3,4]
    это destructuring assignment.

    А так-то да, заказывайте на фрилансе :)
    Ответ написан
    Комментировать
    Комментировать

  • Как называется данная вещь и как её сделать?

    @strelok011
    А еще она напоминает... комбобокс, список объединенный с инпутом, с автокомплитом и т.п.
    Смотреть можно сюда, либо на различные вариации. Реализация обычно на js, требует некоторой прокачки скиллов
    Ответ написан
    3 комментария
    3 комментария

  • Почему абсолютно заданные элементы теребятся при наведении с transition?

    @strelok011
    Поиграю в экстрасекса, который ковид не угадал.
    Я предполагаю что в момент когда элемент попадает под мышку - ему в ховере дается позиционирование и смещение, причем абсолютное. В результате он пропадает из зоны влияния курсора и бац - состояние ховера отменено, т.к. за пределами курсора.. Дал, дал, ушел - вернулся. И опять блин под курсор. Что в этот момент срабатывает? Ховер конечно. Процессоры сейчас мощные, скорости большие - вот и мерцание.
    Но, если будет таки код доступен для анализа, можно поиграть в эксперда, а не Вангу.
    Ответ написан
    6 комментариев
    6 комментариев

  • Почему тормозят css анимации на iOS?

    @strelok011
    При создании анимаций необходимо избегать изменений цсс свойств, ведущих к перерисовке лейаута. Вот тут есть перечень всех свойств, вас должны интересовать помеченные фиолетовым.
    Анимация без тормозов для смещения блока будет если вместо изменения положения на экране вида bottom: 0, bottom: 200 использовать transition: transform
    Так же рекомендуется добавлять
    transform: translate3d(0, 0, 0);
    - заставляет некоторые устройства запускать аппаратное ускорение.
    Ответ написан
    Комментировать
    Комментировать

  • Как лучше всего сделать данную анимацю?

    @strelok011
    Можно тут посмотреть. Видео - не наш выбор
    Ответ написан
    Комментировать
    Комментировать

  • Проблемы с отображением Slack. В чём может быть причина?

    @strelok011
    Возможно проблема в DNS. Тут надысь ростелеком активно игрался с блокировками.
    Посмотрите тут рецепты еще, помимо смены днс адреса.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как растянуть блок во всю высоту родителя?

    @strelok011
    Для начала - почему вы считаете что высота блока не равна высоте родителя? судя по картинкам (жаль что нет в песочнице кода) он таки равен высоте родителя при установке height = 100%. Вы упускаете момент что в родителе находятся два дива, а не один, и у первого уже есть своя высота! в сумме два блока будут равны 100% + высота первого блока. Только и всего.
    Если вы желаете заполнение фиксированного по высоте родителя вложенными блоками, можно обратиться к флексам.
    у родителя будет display: flex; flex-direction: column; height:...
    у второго дива, который вы хотите дотянуть до края - flex-grow: 1;
    Другое дело - зачем?
    В данном эпизоде я вижу больше проблем в верстке текста с кнопкой.
    Тут вернее было бы у родителя заменить высоту на минимальную высоту, чтобы не обрезать наполняющий контент, разобраться с контентом второго дива, просто задать обертку вокруг текста дивом без фиксации высоты, добавить маржин снизу и следом разместить кнопку.
    Ответ написан
    Комментировать
    Комментировать

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

    @strelok011
    Аналитику в конец. Она не должна влиять на скорость подгрузки значимых элементов и блокировать страницу для пользователя.
    SVG как раз лучше в начало, при этом можно поварьировать подход - ссылку на svg-спрайт, либо прямо инлайном запилить в html и вызывать в нужное место просто по id. Если у вас 10 ссылок на декоративные элементы - это плохой подход. На старых http серверах каждый запрос является высоконагруженной операцией для сервера.
    Основной js - тоже в конец документа, в самый низ либо подключать асинхронно. Инициализация на документ онлоад.
    Суть такого подхода - чем раньше пользователь увидит контент, тем спокойнее он будет и какой-нить гугл спидрейнч вам покажет влияние на первое отображение контента пользователю.
    На истину не претендую, рекомендую всё же такой подход и проверку внесенных изменений у гугла.
    Ответ написан
    4 комментария
    4 комментария

  • Правильно ли в БЭМ применять миксы для задания одинаковых свойств для нескольких элементов?

    @strelok011
    В парадигме scss вся эта ерунда может реализоваться миксом на уровне scss, а не на уровне микс-классов. Не стоит упарываться по идеологии.
    Если вам важна цель - не надо перегружать разметку такими мусорными классами.
    Ответ написан
    4 комментария
    4 комментария

  • Как реализовать анимацию привязанную к скроллу вверх и вниз?

    @strelok011
    Можно посмотреть сюда
    Ответ написан
    2 комментария
    2 комментария

  • Как это исправить?

    @strelok011
    Потому что 
    <div class="support__unification element-animation element-show">
                    <div class="support__buttons">
                        <a class="support__button support__button_1 support__button_active">Финансам</a>
                        <a class="support__button support__button_2">Интеграции</a>
                        <a class="support__button support__button_3">Безопасности</a>
                    </div>
                    <div class="support__images">
                        <div class="support__image_1 support__image_active"></div>
                        <div class="support__image_2"></div>
                        <div class="support__image_3"></div>
                    </div>
                </div>

    изображение с классом support__image_1 support__image_active имеет абсолютное позиционирование, в результате при уменьшении ширины окна браузера получаем паразитный выступ за пределы контента.

    Верстка нехорошая, но в вашем конкретном случае поможет добавление в класс .medium-container атрибута overflow: hidden;
    Это костыль, по хорошему верстку надо переделывать, но тут это поможет от лишней прокрутки.
    Ответ написан
    4 комментария
    4 комментария

  • Как сделать подстраивание ширины ячейки таблицы под содержимое при переносе строки?

    @strelok011
    Нет, нельзя. Если почитать, как именно браузер рендрит строки, то становится понятно, что строка продлевается до самого края и контент переносится на следующую строку, соответственно вся кажущаяся пустота - забронированное место. И это не лечится.
    Ответ написан
    Комментировать
    Комментировать

  • Почему nth-child() не видит изменения в DOM?

    @strelok011
    Лучше переделать всё это на grid, с указанием gap. Один класс на обертке без всяких nth
    Ответ написан
    Комментировать
    Комментировать

  • Возможно ли анимировать форму таким образом?

    @strelok011
    1. Есть вариант анимировать используя фильтр блюр. Поизвращаться придется конечно, но вполне себе будет рабочий вариант

    Пример
    Обязательно нужно учитывать, что фильтр на контейнере применится ко всему что в него вложено, соответственно, эти штуки придется делать на отдельном диве.

    2. Как предложили выше - svg path
    3. Canvas - трудоемкость большая

    Вот подборка примеров "жидких" эффектов
    Ответ написан
    1 комментарий
    1 комментарий

  • Как так же обрезать круг в svg?

    @strelok011
    Посмотрите сюда
    Ответ написан
    Комментировать
    Комментировать

  • Как верстать на React?

    @strelok011
    Ну, помимо того что существуют разнообразные решения react вида material-ui, prime-react, адаптации react-materializecss возникает вопрос - а зачем оно вам?
    Используйте styled components, на контейнер класс с гридом на css, на вложенные блоки - стили с грид-роу или грид-колумн: span на нужное количество через пропсы.. Отличная сетка получится, чес слово :)

    Долой костыли :) Учите матчасть! Фронт который не умеет в css - это КГ/АМ
    Ответ написан
    2 комментария
    2 комментария

  • Зачем так сделано?

    @strelok011
    Есть еще подозрение, что верстка может быть сгенерирована каким-нибудь древним генератором.
    Ответ написан
    Комментировать
    Комментировать

  • Почему Хром игнорирует viewport?

    @strelok011
    указывайте initial-scale
    <meta name="viewport" content="width=device-width, initial-scale=1">


    А еще - видно, что у вас вьюпорт отрабатывает правильно, иначе у вас вся страница была бы отображена на экране и очень мелко.
    Вам нужно либо скорректировать вьюпорт с нужным масштабированием (это зло, управлять оч тяжело), либо делать корректный адаптив - для ширины от 340 до 600 (к примеру) - указываете размер шрифта и картинки отличный от десктопа.
    Нужна ручная работа, на автомате - играть с процентом масштабирования (если сработает, если честно, я таким извратом не баловался)
    Ответ написан
    1 комментарий
    1 комментарий

  • Анимация градиента внутри SVG?

    @strelok011
    Анимацию атрибутов внутри SVG можно реализовывать отдельным тегом Animate

    Пример анимации цвета
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
   viewBox="10 10 24 24">
    <defs>
        <linearGradient id="linear-gradient" x1="0" y1="0" x2="100%" y2="0" >
            <stop offset="0" stop-color="red">
               <animate attributeName="stop-color" values="yellow;red" dur="2s" repeatCount="indefinite"  /> 
            </stop>
            <stop offset="1" stop-color="yellow">
                <animate attributeName="stop-color" values="red;yellow" dur="2s" repeatCount="indefinite"  /> 
            </stop>
        </linearGradient>
    </defs>
<path fill="url(#linear-gradient)" d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" />
</svg>


    Пример анимации офсета
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
   viewBox="10 10 24 24">
    <defs>
        <linearGradient id="linear-gradient" x1="-100%" y1="0" x2="200%" y2="0" >
            <stop offset="0" stop-color="red">
               <animate attributeName="offset" values="0;0.2;0.5" dur="2s" repeatCount="indefinite"  /> 
            </stop>
            <stop offset="0.5" stop-color="yellow">
                <animate attributeName="offset" values="0.5;0.7;0.8;1" dur="2s" repeatCount="indefinite"  /> 
            </stop>
        </linearGradient>
    </defs>
<path fill="url(#linear-gradient)" d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" />
</svg>
    Ответ написан
    Комментировать
    Комментировать

  • Как отключить загрузку изображения браузером при определенном размере экрана?

    @strelok011
    1. Для картинок есть такой тег как picture
    Позволяет подгружать нужное изображение в зависимости от размера окна, подгружать различные форматы изображений, на случай если какой-то не поддерживается.
    2. Что запрещает завернуть в медиа-запрос оба условия?

    @media screen and (max-width: 767px) {   
    .img{
    	background-image: url(http://...);
    } 
}

@media screen and (min-width: 768px) {      
    .img{      
    	background-image: url(http://...);
    } 
}
    Ответ написан
    Комментировать
    Комментировать