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

alexalexes

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

  • Как в CSS сделать так, чтобы всегда была видна полоса прокрутки?

    @alexalexes
    Веб разработчик крайне ограничен в стилизации скроллбара.
    Повлиять можно только на 3 параметра:
    1) Ширина скроллбара;
    2) Цвет бегунка (+ hover);
    3) Цвет подложки бегунка.
    Все остальное поведение зависит от браузера и пользовательских настроек вне контекста песочницы веб-страницы (и даже доступные стилизации могут быть перебиты внешними настройками просто потому что потому).
    Ответ написан
    Комментировать
    Комментировать

  • Как расположить панель внизу через стили css?

    @alexalexes 
    .ch_list
{
  position: absolute;
  width: 100vw;
  ...
}
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать круг на фоне числа?

    @alexalexes
    Нужно квадратному желтому элементу скруглить углы на не менее 50% радиуса его размера.
    Ответ написан
    Комментировать
    Комментировать

  • Как реализовать переход по ссылке силами CSS?

    @alexalexes
    Нужно помнить, что у тега a и button по умолчанию поведение display: inline - строчные элементы.
    Если хотите, чтобы они служили там, где используются блочные элементы (display: block) и блочно-строчные (display: inline-block), как div в вашем примере. Так обеспечьте их этим свойством - указав его явно.
    Зная это, можно спокойно заменить div на a и решить вашу проблему.
    Ответ написан
    Комментировать
    Комментировать

  • Как в таблице обернуть столбец в рамку?

    @alexalexes
    table подразумевает работу со строковыми данными, но с помощью псевдо-селекторов nth-child, можно сделать некоторый трюк, выделив колонку:
    /*7 - текущая колонка, 6 - предыдущая - можно номер выделенной колонки вынести в css переменную и манипулировать только ей*/
tr:first-child td:nth-child(6),
tr td:nth-child(6),
tr td:nth-child(7)
{
  border-right: 2px solid red;
}
tr td:nth-child(7) /*страховка для вырожденного случая, когда выделена первая колонка */ 
{
  border-left: 2px solid red;
}
tr:first-child td:nth-child(7)
{
  border-top: 2px solid red;
}
tr:last-child td:nth-child(7)
{
  border-bottom: 2px solid red;
}
    Ответ написан
    3 комментария
    3 комментария

  • Как сделать боксы подряд?

    @alexalexes
    Либо по старинке - всем элементам, которые хотите сделать в ряд, даете свойство display: inline-block; либо по молодежному - делаете контейнер с display: flex и добавляете необходимые flex-свойства элементам, чтобы обеспечить выравнивание и пропорции заполнения блоков.
    Еще древнее способ и самый правильный с точки зрения семантики HTML - элемент .button используете как input, а не div, чтобы все элементы в ряду были строчного типа - тогда мучиться с выравниванием не придется.
    Ответ написан
    5 комментариев
    5 комментариев

  • Если полю input[type="text"] задавать любую высоту, то текст будет всегда по центру. За счёт какого свойства это происходит?

    @alexalexes
    Потому, что вы используете не тот элемент управления, чтобы создать многострочное поле ввода.
    Для этого есть textarea.
    input[type="text"] используется только для однострочного ввода.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать такой border-radius нестандартный?

    @alexalexes
    Если дизайнер не имеет представления об ограничениях современного CSS и не собирается вникать в их суть, то clip-path и svg ваше все.
    Ответ написан
    10 комментариев
    10 комментариев

  • Как сделать таймер отсчёта как на фото?

    @alexalexes
    Нужно менять механику смещения параметра в translate3d, чтобы смещение по вертикали анимировалось между (n/2) и (n/2) + 1 высотой списка (перелистывались соседние элементы центральной части списка). Когда анимация достигнет уровня (n/2) + 1, нужно сделать два одновременных действия: 1 - переставить последний элемент списка на первое место, 2 - вернуть уровень до отметки (n/2). Тогда будет достигнут эффект замкнутости и цикличности списка и анимация не будет откатываться назад.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как показать определенное количество символов у ссылки а остальные скрыть?

    @alexalexes
    Проще со стороны формирующего скрипта подрезать лишнее внутри тега a.
    <?php echo mb_strlen($t_url) > 10 ? mb_substr($t_url, 0, 10).'...' : $t_url; ?>
    Ответ написан
    Комментировать
    Комментировать

  • Как закрасить линию перед ползунком через css?

    @alexalexes 
    input[type=range]::-webkit-slider-thumb::before,  /* для остальных браузеров */
