alexalexes

Примерно так:

<div class="подложка">
  <div class="элемент-подложки" style="background-color: transparent; transform: translate(0, -30px)">
  </div>
</div>

Сам .элемент-подложки не будет двигаться. Будет смещаться только его графический образ.

но откуда то берется плавная прокрутка до нужного места(возможно бутстрап накладывает анимацию)

Если сторонняя js библиотека не перебирает scrollTop для имитации прокручивания, то возможно в css указано:

html
{
  scroll-behavior: smooth;
}

Это свойство позволяет обычным способом через css указать, чтобы страница прокручивалась плавно, если меняются прокручивающиеся свойства, без указания их промежуточных значений.

да и в общем на слабых устройствах этот вариант, мне кажется, моргать будет, даже если ее убрать.

Со smooth-ом моргать не должно, так как js будет (должен) оперировать начальными и конечными значениями прокрутки, а анимацией будет управлять браузер.

Попробуйте то, что использует qna.habr.com:
font-family: "PT Sans",Helvetica,Arial,sans-serif;
Если применяете fontawesome, то можно взять:
<i class="fa-light fa-circle-info"></i>

Нельзя. Многие свойства активного элемента выпадающего списка относятся к дизайну браузера.
От браузера к браузеру этот элемент будет выглядеть по другому, иногда совсем по другому.
Например, на десктопном браузере вы видите select как выпадающий список. А вот в мобилках он будет уже выглядеть как модальное окно с радио кнопками - в этом случае ни о какой частичной высоте речи идти не будет.

Если используете тег video для вывода видео, то попробуйте дать ему свойство радиального градиента.

background: radial-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1)); /* второй параметр цвета нужно подобрать близкий к фоновому */

PS:
1. Может не сработать на фрейме видео.
2. Может не подойти вид градиента. Этих видов в css3 не так много.

Можно честно спиратить из vk.com плашку "Новые сообщения".

<h4 class="im-page--history-new-bar _im_unread_bar_row">
:before
<span>Новые сообщения</span>
:after
</h4>

Как упомянуто в соседнем ответе, будет очень костыльно и чисто для спортивного интереса.
К тому же, есть ограничение на фиксированный размер элемента, которое вам не нужно.

<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>

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

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

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

document.styleSheets[i].rules[j].style['имя_свойства'] = значение_свойства;

Подробнее:
https://www.w3.org/wiki/Dynamic_style_-_manipulati...

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

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

Вместо строчки 42:

$('select').val(chooseItem).attr('selected', 'selected');

Используйте:

$('select option[selected]').removeAttr('selected'); // удаление ранее установленного selected атрибута у одного из option
  $('select option[value="' + chooseItem + '"]').attr('selected', 'selected'); // находим option с нужным value и устанавливаем атрибут selected

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, чтобы кнопки вовремя гасились.

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

Решение без 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).

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