Ответы пользователя по тегу CSS
  • Как сделать такую штуку в HTML?

    @alexalexes
    Можно честно спиратить из vk.com плашку "Новые сообщения".
    <h4 class="im-page--history-new-bar _im_unread_bar_row">
    :before
    <span>Новые сообщения</span>
    :after
    </h4>
    Ответ написан
    Комментировать
  • Как сверстать блок, чтобы дочерние элементы переносились на новую строку с учетом фиксированной кнопки в углу?

    @alexalexes
    Как упомянуто в соседнем ответе, будет очень костыльно и чисто для спортивного интереса.
    К тому же, есть ограничение на фиксированный размер элемента, которое вам не нужно.
    <style>
        div.container
        {
          display: flex;
          flex-wrap: wrap;
          width: 770px;
          height: 90px;
          background-color: green;
          overflow: hidden;
        }
        div.container > div
        {
          width: 60px;
          height: 25px;
          background-color: #df1245;
          text-align: center;
          margin: 5px;
          padding: 5px 0;
        }
        div.container > div:nth-child(n + 22) /*этим селекторам задаем свойство сортировки элементам, которые идут после кнопки "показать еще" если контейнер будет адаптивным, придется прописывать кучу вариантов nth-child */
        {
          order: 2;
        }
        div.container > label.more
        {
          display: block;
          width: 130px;
          height: 25px;
          margin: 5px;
          padding: 5px 0;
          text-align: center;
          order: 1; /* У кнопки стоит такой индекс сортировки чтобы оказаться между видимыми и невидимыми элементами */
          background-color: #78d412;
        }
        div.container label.more span.less
        {
          display: none;
        }
        #show-more-state
        {
          display: none;
        }
        #show-more-state:checked ~ div.container
        {
          height: auto;
        }
        #show-more-state:checked ~ div.container label.more
        {
          order: 3;
          margin-left: auto;
        }
        #show-more-state:checked ~ div.container label.more span.more
        {
          display: none;
        }
        #show-more-state:checked ~ div.container label.more span.less
        {
          display: initial;
        }
      </style>
      <input id="show-more-state" type="checkbox"/> <!-- Этим чекбоксом запонимаем состояние кнопки, чтобы можно было оттолкнуться стилями от превдокласса :checked -->
      <div class="container">
        <label class="more" for="show-more-state"><span class="more">ПОКАЗАТЬ ЕЩЕ</span><span class="less">СВЕРНУТЬ</span></label>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
      </div>
    Ответ написан
  • Как убрать одну из прокруток?

    @alexalexes
    CSS свойство элемента overflow дробится на overflow-x и overflow-y.
    Подрегулируйте свойство overflow-x или overflow-y у контейнера .table__wrap

    Чтобы оставить возможность прокручивать контейнер, но не отображать сами полосы.
    Есть определенные CSS-хаки, но они специфичны для каждого браузера: https://qna.habr.com/q/18012
    Ответ написан
  • Как изменить стиль у всех элементов одного класса через JS?

    @alexalexes
    Можно воздействовать на конкретный селектор в уже отрендеренных стилях CSS.
    document.styleSheets[i].rules[j].selectorText
    Но проблема в том, что нужно пробежаться по всем стилям (i - счетчик), в каждом стиле просмотреть текст у селектора (j - счетчик).
    Если такой найден, то изменить свойство.
    document.styleSheets[i].rules[j].style['имя_свойства'] = значение_свойства;

    Подробнее:
    https://www.w3.org/wiki/Dynamic_style_-_manipulati...
    Ответ написан
    Комментировать
  • Как изменить положение у строчно-блочных элементов списка?

    @alexalexes
    </li><!-- тут символ переноса строки, вносит свою лепту как текстовая нода, имеющая небольшие, но геометрические размеры -->
          <li class="modules-card layout">

    Часто такой эффект выявляется, когда используется display: inline-block.
    Выход - не переносить li элементы (и не оставлять пробелы), или нивелировать размер текстовых нод с помощью css.
    Ответ написан
    Комментировать
  • Стилизация select?

    @alexalexes
    Вместо строчки 42:
    $('select').val(chooseItem).attr('selected', 'selected');

    Используйте:
    $('select option[selected]').removeAttr('selected'); // удаление ранее установленного selected атрибута у одного из option
      $('select option[value="' + chooseItem + '"]').attr('selected', 'selected'); // находим option с нужным value и устанавливаем атрибут selected
    Ответ написан
    Комментировать
  • Как сделать заголовок "УСЛУГИ" ближе к центру?

    @alexalexes
    Поиграйтесь со стилями селектора, в частности с внутренними отступами:
    .jumbotron {
        padding: 4rem 2rem;
    }

    PS: Не забывайте про медиазапросы с тем же селектором.
    Ответ написан
    Комментировать
  • Как реализовать прокрутку текста с помощью табов?

    @alexalexes
    1. Определяете список заголовков.
    2. Определяете offsetTop у каждого заголовка.
    3. Определяете scrollTop у прокручиваемого блока.
    5. Определяете по offsetTop-ам i-ый и i+1 заголовок, где находится значение scrollTop.
    6. Для стрелки вверх делаете scrollTo до i-ого заголовка.
    7. Для стрелки вниз делаете scrollTo до i+1 заголовка.
    8. Если i-ого или i+1 заголовка нет, то гасите кнопку.
    9. На событии скроллинга нужно анализировать пункты 1-8, чтобы кнопки вовремя гасились.
    Ответ написан
    Комментировать
  • Перенос кириллицы со слешом?

    @alexalexes
    Есть старый добрый тег nobr, который объединяет подстроку, переносимую полностью.
    №<br/><nobr>п/п</nobr>
    Ответ написан
    Комментировать
  • Как сделать подобное меню?

    @alexalexes
    Решение без JS:
    Принцип действия: Над кнопкой показа меню добавляется скрытый чекбокс, который выступает как триггер состояния. Состояние чекбокса управляет применяемым css правилом на меню.
    Кнопку "Server systems development" и скрываемое меню делаете в одном контейнере top-left-container.
    На том же уровне, где находится меню делаете прозрачный input type="checkbox" над кнопкой "Server systems development".
    Вывод и скрытие меню задаете примерно такими правилами:
    div.top-left-container input[type="checkbox"]:checked ~ div.menu
    {
    /*анимация появления меню*/
    }
    div.top-left-container input[type="checkbox"]:not(:checked) ~ div.menu
    {
    /*анимация скрытия меню*/
    }

    Решение c JS:
    Вешаете обработчик на кнопку Server systems development, проверяете наличие класса отображения на меню. Если нет класса, то добавляете, если есть то убираете (в Jquery будет использоваться функция toggle).
    Ответ написан
    Комментировать
  • В чем лучше указывать ширину и высоту блоков?

    @alexalexes
    Зависит от назначения блоков.
    Точные размеры, да, возможно, примените пиксели, а может и сантиметры или дюймы.
    Относительные размеры понадобятся - возьмете проценты.
    Растягивать относительно содержимого - вообще будет auto.
    Адаптивно будете работать - еще куча альтернативных размеров появится в медиа-запросах.
    Ответ написан
    Комментировать
  • Как верстать правильно если на компьютерах стоит разный зум в настройках windows?

    @alexalexes
    Вам нужно определиться, какую цель вы преследуете при выборе свойства font-size.
    1. Физический размер элемента не должен отличаться или малозависим от настроек браузера устройства.
    Решение: используем физические величины: mm, cm, in.
    2. Размер элемента должен быть всегда столько-то пикселей. Используем px.
    3. Размер шрифта должен адаптироваться под возможности комфортного отображения на устройстве.
    Используем pt, em, %. В этом случае тестируете разные режимы адаптивности сайта: у пользователя может отличаться размер экрана, плотность пикселей, он может крутить масштаб скажем, от 60% до 150%.
    На разработчика ложится это обязанность, чтобы сайт выглядел приемлемо, в разумных изменениях настроек отображения.
    Могу путать величины CSS, но такие цели точно есть, и они взаимоисключающие.
    Ответ написан
    1 комментарий
  • Как перекрасить таблицу?

    @alexalexes
    У таблицы есть класс white_border, если он используется только на этом элементе, то можете использовать такой селектор после всех селекторов, описывающие общие стили таблиц:
    table.white_border,
    table.white_border th,
    table.white_border td
    {
        border-color: ваш цвет;
    }
    Ответ написан
  • Как сделать визуальный эффект на сайте в виде колонок?

    @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-значении.
    Пропорции контейнера выравнивались по содержимому и одновременно он мог быть любых не фиксированных стилем размеров.
    Ответ написан
    Комментировать