Ответы пользователя по тегу CSS
  • Есть ли плагин для упорядочивания LESS?

    @lagudal
    По первому - декомпиляции css в less- ничего не слышал, потому врать не буду.
    По второму -
    И чтобы также там (желательно) была группировка стилей по медиа-запросам.
    Если нет для PHPStorm, то может есть хотя бы такой онлайн сервис?

    есть group-css-media-queries
    Для разных сборщиков готовые, для webpack, для gulp
    Я в основном пользуюсь gulp, очень удобно.
    Ответ написан
  • Можно скопировать страницы сайта?

    @lagudal
    Не просто можно, а нужно - тем более, если в дальнейшем планируется посадка на cms: как то трудно представляются себе страницы с одинаковым поведением но живущие при этом каждая своей жизнью, со своими классами, ид и тд... если вы еще не работаете с html-шаблонизаторами, попробуйте, потом не сможете без них... я сам не так давно опробовал pug, сейчас уже не понимаю, как раньше обходился без него... вообще как бы сейчас шаблонизаторы здорово облегчают жизнь верстальщика.
    Ответ написан
    Комментировать
  • Где достать вот такую карусель?

    @lagudal
    вообще то там открыто абсолютно owl-carousel используется
    Ответ написан
    Комментировать
  • Как аниамировать svg stroke-dashoffset?

    @lagudal
    А почему stroke-dashoffset: -500; не устраивает?
    Ответ написан
    1 комментарий
  • Как определить и устранить причину, по которой один блок наезжает на соседний?

    @lagudal Автор вопроса
    все, нашел сам - на 2 класса в таблице задана фиксированная ширина:
    на tbody.cart.item .col.item задан width:450px, и на .cart.item .col.price, .cart.item .col.subtotal width:130px
    Ответ написан
  • Как с помощью css сделать вот такой стиль фото?

    @lagudal
    Есть еще вариант с mix-blend-mode - позволяет использовать режимы наложения, удобно тем, что почти как в фотошопе - тем кто привык к шопу.
    Пример
    Ответ написан
    Комментировать
  • Как сделать анимированный border с помощью JS?

    @lagudal
    как тут показали, можно на js, можно на чистом css - а можно и смешанный вариант применить - анимировать стилями по клику, клик обрабатывать js.
    Ответ написан
    Комментировать
  • Как сделать прозрачные буквы?

    @lagudal
    картинка не видна, но если вы сами выделили нужное вам в span - то почему бы просто не задать этому селектору opacity: 0.5; или сколько вам нужно?
    Ответ написан
    Комментировать
  • Как реализовать данный функционал с помощью SVG?

    @lagudal
    я бы сегменты диаграммы делал stroke, без заливки - тогда можно спокойно применить манипуляции с stroke-dashoffset, напрямую воздействуя на эти сегменты.
    В примере я дал им общий класс, и отдельные id, на случай, если нужны также манипуляции с конкретным сегментом по клику или hover какой то сслыки. Здесь hover по ссылке класса .line6-link воздействует через селектор + на следующий за ним сегмент с айдишником line6 - это просто пример, как видно, линк встроен в svg. Если в реальном проекте линки вынесены из svg, то воздействовать так просто не получится, надо будет скорее всего использовать js.

    Ответ написан
    Комментировать
  • Анимация картинки?

    @lagudal
    Вот тоже вариант с png спрайтом - простенькая анимация, но для понимания вашего примера подойдет, я думаю )
    Ответ написан
    Комментировать
  • Почему css гриды не работают на ie11, хотя префиксы выставлены?

    @lagudal
    Потому что в IE 11 необходимо явно прописывать поведение, причем каждому элемену сетки, задавая этим элементам уникальные классы.
    Например, в вашем случае сработает, если добавить следующее.
    <style>
     -ms-grid-rows: auto auto;
    .table-kpi__number-row-1 {
      -ms-grid-row:1;
      -ms-grid-column:1;
      }
    .table-kpi__number-row-2 {
      -ms-grid-row:2;
      -ms-grid-column:1;
      }
    .table-kpi__property {
      color: #262626;
      font-family: "Open Sans", sans-serif;
      font-size: 13px;
      font-weight: 600;
      line-height: 34px;
    }
    .table-kpi__property-row-1 {
      -ms-grid-row:1;
      -ms-grid-column:2;
    }
    .table-kpi__property-row-2 {
      -ms-grid-row:2;
      -ms-grid-column:2;
    }
    .table-kpi__edit-row-1 {
      -ms-grid-row:1;
      -ms-grid-column:3;
    }
    .table-kpi__edit-row-2 {
      -ms-grid-row:2;
      -ms-grid-column:3;
    }
    </style>
    
    	<div class="table-kpi">
        <div class="table-kpi__number table-kpi__number-row-1">320 052</div>
        <div class="table-kpi__property table-kpi__property-row-1">Количество обработанных заявок</div>
        <div class="table-kpi__edit table-kpi__edit-row-1">
            <button class="btn btn--middle btn--blue-bordered">
                <img src="img/icon-edit.svg" alt="">
                <span>Редактировать</span>
            </button>
        </div>
    
        <div class="table-kpi__number table-kpi__number-row-2">92</div>
        <div class="table-kpi__property table-kpi__property-row-2">Процент успешно закрытых заявок, %</div>
        <div class="table-kpi__edit table-kpi__edit-row-2">
            <button class="btn btn--middle btn--blue-bordered">
                <img src="img/icon-edit.svg" alt="">
                <span>Редактировать</span>
            </button>
        </div>
    
    	</div>

    Думаю, смысл понятен
    Ответ написан
  • Gulp.js - минификация CSS?

    @lagudal
    А вы с предпроцессорами не работаете, или как? Не проще ли настроить чтобы gulp-sass к примеру компилировал и выдавал на выходе уже минифицированный css?
    Ответ написан
  • Как загрузить код (с js,css,fonts) одностраничника, доступ к которому под логином?

    @lagudal
    Т.е. вы хотите что называется рипнуть сайт? Если вы уверены что сайт чисто html css js то есть несколько вариантов. Самый простой - окрыть сайт после авторизации в devtools и постягивать все что надо.
    Вроде еще можно настроить телепорт или подобные программы для скачивания структуры сайта целиком - но я давно не имел с ними дел и не знаю честно говоря, как там с капчами сейчас. Может и есть нужное решение.
    Но вообще подобное чаще всего для того и применяют, чтобы труднее было стянуть.
    А может быть ведь еще одностраничник на php, или на фреймворках, типа angular react vue, там вообще мало что сделать можно.
    Ответ написан
    Комментировать
  • Возможно ли поменять цвет точки над i в CSS?

    @lagudal
    Вообще смотря какая цель преследуется выводить лого шрифтом - если чисто исходя из того, что создано прикольное и простое лого на основании игры шрифта, возможно, лучшее решение было бы сделать его в svg - если лого действительно не сложное, то в svg оно может быть считанные кб, 1-2, а то и байты. Ну т.е. как векторная иконка. Кроме того, в зависимости от желаний, извращаться можно c svg как душа пожелает.
    ps. кстати не очень давно тоже обыгрывал именно i с точкой.
    https://codepen.io/lagudal/pen/aPgWbw
    Ответ написан
    Комментировать
  • Забыть нельзя использовать, иконочные шрифты?

    @lagudal
    Я для себя использую шрифты, если в проекте используется достаточное количество однотипных иконок.
    Создавать свой или использовать готовые - от ситуации.
    А если пара -тройка иконок то опять таки, в каком амплуа они задействованы, то одиночные svg или спрайты.
    Тут на работе один проект - веду не я - чел подключает полностью font-awesome ровно для 5 иконок в футере.
    Я специально проверил, с сайта font-awesome можно скачать все эти 5 иконок в svg, в общем будет около 3 кб.
    Шрифты и css, которые он тянет сейчас, в сумме составляют 440 кб...
    Ответ написан
    1 комментарий
  • Почему не действует margin-bottom?

    @lagudal
    5c1a97f44e9c0843016399.jpeg
    Еще как действует ))
    Видимо вы только учитесь верстать, ошибок и вообще ненужного куча
    <div class="form>">
    тут лишний тег,
    потом, если хотите оставить ваш слоган внутри формы, все что должно быть справа оберните еще одним дивом, и этому диву задайте float:left,
    либо, как сказали выше, вывести класс slogan из формы , в классе .form можно оставить, убрать у этого класса width:45% и добавить float:left

    float для класса .slogan можно не задавать.
    Но вообще надо учиться просто, посмотрите, как верстаются такие формы, их миллион.
    Для себя попробуйте следующее.
    Прежде чем писать стили, нарисуйте на листке все элементы, в виде блоков, сетки и тд и тп, как вы себе представляете и как оно должно быть. Тогда будет сразу легче, особенно если вы знаете собственно действуют те или иные css-свойства.
    И сразу же думайте, как это будет выглядить при других разрешениях.
    Ответ написан
    Комментировать
  • Правильно ли реализована анимации при скролле страницы?

    @lagudal
    Адаптивность и анимация тут никак не зависят одно от другого - анимация ваша срабатывает на любом разрешении, только вы ее не видите, так как у вас эта адапивность вообще никак не реализована.
    Пишите медиазапросы, которые будут определять поведение для левого и правого блоков, и будет вам счастье..
    Анимацию - да, можно реализовать другими способами, но если сама страница останется нереспонсивной, разницы в том, какая анимация будет использоваться, не будет.
    Ответ написан
  • Как сверстать картинки в виде треугольников?

    @lagudal
    Не обязательно дублировать пути - по дефолту fill:url(#img), по hover fill: #FFA234 - какой у вас там цвет.
    Плюсы тоже можно реализовать, обернуть классом или ид, по дефолту opacity: 0, hover по предыдущему элементы - opacity:1
    Пример:
    https://codepen.io/lagudal/pen/VqaowJ
    фигуры и картинки естественно свои нарисуете.
    Ответ написан
    Комментировать
  • Почему svg теряет свое качество при изменении размера?

    @lagudal
    это не ощущение, у вас таки png внутри -
    <image id="image0" width="1732" height="308" xlink:href="data:image/png;base64
    Ответ написан
    Комментировать