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

IvanKalinin

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

  • Как сверстать тень вокруг не равностороннего треугольника с поддержкой IE9?

    @IvanKalinin Автор вопроса
    Сделал в точности, как того требует дизайн.
    Получилось немного замудрено, и сложновато по структуре, зато без артифактов.

    codepen.io/To_wave/pen/wddZxX
    Ответ написан
    Комментировать
    Комментировать

  • Как реализован скролл на странице линейки?

    @IvanKalinin
    Подскажите какие технологии можно использовать для достижения такого же эффекта.

    CSS, JS

    Пробовал искать по js slider, parallax, но ничего подобного не смог найти.

    Вполне вероятно эффект самописный под конкретный сайт
    Ответ написан
    Комментировать
    Комментировать

  • Как исправить, чтобы оно работало?

    @IvanKalinin
    1. Каких-то проблем с изображением не своем девайсе не увидел.

    2. Текст в желтом круге съезжает из-за padding и/или не понятно, зачем добавленного пустого параграфа p

    Вообще лучший способ центровки элементов (лично мне больше всего нравится) это:
    .circle{
  position: relative;
}

    И чуть чуть магии
    .circle .circle-block p {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}


    Этот блок будет всегда отцентрован вне зависимости от размера родителя и ребенка. (В данном случаем может нужно будет задать max-width:100%)

    В некоторых случаях лучше поиграть с флексами.

    Всю верстку не смотрел, но что касается кнопки (пригодится на будущее), что бросилось в глаза - структура может быть проще.
    Какой смысл вкладывать в еще один div .circle-block?
    .circle-block не содержит стилей. p и .circle-block - оба блочные элементы. Так что < div class="circle-block" > явно лишний.
    Возьмем чуть выше класс называется img-left - а блок по центру. Недочет, которые может запутать при чтении кода.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как убрать overlay меню после после нажатия на ссылку?

    @IvanKalinin
    Например вот так

    $(".menu-overlay a").on('click', function(e){
    $(".menu-overlay").removeClass("open");
    $(".menu").removeClass("open");
  })
    Ответ написан
    Комментировать
    Комментировать

  • Почему исчезает фон в мобильном виде сайта?

    @IvanKalinin
    Во первых.
    В тег <header> вообще никакой фон не добавляется (в т.ч. на десктопах)
    <header id="masthead" class="site-header" style="background-image: url();background-position: center; " role="banner">
...
</header>


    Фоновое изображение, которое мы видим, приходит с <body>
    body.custom-background {
    background-image: url(http:\/\/www.xn----ftbdbyd3b0cg4c.xn--p1ai\/wp-content\/uploads\/2016\/12\/1099364.jpg);
    background-position: center center;
    background-size: auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


    Т.к. фон примеряется ко всему документу (<body>) ( у которого высота на мобильном устройстве 5000 - 6000px), размер указан auto, что примерно равно ширине экрана, а высота фона пропорциональна и сам фон не повторяется, то он позиционируется где-то посередине (2500 - 3000px) не видимой для нас области.
    Как известно, background-attachment имеет проблемы на мобильных устройствах.

    background-attachment прекрасно работает на десктопах, поэтому при инспектировании фон отображается правильно, в отличии от мобильных по описаной выше причине
    Ответ написан
    Комментировать
    Комментировать

  • Задержку анимаций css?

    @IvanKalinin
    В дополнение к коду в комментариях ( )

    .st0 {
..........
  fill-opacity:0;
  animation: dash 35s linear forwards, fillop  ease 12s 5s forwards;
........
}


    Задержку можно писать прямо в свойстве animation (5s)
    Ответ написан
    Комментировать
    Комментировать

  • Как применить nth-child к расположенными друг над другом div блоками?

    @IvanKalinin
    Если вопрос в том, как реализовать
    конструкции :nth-child(even|odd)
    , то
    :nth-child(2n) и :nth-child(2n-1)
    Ответ написан
    Комментировать
    Комментировать

  • Как пофиксить новое сглаживание в Chrome?

    @IvanKalinin
    В подобных ситуациях часто помогает "ручная активация" аппаратного ускорения, путем добавления -webkit-transform: translateZ(0);
    Ответ написан
    1 комментарий
    1 комментарий

  • Как реализовать нормальное отображение картинки как фона на любом разрешении?

    @IvanKalinin
    А нельзя ли по дизайну сохранять пропорции вашего фонового изображения? и тогда получится круто.

    например
    div {
    position: relative;
    width: 100%;
    background: ...........;
    background-size: cover;
}
div::after {
    content:'';
    padding-bottom: 56.25%; // соотношение сторон 16:9
    display: inline-block;
}
    Ответ написан
    Комментировать
    Комментировать

  • Bootstrap проблема с модальным окном?

    @IvanKalinin
    Макс Музафаров Плохое решение с important.

    Для начала следует понимать z-index.
    А именно самое главное - он работает для блоков на одном уровне (по глубине), с т.н. сиблингами.
    Самое первое - неправильная структура html кода. Нужно вынести весь div id="myModal" на тот же уровень, что и оверлей, т.е. после тега <body> или перед </body>, т.к. оверлей блок появляется именно там. На структуру сайта в целом это не повлияет, т.к. оба имеют position: fixed. А вот "магию" увидите, лишь правильно расположив блоки.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать мобильную версию сайта правильно?

    @IvanKalinin
    1. Масшатибрование невозможно потому что оно у вас отключено тут
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    2. Для мобильной версии сайта еще нужно будет дописать стили, используя media query
    Ответ написан
    5 комментариев
    5 комментариев

  • Самообучение фронт - энд на работе не связаной с програмированием?

    @IvanKalinin
    Устроившись недавно на новую работу front end разработчиком очень ясно осознал, что фронтэнд это ДАЛЕКО не HTML+CSS. В такой же ситуации я был на предыдущей работе (было время изучать), но было видимо не правильное понимание фронт-енд, особенно когда посадили пилить приложение на angularJS.
    Так что мое мнение, без плотного занятия (в виде основной работы) крайне сложно будет добиться необходимого результата для зарабатывания в свободное от работы время
    Ответ написан
    Комментировать
    Комментировать