input[type=range]::-moz-range-progress /* для Firefox */
{
 /**/
}

    Такое же внимание уделите псевдоэлементам -webkit-slider-runnable-track и -webkit-slider-thumb, потому что FF тут умудрился выбиться из толпы.
    Ответ написан
    1 комментарий
    1 комментарий

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

    @alexalexes
    Учить основы CSS - с чем едят свойство position.
    В данном случае для вас неожиданностью является поведение свойства position: absolute; у контейнера .header__slider-text.
    Чтобы абсолютное позиционирование было относительно слайда, дайте контейнеру слайда .header__slider-item свойство position: relative;
    Ответ написан
    5 комментариев
    5 комментариев

  • Обтекание блочного элемента: как реализовать?

    @alexalexes
    Если отсутствие поддержки Internet Explorer не пугает, то можете воспользоваться свойством shape-outside.
    htmlbook.ru/blog/vvedenie-v-css-shapes
    https://developer.mozilla.org/en-US/docs/Web/CSS/s...
    Ответ написан
    4 комментария
    4 комментария

  • Как правильно верстать используя bootstrap?

    @alexalexes
    При использовании bootstrap вы не можете мыслить фиксированными шириной.
    У вас есть 12 колонок - 12 долей единиц ширины экрана, и есть с полдюжины разных размеров экранов.
    Самый маленький, малый, средний, большой и очень большой.
    И логика расстановки классов такая:
    "На большом экране и больше у меня слайдер будет шириной 6 из 12 колонок,
    на среднем 8 из 12 колонок,
    от малого и меньше 12 из 12 колонок".
    С этой логикой и навешиваете нужный набор классов на контейнер слайдера.
    JS код не должен фиксировать размер контейнера в пикселях, нужно ему позволить расширяться по bootstrap сетке.
    Ответ написан
    Комментировать
    Комментировать

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

    @alexalexes 
    .header-dropdown-item {
...
  height: 4rem;
...

    .header-dropdown-item:hover {
...
  height: fit-content;
...

    Эти значения высот в вычисленном состоянии имеют разный результат в пиксельном выражении?
    Как вы думаете?
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать табы с выводом из бд?

    @alexalexes
    Выводить также как из любого другого источника данных.
    1. Подготовьте источник данных.
    - Разверните службу СУБД в операционной системе сервера.
    - Выберите менеджер, чем вам будет удобно просматривать объекты СУБД.
    - Установите менеджер СУБД.
    - При помощи менеджера СУБД заведите пользователя базы данных, схему базы данных, структуру таблиц и связей, вставьте необходимые данные.
    2. Изучите способы подключения к источнику данных и взаимодействия из PHP (как делать коннект к СУБД, как подготавливать запросы и параметры к ним, как фетчить результат выборки запроса).
    3. Подключитесь к базе, выполните запрос, встройте выборку результата в ваш шаблон HTML (табы).
    Ответ написан
    3 комментария
    3 комментария

  • Как сделать так, чтобы элемент можно было тащить влево-вправо?

    @alexalexes
    1. На десктопе рулят события мыши: mousedown - эквивалент touchstart, mousemove - эквивалент touchmove, mouseup - эквивалент touchend.
    2. Вместо множества точек касаний (пальцы) у вас одна точка - курсор мыши, поэтому свойства changedTouches в объекте события не будет.
    3. Тестировать, что окружение браузера имеет сенсорный экран, можно проверкой наличием доступного свойства любого события touch в window:
    if("touchstart" in window)
{
  // работаем с сенсорными обработчиками
}
else
{
  // работаем с мышиными обработчиками
}

    4. Событие завершения управления элементом (touchend, mouseup) лучше вешать не на сам элемент item, а на его контейнер, который будет занимать всю ширину экрана (идеально, если это будет body). Логика обработки может застрять на обработчике move, если во время движения точка воздействия на объект убежит за пределы объекта.
    В определенных случаях могут выручить события mouseover/mouseout.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать, чтобы высота iframe была равна соотношению 16:9?

    @alexalexes
    Чтобы сохранить пропорции при отображении в любом браузере, нужно сделать контейнер под видео с относительным позиционированием:
    .video__container
{
  position: relative;
}

    И в него положить img от png файла с однотонным заполнением с нужным соотношением сторон (можно в виде встроенного бинарника сформировать ресурс, такой файл в эквиваленте png весит пару сотен байт).
    Для iframe сделать абсолютное позиционирование, чтобы можно было его приподнять над img блоком, с помощью z-index, и задать 100% ширину и высоту, чтобы его размер зависел от контейнера, а размер (точнее, пропорции) контейнера будет зависеть от размера img. 
    iframe.video__iframe
{
  position: absolute;
  z-index: 1;
  /* width и height устанавливаются в атрибутах iframe! */
}

    В итоге получится такая конструкция:
    <div class="video__container">
  <img src="video-iframe-background-1920x1080.png"/>
  <iframe class="video__iframe" src="" width="100%" height="100%"></iframe>
</div>

    Такой подход позволяет гибко настраиваться размерам контейнеру .video__container, или фиксировать один из его размеров. При этом, iframe всегда будет держать пропорции того изображения, которое заложено в img. И это будет работать практически на любом браузере не первой свежести.
    Ответ написан
    Комментировать
    Комментировать

  • С помощью чего сделан эффект как на сайте https://www.fromscout.com/?

    @alexalexes
    Анимация по ключевым кадрам.
    animation: main-logo-texture 10s linear infinite;
    Ключевые кадры:
    @keyframes main-logo-texture {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-99px)
    }
}
    Ответ написан
    3 комментария
    3 комментария

  • Как сделать так, чтобы мигание можно было воспроизводить несколько раз?

    @alexalexes
    1. Сначала занулите свойство анимации. Потом вызовите setTimeout с нулевым временем, чтобы JS применил изменения анимации в DOM и внутри setTimeout добавьте свойство анимации. Тогда анимация перезапустится.
    nickinput.style.animation = "none";
  setTimeout(function() {
    if (validmail === false) {
        mailinput.style.animation = "blinker 0.6s linear 3";
    }
    }, 0);

    2. Задайте какой-нибудь color в ключевом кадре:
    @keyframes blinker {
  50% {
    background-color: #b11515;
    color: #aaa;
  }
}
    Ответ написан
    3 комментария
    3 комментария