Ответы пользователя по тегу CSS
  • Что дальше делать с нативными файлами HTML и CSS?

    trushka
    @trushka
    Вот недавно как раз была статья на Хабре
    Ответ написан
    Комментировать
  • HTML5 для IE, и не рабочая table/table-cell?

    trushka
    @trushka
    Для IE надо doctype правильный указать (<!DOCTYPE html>, например), ато он в quirks mode показывает (то есть так, как показал бы IE5(!), который ни о каком display:table ничего ещё не знает)..
    Ответ написан
  • Как правильно изучать верстку c переходом на front-end?

    trushka
    @trushka
    В связи с постоянным развитием технологий, не хочется тратить время на то, что может не пригодиться
    Ну, здесь основной фактор, не является ли данная технология "костылём". Например, та же анимация в jQuery - сейчас есть нативные способы задать анимации с помощью css, а ещё и animation api, если не ошибаюсь в названии, разрабатывается.. Хотя некоторые вещи всё же лучше делать с использованием jquery-анимации.. Или же многие фишки разрабатывались для ИЕ, но в современном вёбе не прижились. Обычно в руководствах по этим делам прямо сказано - работает только в ИЕ.. Хотя многие из изначально чисто ИЕшных фишечек вошли в HTML5. В общем, тут лучше перебдеть, чем недобдеть, ящетаю))
    Ответ написан
    Комментировать
  • Как заставить работать transition?

    trushka
    @trushka
    Там всё неправильно.
    Во-первых transition надо указывать для анимируемого элемента, а не для контейнера - оно не наследуется! То есть, для .hover
    Во-вторых, transition так не указывается - для каждого свойства надо указывать отдельно, то есть transition: opacity .2s linear, transform .3s easy-in-out, например. В данном случае, лучше укороченную запись для all применить: transition: .2s easy-out
    В-третьих, для плавной работы transition нельзя для "свёрнутого состояния" указывать display: none - можно, разве что visibility: hidden для старых ослов указать, по спецификации видимость включается сразу, а выключается в конце трансформации, да и блок как бы отображён, только не показывается, по этому на его прорисовку тратится намного меньше времени. И все размеры, отступы и цвета должны быть заданы заранее - при ховере он только должен выдвигаться и "проявляться" из прозрачного состояния. Ну, и двигать лучше с помощью transform - так плавнее намного
    Вот так примерно: codepen.io/anon/pen/QyGqqz
    Ответ написан
  • Как сгладить транформацию размера a:hover?

    trushka
    @trushka
    will-change: transform может помочь, а ещё на hover можно translateZ добавить
    https://jsfiddle.net/trushka/hx937aer/1/ - это проапгрэженный таким образом ватиант от Игорь Павленко, в ФФ текст прыгает гораздо меньше
    Ответ написан
  • Как сверстать этот элемент?

    trushka
    @trushka
    Так градиент же!)
    https://jsfiddle.net/trushka/0s9bs3r5/
    Ответ написан
    Комментировать
  • Можно ли в input text placeholder вставить ссылку?

    trushka
    @trushka
    Можно на onclick обработчик какой-то повесить, но чтоб срабатывал только если инпут пустой и если он уже в фокусе. Но вообще такое поведение может очень раздражать посетителя - ведь привычное поведение, кликнуть в любом месте инпута, чтоб начать ввод.. Можно, даже не желая того, попасть по ссылке, и вместо ввода куда-то перейти.. полсетители будут, конечно, от этого в восторге))
    Ответ написан
    Комментировать
  • Как сделать прокрутку мышью для лайтбокса?

    trushka
    @trushka
    Все современные браузеры используют событие wheel, а не mousewheel. Я тут недавно делал, вроде с поддержкой даже старых ИЕ и вебкитов (хотя ff 3.5, кажется, ещё так не умел)
    $.event.fixHooks.mousewheel=$.event.fixHooks.wheel={
        filter:function(e, oe){
            e.deltaY=oe.deltaY||-oe.wheelDeltaY;
            if (e.deltaY===undefined) e.deltaY=-oe.wheelDelta||0;
            e.deltaX=oe.deltaX||-oe.wheelDeltaX||0;
            e.deltaZ=oe.deltaZ||0;
            e.deltaMode=oe.deltaMode||0;
            e.toPx=function(el){
                if (e.deltaMode===1) {e.deltaY*=40; e.deltaX*=40; e.deltaZ*=40};
                if (e.deltaMode==2) {
                    e.deltaY*=$(el||this).innerHeight();
                    e.deltaX*=$(el||this).innerWidth();
                };
            }
            return e
        }
    };
    
    if (!window.WheelEvent) $.extend($.event.special, {
        wheel: {delegateType: 'mousewheel', bindType: 'mousewheel'},
        //mousewheel: {preDispatch: function(e) {e.type='wheel'}}
    });

    Почему закомментировано - не помню, может, мне где-то было важно, чтоб не подменяло тип события.. Вообще, подзабыл немного, как оно там в jQuery всё работает, то что я понаписывал.. Но работает) В общем, событие wheel(), направление и величина - event.deltaY. Если надо в пикселах (а браузеры по-разному дельты выдают, причём фф, кажется, вообще выдаёт при реальном колёсике величину в строках, а при жесте на тачпаде - в пикселах) - в начале обработчика выполнить метод event.toPx(), который может принимать в качестве аргумента элемент, размеры которого используются, если прокрутка установлена в "страницах". по умолчанию - this. Кстати, в данном случае и deltaX не помешает проверить - может сработать, если скроллить жестом на тачпаде в стороны
    $('.slide').wheel(function(event) {			
      event.preventDefault();
      event.toPx();
              
      if (event.deltaX>30 || event.deltaY > 30) {
        $this.getPrev();
      } else if (event.deltaX<-30 || event.deltaY < -30) {
        $this.getNext();
      }
    });

    upd: Кстати, у меня в фф на вашем сайте всё прекрасно работает, но, опять же, на горизонтальную прокрутку тачпадом тоже как-то реагировать хорошо бы. И сильно быстро. Щас переписал немного условия, ато при скролле тачпадом в фф по 10 фоток перематывает при малейшем движении. Надо будет подобрать потом величину порога прокрутки (30px)
    Ответ написан
    3 комментария
  • При очистке кэша появляются странные отступы, почему?

    trushka
    @trushka
    Возможно, там что-то подгоняется скриптом, срабатывающим по событию ready(), но оно может сработать до того, как загрузятся и применятся все css файлы. Или картинки, которые могут что-то "раздвинуть" после того, как загрузятся.
    Ответ написан
    Комментировать
  • Как сверстать этот треугольник что бы был как на скрине?

    trushka
    @trushka
    #fourth-page:before {
        content: '';
        position: absolute;
        bottom: -40px;
        left: calc(50% - 40px);
        border-left: 50px solid *розовый*;
        border-right: 50px solid *розовый*;
        border-top: 35px solid transparent;
        background: *тот же, что у верхней полоски, подогнать  позицию*
    }
    Ответ написан
    Комментировать
  • Как зафиксировать минимальную высоту DIV в количестве строк?

    trushka
    @trushka
    div:before {width:0; float:left; visibility:hidden; content:'1 2 3 4 5'/*5 символов (для верности через пробел)*/}
    div:after {clear:both; display:block; content:''}
    Ответ написан
    Комментировать