Ответы пользователя по тегу CSS
  • Почему возникает пустота в строке таблицы?

    @strelok011
    у вас стиль table td содержит word-wrap: break-word;
    В первой колонке ширина 0, класс visible, бедный текст ID порвало на две строки. Вот вам и отступ.
    Ответ написан
    1 комментарий
  • Как сделать задний фон картинки прозрачным html?

    @strelok011
    Фотошоп надо освоить. Просто ластиком потереть в jpg оригинале не поможет.

    https://youtu.be/awz-RjRF6E4
    Ответ написан
    Комментировать
  • Почему transition работает только в одну сторону?

    @strelok011
    Пишете небольшой js для получения высоты своей страницы (ну или элемента, на котором должен проявляться эффект) после загрузки, добавляете инициализацию этого же кода на resize (мало ли как контент себя поведет), используете это значение для анимации.
    Если высота не известна - никакие транзишны и анимашки корректно работать не будут. Всякие аккордеоны, прокрутки и т.п. требуют заранее известной высоты для корректной работы. Браузер ее, к сожалению "на автомате" не подсовывает.
    Решение не привожу, в интернете можно найти. Но общий смысл действий описал.
    Ответ написан
    Комментировать
  • Почему верстальщики редко используют CSS clip-path: polygon?

    @strelok011
    Для работы с вектором SVG в данный момент подходит лучше всего (с тем же clip path, к примеру).
    Понятно, что у CSS есть эта возможность, но это всё равно что использовать велосипедный мультитул там, где гораздо эффективнее динамометрический ключ.
    Помимо исторических причин с совместимостью, IMHO есть еще и целесообразность.
    Ответ написан
    Комментировать
  • Лучше ли будет, если задавать классы элементам с одинаковыми стилями?

    @strelok011
    Верстайте независимыми блоками, давайте названия классам по смыслу содержимого.
    Если придет заказчик и попросит изменить у заголовков виджетов размер шрифта - полезете изменять разметку в шаблоны? Или всё же обновить только файл со стилями?
    Хотите использовать универсальные переменные - заводите их для препроцессоров в крайнем случае.
    Ответ написан
    Комментировать
  • Как правильно верстать фигурные блоки?

    @strelok011
    Думаю, вам помогут clip и mask.
    Работает и просто в css и с помощью svg
    Генератор css clip
    Обрезка и маска svg
    Ну и в инете по этим словам найти уроки и примеры не составит труда
    Ответ написан
    Комментировать
  • Как размыть(заблюрить) выделнную область на странице?

    @strelok011
    Когда вопрос задаете - лучше рассказывать и сопутствующие моменты. А еще - таблицу браузеров, под что совместимость пилить. И будет вам щасте )
    Есть атрибуты стилей типа filter: blur, есть всевозможные эффекты через svg на том же механизме (примеров в инете навалом), а есть реализация супер дубовая и очень тяжеловесная, но совсем кроссбраузерная (фильтры в старых браузерах не везде работают) - создается канва, перехватывает битмап отрисованной страницы, библиотечкой на js успешно блюрится именно как растр.
    Вот только если прячете текст - его надо блюрить на бэке. А на фронте - это просто не шибко полезные свистоперделки, которые еще и на производительности сказываются.
    Ответ написан
  • Как сделать таб чтоб width:100% уменшалась в зависимости от margin?

    @strelok011
    Если у Вас не флекс-верстка, то:
    1. С увеличением padding абсолютная длина будет что??
    2. Тот же эффект - это какой?

    Если у Вас есть блочный контейнер (div, p, h, которые по умолчанию имеют состояние display: block), то они занимают всю доступную ширину, им указывать 100% не обязательно.
    Если Вы хотите зафиксировать ширину блока и добавить ему паддинг, то для сохранения значения ширины добавляют атрибут box-sizing: border-box, т.к. значение по умолчанию content-box
    Если вы хотите задействовать margin - можно использовать вычисляемую ширину
    width: calc(100% - 20px)
    где margin в сумме должен быть равен 20px. При этом обязательна именно такая расстановка пробелов. Внутри скобок между значениями и арифметическим знаком.

    Чтобы меньше путаться - гуглите информацию про блочные и строчные элементы.
    Ответ написан
    Комментировать
  • Как исправить прокрутку на mobile safari?

    @strelok011
    этот вопрос уже задавался. поиск выдал ответ
    Как запретить скролл сайта, если поверх него есть фиксированный блок с прокруткой вниз?
    другими словами -
    body {overflow: hidden;}
    Открыл модалку - боди заморозил. плюс еще можно проверять на сколько ты проскроллил и при добавлении стиля с оверфлоу дополнительно в js скроллтоп выполнять. В некоторых браузерах оверфлоу хидден вызывало подскок в начало страницы, если память не изменяет.
    Ответ написан
  • Почему height:100% не срабатывает в safari?

    @strelok011
    Это обычная проблема для мобильных браузеров, связанная с динамическим изменением высоты вьюпорта браузера при скролле, когда на экране появляются дополнительные панели управления с кнопками.
    Есть лайфхак с использованием вместо процентов vh, добавлением js на ресайз окна и переопределением стандартного значения в vh в css-переменную, ссылко
    Тут больше вопрос к дизайну мобильного вида страницы, и как она должна выглядеть в зоопарке мобильных устройств (новомодные узкие мобилы, старые ведроиды, планшеты)
    Если дизайнер слабо разбирается в этом - будет ад для верстальщика с поддержкой кучи промежуточных разрешений в css со сменой размеров шрифтов, отступов и т.п.
    Ответ написан
  • Что делать, если не загружается css на телефоне?

    @strelok011
    больше похоже на то что путь из html к css неверный.
    Ответ написан
    Комментировать
  • Можно ли задать отступы блоку относительно его заголовка?

    @strelok011
    Дам немного развернутый ответ, почему это не возможно.
    Прежде всего - почему стили именно каскадные? Каскад - это цепочка зависимостей, определяющих, на что данный стиль повлияет.
    Пример:
    a {color: "red"}
    h1 a {color: "green"}
    h1+a {color: "yellow"}

    первый стиль говорит - "все теги А будут красного цвета"
    второй стиль уточняет - "а теги А, лежащие в теге H1 будет зелеными"
    третий стиль добавляет еще правило "теги А, находящиеся СРАЗУ ПОСЛЕ тега H1 будут желтыми"
    При этом чем больше уточняющих узлов (на самом деле есть еще нюансы, но это отдельный разговор) в каскаде стиля, тем он будет более весомый.
    Уточняющие стили будут перекрывать значение первого общего стиля.
    Как же работает браузер?
    К примеру есть такой стиль
    div h1 span a {color: "blue"}
    Это каскад, говорящий что тэг А, находящийся во вложенной структуре вида div>h1>span>a и только такой будет синего цвета.
    Так вот браузер начинает разбирать такой стиль начиная с правого! края. Соответственно он в начале собирает коллекцию всех тегов А и потом начинает отсеивать не подпадающие под описание в стиле варианты. Сначала оставит только те тэги, которые вложены в тег SPAN, затем по цепочке пройдет до самого начал.
    Этот алгоритм парсинга и сообщает, что нельзя прописывать условие для элемента опираясь на его вложение.
    Можно написать стиль для элементов, которые идут следом за каким-либо определенным.
    h1~p {color: "orange"}
    раскрасит текст во всех тегах p, идущих следом после h1 (причем могут идти не подряд) но только в рамках общего родительского контейнера.
    Ответ написан
  • Как можно изменить высоту полосу прокрутки с помощью CSS?

    @strelok011
    Системный скроллбар изменить не получится, это за пределами области документа.
    Разные браузеры могут предоставлять урезанные и не совпадающие по изменяемым свойствам вендорные хаки.
    Для полного управления внешним видом скроллба можно использовать решения, опирающиеся на атрибуты overflow для body и контейнеров в html + js для позиционирования своего сверстанного бегунка с произвольными параметрами.
    Если есть желание всё это использовать - есть готовые решения типа https://grsmto.github.io/simplebar/
    Но нужно иметь в виду, что такое решение может сломаться в каких-либо непредвиденных разработчиками условиях, в отличие от системного скролла.
    Вердикт - полное извращение )
    Ответ написан
    Комментировать
  • Что производительнее css + html или картинка PNG?

    @strelok011
    Лучший вариант был бы не канвас а svg
    Ответ написан
    Комментировать
  • Возможно ли реализовать непрерывающуюся карусель с блоками на CSS?

    @strelok011
    чтобы сделать инфинит скролл необходимо получить дубль содержания по ширине страницы или больше в начале и в конце.
    Тогда всё сработает, разницы нет, картинка это или верстка. На приведенном примере специально пример показан и объясняется принцип. Странно что здесь это надо уточнять.
    Без js не получится динамически выпиливать блоки в начале и добавлять их в хвост.
    Без верстки, которая тянет блоки в каком-то процентном соотношении от ширины экрана - та же беда, рано или поздно найдется ширина, когда заложенного дубля не будет хватать (не говоря о контенте вообще)
    Ответ написан
    Комментировать
  • Почему блок накладывается на другой блок?

    @strelok011
    Хм. Прежде чем строить сетку на флексе, стоит удавить всевозможные position: absolute в brand...
    position: absolute выключает из потока ваш блок, соответственно у контейнера вокруг такого блока нет информации о размере, то бишь он и становится внутри флекса высотой 0, флекс начинает заполнять вторым контейнером всё доступное пространство.

    Рекомендую почитать про поток html, про верстку на флексе, про grow и shrink
    Ответ написан
    2 комментария
  • Почему не отображается png без live server?

    @strelok011
    Немного дополню предыдущего комментатора:
    1. если ссылка начинается с "/" - это значит "начать с корня сайта (или диска). например ссылка вида /images/image.png будет искаться либо по адресу site.ru/images/image.png, а локально - относительно того раздела на винте (c:/images/image.png), где находится файл html. При этом не будет браться в расчет путь к каталогу, где находится html. Ссылка получится "абсолютной".
    2. если ссылка будет без дроби вначале вида "images/image.png" - путь к изображению будет строиться от места нахождения файла html. Например: файл лежит в каталоге "c:/work/site/index.html", тогда рядом с ним должен находиться каталог images с картинкой, и браузер будет открывать картинку по следующему пути: "c:/work/site/images/image.png".
    Ссылка без дроби вначале сработает аналогично "./images..."
    точка с дробью принудительно указывает на текущий каталог, в котором лежит файл html. Ссылка получится "относительной" (т.е. будет строиться относительно местонахождения html файла)

    live в редакторе позволяет имитировать работу на сайте и подставляет корневой каталог от местонахождения файла html. Если будет более сложная структура - и live может не помочь, если будете так ссылки выстраивать. Для локальной верстки используйте только относительные ссылки. При необходимости обратиться в соседний по уровню вложенности каталог ссылка может начинаться с "../", что укажет браузеру необходимость подняться на один уровень вложенности выше.
    Ответ написан
    1 комментарий
  • Как с помощью flex расставить так блоки?

    @strelok011
    Если вы хотите сверстать макет на рисунке именно на флексах - изолируйте каждую смену направления в отдельный контейнер (пусть будет div).

    На флексах можно это представить в виде 4 последовательных div, в последнем еще два div для вертикальной ориентации.

    вот пример
    Ответ написан
    Комментировать
  • Почему device toolbar в инспекторе кода работает неправильно?

    @strelok011
    возможно, в теге HTML нужно добавить этот медиа-запрос.
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover">
    Ответ написан