Ответы пользователя по тегу CSS
  • Как сделать визуальный эффект на сайте в виде колонок?

    @alexalexes
    Делать правые и левые отступы, ширину элементов кратно размеру колонки.
    Приведенный пример эту идею и воспроизводит, нужно только покопаться в Elements в панели разработчика браузера, чтобы увидеть эту закономерность.
    Ответ написан
    Комментировать
  • CSS почему сверху отступ??

    @alexalexes
    Начало всех CSS-файлов всегда начинается одинаково как раз из за этого случая:
    html, body
    {
      margin: 0;
      padding: 0;
    }
    Ответ написан
  • Как делаются нестандартные элементы форм доступными, кроссбраузерными?

    @alexalexes
    В идеале, в шапке страницы сайта должен быть переключатель версии дизайна для слабовидящих (по значимости такой же как RUS/ENG).
    Тут есть рекомендации, как сделать версию сайта для слабовидящих. В том числе, обозначен совет, как сделать так, чтобы скринридеры читали заголовки полей формы, но сами заголовки визуально не отображать.
    Если лейбл нужно скрыть, расположите его перед полем, используйте привязку атрибута for и специальный класс для вспомогательных технологий:

    .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
    }
    Этот класс скрывает лейбл визуально, но его прочтут скринридеры. Обратите внимание, что скринридеры и другие вспомогательные технологии, как и браузеры, скрывают элементы с использованием display: none и visibility: hidden.
    Ответ написан
    4 комментария
  • Почему на MacOS криво работает кнопка наверх?

    @alexalexes
    У вас очень тяжелый файл www.annalev.ru/static/bundle/js/bundle.min.js, в котором лежит функция скроллинга, пока он не загрузиться на клиенте полностью, скроллинг не будет работать.
    Решить проблему можно несколькими путями:
    1) Все легковесные функции, которые не зависят от библиотек поместить в отдельный файл, который будет подключаться выше списком, чем тяжеловесные js.
    2) Написать код легковестных функций прямо в документе (или в общем шаблоне страниц, где описывается head или footer, в случае если у вас CMS);
    3) Написать обработчик скроллинга непосредственно в атрибуте onclick.
    PS: Дополнительно, посмотреть, какой функционал можно "выбросить" в подключенных библиотеках.
    Например, на JQuery можно опционально отключать некоторые возможности и скачивать js-файл значительно меньших размеров, чем в полной комплектации.
    Ответ написан
    4 комментария
  • Можно ли задать соотношение сторон изображения?

    @alexalexes
    У меня самый колхозный вариант был: создать png картинку с прозрачным цветом с нужным соотношением сторон (и самых гигантских размеров, каким может быть монитор) и поместить ее в виде img в контейнер на самом глубоком z-значении.
    Пропорции контейнера выравнивались по содержимому и одновременно он мог быть любых не фиксированных стилем размеров.
    Ответ написан
    Комментировать
  • Как избавиться от бага на IOS?

    @alexalexes
    Скорее всего нужен svg формат для гарнитуры шрифта.
    PS: по стопам вопроса Как подключить шрифт для iOS?
    Ответ написан
  • Как убрать белое пространство после футера?

    @alexalexes
    Наведите порядок в этом контейнере, из-за него распирает страницу:
    <div id="container">
    <div id="wb_bs1" style="position:absolute;left:0px;top:616px;width:85px;height:85px;z-index:753;">
    <a id="bs1" style="visibility:hidden;">&nbsp;</a>
    </div>
    <div id="wb_bs3" style="position:absolute;left:0px;top:1670px;width:85px;height:85px;z-index:754;">
    <a id="bs3" style="visibility:hidden;">&nbsp;</a>
    </div>
    <div id="wb_bs4" style="position:absolute;left:0px;top:2984px;width:85px;height:85px;z-index:755;">
    <a id="bs4" style="visibility:hidden;">&nbsp;</a>
    </div>
    <div id="wb_bs6" style="position:absolute;left:3px;top:6143px;width:85px;height:85px;z-index:756;">
    <a id="bs6" style="visibility:hidden;">&nbsp;</a>
    </div>
    <div id="wb_bs7" style="position:absolute;left:0px;top:6713px;width:85px;height:85px;z-index:757;">
    <a id="bs7" style="visibility:hidden;">&nbsp;</a>
    </div>
    <div id="wb_bs8" style="position:absolute;left:0px;top:7372px;width:85px;height:85px;z-index:758;">
    <a id="bs8" style="visibility:hidden;">&nbsp;</a>
    </div>
    <div id="wb_bs9" style="position:absolute;left:0px;top:8586px;width:85px;height:85px;z-index:759;">
    <a id="bs9" style="visibility:hidden;">&nbsp;</a>
    </div>
    <div id="wb_bs10" style="position:absolute;left:0px;top:9129px;width:85px;height:85px;z-index: 10000;">
    <a id="bs10" style="visibility:hidden;">&nbsp;</a>
    </div>
    </div>

    PS: Похоже на какой-то костыль, благодаря чему поддерживается необходимая высота страницы.
    Ответ написан
    2 комментария
  • Как называется данная адаптация?

    @alexalexes
    font-size тоже проценты принимает, но вы ужаснетесь, как он будет тупо все масштабировать.
    Вам все-равно придется корректировать частные случаи медиазапросами.
    Ответ написан
    Комментировать
  • Как заставить крайние правые пункты меню трансформироваться в выпадающий блок при ресайзе окна?

    @alexalexes
    Если чисто в теории, то как обычно - JS. Подписываем на событие resize документа функцию, которая будет отслеживать размер контейнера меню и пересчитывать суммарную длину блоков пунктов меню вместе с отступами и прятать/выносить их в/из особого контейнера в конце списка, либо прятать этот контейнер, если все пункты вмещаются в меню.
    Ответ написан
  • Как сделать, чтобы затемнение модального окна не касалось хэдера и футера?

    @alexalexes
    Можно пробовать отрегулировать z-index заголовка, подвала и блока основного контента сайта так, чтобы z-index блока .overlay был выше блока основного контента сайта, но меньше чем z-index заголовка и подвала. Однако, есть риск, что само окно будет заползать за элементы страницы (так же поиграться с этим свойством у окна).
    Собственно, нужно будет отработать возврат свойства z-index к прежним значениям после закрытия окна.
    Ответ написан
    Комментировать
  • Как остановить выполнение setTimeout на 2 шаге?

    @alexalexes
    Можно.
    function highlightcurrent(items, index) 
    {
      if(index != 2) // выходим из функции, если достигли определенного индекса
      {
        items.removeClass("highlightcurrent");
        items.eq(index).addClass('highlight');  
        items.eq(index).addClass('highlightcurrent');   
        setTimeout(function()
        {
          highlightcurrent(items, index + 1)
        }, 1000);
      }
    }
    
    highlightcurrent($('.progress-page-tabs-col'), 0);
    Ответ написан
    3 комментария
  • Почему в Firefox не подгружаются изображение пока не нажмешь F12?

    @alexalexes
    У вас на странице куча миниатюр на 2500x2500 по ~1Мб каждая.
    Идет гонка, кто быстрей загрузится: скрипты или картинки.
    Скрипты находятся в конце, и они последние начинают загрузку.
    Такое расположение скриптов рекомендуют разработчики Google.
    Еще они рекомендуют делать упрощенный функционал сайта, пока скрипты не вступили в свою силу после того, тогда как загрузятся.
    Что требуется этому сайту:
    1) Создать и наладить отображение упрощенного стиля;
    2) Найти баланс в размере миниатюр.
    Ответ написан
  • Что быстрее градиент или изображение?

    @alexalexes
    Это не вопрос быстродействия, а вопрос адаптации под различные браузеры.
    Если бы все браузеры могли обрабатывать свойство градиент, никто бы не заморачивался с картинками. Особенно, было актуально во времена WinXP с IE7 / IE8.
    Ответ написан
    Комментировать
  • Нужно создать кнопку, и когда кто-то нажимает, я хочу отобразить метку со ссылкой. Как это можно сделать?

    @alexalexes
    Управляйте видимостью вашей ссылки по событию кнопки onclick.
    Какие тут проблемы могут возникнуть-то у вас?
    <a id="my_link" href="https://vk.com/durov" target="_blank" style="display: none;">
      <img src="img/57d3d0a9e386c157136717cc.png" width="30px"/>
    </a> 
    <input type = "button" onclick = "document.getElementById('my_link').style.display = 'inline';" value = "связаться со мной" />
    Ответ написан
    Комментировать
  • Как вывести и одновременно передать значение value в форме HTML?

    @alexalexes
    Кнопку оставляете в покое, значение передаете скрытым полем.
    <form action="?action=select_pay" method="POST">
    <input type="hidden"  name="pay_mode" value="20"  />
    <input type="submit" class="superbutton"  value="Яндекс Деньги"  />
    </form>
    <form action="?action=select_pay" method="POST">
    <input type="hidden"  name="pay_mode" value="10"  />
    <input type="submit" class="superbutton"  value="Еще одна платежка"  />
    </form>
    Ответ написан
  • Почему возникает "неровная прокрутка"?

    @alexalexes
    Анимация прокрутки происходит всегда за фиксированное время (сейчас 500 мс).
    Если top получается 100 пикселей, то промотка будет казаться медленней, а если 1000 пикселей - то быстро.
    А нужно сделать так, чтобы время анимации было пропорционально длине "прыжка".
    var anim_speed = 300; // пикселей в секунду
    var anim_time = (top * 1000) / anim_speed; // 1000 - поправка на милисекунды
    //анимируем переход на расстояние 
    $('body,html').animate({scrollTop: top}, anim_time);

    PS: Обычная школьная формула по физике: время равно расстоянию деленное на скорость.
    Ответ написан
    Комментировать
  • Как сделать кроссбраузерное оформление для Select?

    @alexalexes
    select-ы, чекбоксы, полосы прокрутки - это самые некастомизируемые элементы веб интерфейса.
    В качестве альтернативы используют JQuery ui виджеты.
    Ответ написан
    Комментировать
  • Как запустить jQuery анимацию (плагин) при доскролле?

    @alexalexes
    Написал общее решение для вашей задачи, когда необходимо обработать доскроллинг.
    Запускайте плагин, когда наступает ситуация "выполнения действия", или выполняйте метод плагина, который перезапускает анимацию.

    <style>
    #div1
    {
      display: block;
      width: 400px;
      height: 1400px;
      background-color: green;
    }
    #div2
    {
      display: block;
      width: 400px;
      height: 400px;
      background-color: red;
    }
    </style>
    <div id="div1">
    </div>
    <div id="div2">
    </div>
    <script>
      //Функция для определения необходимости выполнения действия,
    //связанное с появлением элемента elem_id в видимой части документа
      function SomethingToDoElem(e, elem_id)
      {
        var elem = document.getElementById(elem_id);
        if(elem === null)
          return;
        //определение размера видимой части документа без JQuery
        var opera = (navigator.userAgent.toLowerCase().indexOf('opera') > -1),
        html = document.documentElement,
        body = document.body,
        w = document.compatMode=='CSS1Compat' && !opera ? html.clientWidth : body.clientWidth,
        h = document.compatMode=='CSS1Compat' && !opera ? html.clientHeight : body.clientHeight;
        // если величина прокрутки по вертикали + видимая высота документа
    //превышает расстояние от верха документа до элемента,
        // для которого требуется действие доскроллинга, то выполняем это действие
        if(e.currentTarget.scrollY + h > elem.offsetTop)
        {
          var is_did_something = elem.getAttribute('is_did_something'); // если действие однократного применения,
    //то получаем данные о том, что оно не выполнялось ранее, например, с помощью атрибута тега.
          if(is_did_something === null) // атрибут не создан, значит действия не было
          {
            setTimeout(function(){elem.style.backgroundColor = 'blue'; }, 1000); // выполняем действие
            elem.setAttribute('is_did_something', 1); // записываем, что действие выполнили
    // для проверки однократности его выполнения
          }
        }
      }
      // Ловим события, для которых возможно понадобиться действие доскроллинга
      
      // на загрузку документа, лучше использовать JQuery аналог
      window.onload = function(e)
      {
        SomethingToDoElem(e, "div2");
      }
      
      // на прокрутку документа
      window.onscroll = function(e)
      {
        SomethingToDoElem(e, "div2");
      }
      
    // на изменение размера окна документа, если дизайн резиновый
    // и интересуемый элемент div2 может изменять в этом случае свое положение
    // при ресайзе окна браузера.
     
    
    // !!!: лучше не привязывать через $().on('resize', ...) криво срабатывает вызов,
    // использовать только нативные способы подписки на событие.
      window.onresize = function(e)
      {
        SomethingToDoElem(e, "div2");
      }
    
    // Также нужно вызывать  SomethingToDoElem(e, "div2"); при любом динамическом изменении
    // контента страницы или блока, где этот контент расположен.
    </script>
    Ответ написан
    Комментировать
  • Как сделать чтобы при повторном нажатии элемент переворачивался?

    @alexalexes
    Как вариант, с помощью JS добавляете обработчик событий onmouseout и touchend, который меняет класс у элемента div с классом flipper. Попеременно, когда мышь покидает блок или касание прекращается, его состояние изменять с class="flipper right-rotate" на "flipper left-rotate" и обратно.
    Соответственно, вращения будут обозначены двумя различными правилами, под каждое состояние "триггера":
    .flip-container.hover .flipper.right-rotate {}
    .flip-container.hover .flipper.left-rotate {}

    Можно применить более изящное решение, но оно находится в компетенции технологии Sass, увы, подсказать реализацию не смогу, но уверен, что такие метаморфозы с запоминанием состояний объектов - это в порядке вещей там.
    Ответ написан
    Комментировать