Ответы пользователя по тегу CSS
  • Почему не получается анимировать svg?

    @lagudal
    Можно без js, только надо анимировать элемент svg - в вашем случае это координаты path, a не top etc.
    Как вариант - ваши 2 стрелки в один связанный контур, его координаты стандарт и по hover, анимировать ваш класс fil1 как следующий элемент по + предыдущего селектора fil0.
    Единственное еще, измените свои стрелки, такое чувство, что у вас обрисованные тяп ляп из растра - у font awesome можно взять четкие. Иначе анимация возможно будет скачком, а не плавно.
    https://codepen.io/lagudal/pen/oPpOQm
    Ответ написан
    Комментировать
  • Css grid не работает в IE11?

    @lagudal
    Это означает, что для ие11 надо отдельно прописывать стили, начиная с самого определения display:gird;
    и ниже: display: -ms-grid;
    ну и все свойства дублировать для ие.
    Это несложно, но надо повозиться, потом привыкнете.
    К примеру, для него нет grid-gap, все отступы прописываются явно, как отдельная колонка.
    Как то так
    .startGrid {
    	display: -ms-grid;
    	-ms-grid-columns: 32% 20px 32% 20px 32%;
    	-ms-grid-rows: auto 20px auto 20px auto;
    }
    В этом примере 3 колонки, 2 ряда, между ними по 20 px отступы.
    Что неясно легко гуглится по -ms-grid
    Ответ написан
    4 комментария
  • Почему Не срабатывает в margin top через @media?

    @lagudal
    ну или как крайний вариант использовать !important
    Ответ написан
    Комментировать
  • Каждый из цветов SVG двигался по кругу при наведении?

    @lagudal
    смотртя что конкретно и для каких целей: если это будут графики, которые должны "крутиться" чисто условно, по сути заполняться до какого - то уровня, то нужен будет немного другой подход.
    Если реально просто крутиться - то transform:rotate как в предыдущем ответе.
    Хотя не очень понимаю смысл, для чего нужно такое вращение.
    Если для wow-эффекта, то можно еще посмотреть в сторону анимации stroke - тут и тут - вращение колес выглядит очень даже...
    Ответ написан
    Комментировать
  • Баг с font-awesome или кривые руки?

    @lagudal
    у вас font-awesome подключен аж 3 раза - 2 раза в head ´
    <link rel="stylesheet" type="text/css" href="typo3conf/ext/multishop/templates/css/font-awesome/css/font-awesome.min.css?1528109206" media="all">

    <link rel="stylesheet" type="text/css" href="/fileadmin/templates/extern/font-awesome/4.6.3/css/font-awesome.min.css?1531392793" media="all">

    и один раз импортом, что вы и указали -
    @import url ("https://netdna.bootstrapcdn.com/fonz-awesome/4.6.3/css/font-awesome.min.css")


    один из подключеных в head, 4.4.0, два других показывают 4.6.3, из них что подключается с bootstrapcdn видимо как раз включает те иконки, что нет в других.
    Уберите эту чехарду, подключайте нужную версию только один раз, все равно в каком месте, и все будет нормально
    Ответ написан
    Комментировать
  • Каким образом создать эффект 3D в html?

    @lagudal
    Для демонстрации, несколько лет назад впечатлила вот такая реализация - немного отличается и не 3D конечно, зато на чистом CSS. Для кружки, если кружка с ручкой, надо будет еще добавить анимацию ручки, в принципе, несложно.
    Ответ написан
    Комментировать
  • Что лучше использовать: png картинку или подгружать шрифт?

    @lagudal
    1. Если речь только об одном лого - то зачем шрифт? Из-за одной картинки однозначно не стОит огород городить со шрифтом.
    Другое дело, если планируется в проекте использовать достаточно много нестандартных иконок, которых нет в других шрифтах типа awesome, то возможно и шрифт, почему нет.
    Я сейчас как раз для фирмы разрабатываю иконочный шрифт, на данный момент там порядка 100 глифов, все довольно специфичные, ну и лого тоже включил в шрифт, где то возможно тоже пригодится )))
    2. Если сравнивать размеры png и svg - скажем так, если выводимый размер небольшой, и в лого присутствует текст, или тексты, с переведенными в кривые шрифтами, то скорее всего меньший размер, а значит и предпочтительнее, будет png.
    Из последнего опыта: лого без подзаголовка снизу в svg весит чуть больше 1кб, с заголовком - уже около 15 кб. То же лого с заголовком в png в размере примерно 130х70 - тот размер, что выводится на сайте - весит около 9 кб. Поэтому выбор пал на png.
    Ответ написан
    Комментировать
  • Могу ли я использовать pro версию fontawesome в своих сборках cms?

    @lagudal
    насколько я могу видеть, в лицензии четко написано, что можно и что нельзя
    https://fontawesome.com/license
    Ответ написан
    Комментировать
  • Больше время ttfb. Как уменьшить?

    @lagudal
    Совсем недавно столкнулся с подобной проблемой, решал ее в том числе и тут на тостере. Только не wp, а magento2, точнее, тема, используемая в шопе, была тому причиной.
    Как решали.
    1. Тесты, много тестов на разных серверах и условиях, помогли точно убедиться, что причина именно в теме.
    2. Профайлер, логирование запросов помогли определить несколько наиболее требовательных модулей, поставляемых с темой.
    3. Отключение этих модулей никак не повлияло на ttfb, а вот полное удаление всего лишь одного из них - в моем случае - mega menu от разработчика темы - существенно.

    В случае с wp - я бы поначалу отследил, где проблема точно - в теме, в плагинах, может быть в хостинге(сервере).
    Полагаю, сделать это не сложно...
    Ответ написан
    Комментировать
  • Как работать со шрифтовыми иконками?

    @lagudal
    по моему icomoon поддерживает нормально только svg контуры без заливки - path:fill="..." stroke="none".
    Могу ошибаться, но я пришел к тому, что преде экспортом в icomoon всегда делаю только один составной контур и всегда только черным. С тех пор проблем не было.
    Ответ написан
    Комментировать
  • Как сделать такой background?

    @lagudal
    Я за svg вариант - можно вывести как кодом, так и как картинку. При любом из этих вариантов данный фон будет легкий, не более 1кб. Картинка растр по любому в высоком разрешении будет тяжелее, к тому же вектор всегда вектор, без потери качества.
    Ответ написан
    Комментировать