Ответы пользователя по тегу CSS
  • SVG больше чем path в нём, как сравнять их размеры?

    nowm
    @nowm
    Размер SVG можно задать с помощью атрибута viewBox. Например, эта картинка имеет размер 160 на 90:
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 90">
    </svg>


    Кроме манипулирования размером самого SVG можно менять размер path без редактирования самого пути. Это делается с помощью атрибута transform. Например, на следующей картинке все 3 path прописаны под размер SVG, но из-за применяемого масштабирования красная область занимает 80%, зелёная — 40%, а синяя — 20%.

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 90">
        <path d="M0 0L160 0L160 90L0 90L0 0" fill="#ff0000" transform="scale(0.8)"/>
        <path d="M0 0L160 0L160 90L0 90L0 0" fill="#00ff00" transform="scale(0.4)"/>
        <path d="M0 0L160 0L160 90L0 90L0 0" fill="#0000ff" transform="scale(0.2)"/>
    </svg>
    Ответ написан
  • Как правильно раздвинуть кнопки?

    nowm
    @nowm
    Кнопки растягиваются корректно, но вы используете бутстрап и класс .container, и бутстрап ограничивает ширину этого элемента, потому что это служебный для бутстрапа класс и он для него прописывает много собственных стилей. Блоки с кнопками, соответственно, за пределы родительского контейнера не вылезают.

    Как один из фиксов, класс container можно заменить на d-flex justify-content-between и они начнут нормально растягиваться.
    Ответ написан
    Комментировать
  • В чем суть такой записи в reset.css?

    nowm
    @nowm
    Это специфичное для blockquote определение, которое Eric Meyer (автор reset.css) позаимствовал у Paul Chaplin. Первая строка content: "" делает так, чтобы у blockquote исчезли кавычки — на случай, если вторая строка content: none не поддерживается браузером, потому что первая строка — это CSS 2, а вторая — это CSS 2.1. В одну строку их записать нельзя, потому что по стандарту для свойства «content» нельзя комбинировать ключевые слова «normal» и «none» с другими значениями.

    Вообще, когда встречается перечисление одного и того же свойства с разными значениями, это делается для того, чтобы обеспечить совместимость с разными браузерами. То есть, если, например, браузер не поддерживает «content: none», он применит «content: ""», а другую запись проигнорирует.

    Обычно дублирующие записи располагаются в определённом порядке. Первой записью идёт самый плохой вариант, который должен сработать везде. Затем идёт вариант, который более полно описывает вашу цель. Пример:

    .some-class {
        background: #e66465;
        background: linear-gradient(#e66465, #9198e5);
    }


    В этом коде, если браузер поддерживает градиентный фон, он сначала прочитает, что нужно использовать цвет «#e66465», а потом это перезапишется записью «linear-gradient», и итоговое значение будет «linear-gradient(#e66465, #9198e5);». Если же браузер не поддерживает градиент, он сначала прочитает, что нужно использовать «#e66465», а потом увидит неподдерживаемое определение «linear-gradient», проигнорирует его, и итоговое значение будет «#e66465».
    Ответ написан
    Комментировать
  • Как убрать скролл в браузере mozilla?

    nowm
    @nowm
    В Firefox нет такой штуки, как ::-moz-scrollbar, но для элемента можно сделать scrollbar-width: none;:

    div {
      max-height: 120px;
      overflow-y: auto;
      overflow-x: none;
      scrollbar-width: none;
    }
    
    div::-webkit-scrollbar {
      display: none;
    }


    Я ваш jsfiddle-пример протестировал с scrollbar-width, и скролбар после этого исчезает корректно в Firefox.
    Ответ написан
    1 комментарий
  • Почему не работает hover для иконки font awesome?

    nowm
    @nowm
    Hover не работает из-за того, что иконка находится рядом с тегом <a>. А должна быть внутри.

    <div class="previewLinks">
        <div class="previewLinks1">
            <!-- Неправильно -->
            <i class="far fa-star"></i><a href="#">Рейтинги</a>участников
            <!-- Правильно -->
            <a href="#"><i class="far fa-star"></i> Рейтинги</a> участников
        </div>
    </div>
    Ответ написан
    Комментировать
  • Как убрать значок reCaptcha?

    nowm
    @nowm
    Мне нравится эта статья про CSS: сопособы добавления стилей на страницу. Она написана вполне доступным языком, описывает кучу способов, которыми можно решить вашу проблему, и очень легко ищется поисковиком.

    Upd: Блок с бейджем рекаптчи использует класс grecaptcha-badge.
    Ответ написан
    1 комментарий
  • Как сделать чтоб при клике на кнопку появлялся div,при клике вне его чтоб закрывался?

    nowm
    @nowm
    Обычно, если вы хотите добавить какую-то вещь, вам нужно полностью понимать её логику работы, чтобы это описать в коде. То есть, если вы можете описать весь функционал с помощью алгоритма, есть смысл самостоятельно это писать. В противном случае, лучше воспользоваться готовым решением, вроде Dropdowns или Modals из Bootstrap, потому что это поможет сэкономить время и обеспечит определённую надёжность работы за счёт использования дополнительных ресурсов (нужно подгружать CSS- и JS-файлы бутстрапа).

    Самостоятельное понимание обычно приходит с опытом. То есть, например, если я хочу написать модал, я сначала должен понять, что такое этот мой модал и как он себя должен вести в различных ситуациях. По сути, это какой-то элемент, который выводится на переднем плане и блокирует всё остальное. То есть, мне нужно создать один полноэкранный элемент (1), который будет блокировать всё остальное, а потом поместить в него другой элемент (2), который будет отображать нужный мне контент. При клике по элементу 1 мне нужно скрывать оба элемента, освобождая всё, что находится на заднем плане. При этом, если я кликаю внутри элемента 2, ничего не должно происходить. Дальше, мне нужно показывать элементы 1 и 2 после определённого события, например, если я кликаю по кнопке (3).

    Вот простейший код который работает как АК-47 (так же доступно на JsFiddle для тестирования):

    HTML
    <span id="element-3">Open modal</span>
    <div id="element-1">
      <div id="element-2">
        Modal content
      </div>
    </div>


    CSS:
    body {  
      width: 100vw;
      height: 100vh;
      background-color: green;
      margin: 0;
      padding: 0;
    }
    
    #element-3 {
      border: 1px solid black;
      background-color: white;
    }
    
    #element-1 {
      display: none;
      position: fixed;
      background-color: blue;
      width: 100vw;
      height: 100vh;
      top: 0;
      left: 0;
    }
    
    #element-1.show {
      display: block;
    }
    
    #element-2 {
      background-color: red;
      width: 50vw;
      height: 50vh;
      margin: 0 auto;
    }


    JS
    var element1 = document.getElementById('element-1');
    var element2 = document.getElementById('element-2');
    var element3 = document.getElementById('element-3');
    
    element3.onclick = function() {
    	element1.classList.add('show');
    };
    
    element1.onclick = function(event) {
    	if (event.target !== event.currentTarget) {
      	return;
      }
    	element1.classList.remove('show');
    };


    После того, как вы сделали стабильно работающий функционал, можно начать его развивать. Например, нужно сделать, чтобы элемент 1 был прозрачным. Или нужно сделать, чтобы он и элемент2 появлялись/исчезали, используя анимацию, а не мгновенно. Или нужно избавиться от этих красно-сине-зелёных цветов и отображать у элемента 2 закруглённые уголки и центрировать его по вертикали. Это уже задачи другого уровня, которые решаются другими методами, которые тоже можно разбить на подзадачи и решать их так, чтобы они не ломали задачи более высокого уровня. В таком случае у вас всегда всё будет работать надёжно и предсказуемо.

    А ваш код я не видел, так что помочь ничем не могу. Причин, по которым происходят глюки, может быть много, и нужно быть телепатом, чтобы угадать, что именно происходит в вашей реализации кода. Но я видел много примеров, когда люди что-то делали, не понимая полностью логики явления, которое они разрабатывают. (Например, модальный диалог, или галлерею, или кнопку. Или космический корабль.) Из-за этого их код превращается в запутанный клубок, который глючит в самые неожиданные моменты.
    Ответ написан
    Комментировать
  • Как изменить место placeholder?

    nowm
    @nowm
    У input-элементов есть CSS-свойство ::placeholder. Можно сделать так:

    #my-phone-input::placeholder {
        padding-left: 2em;
    }


    Просто замените #my-phone-input на корректный селектор для инпута, который у вас на скриншоте. Но, вообще, обычно у плейсхолдера такой же отступ, как и у текста в поле ввода, так что если вы для самого input зададите отступы с помощью padding, плейсхолдер это унаследует.
    Ответ написан
  • Почему не срабатывает:last-child?

    nowm
    @nowm
    Так происходит потому, что :last-child — это последний элемент родительского контейнера. Совсем последний. После него не должно быть никаких элементов. Не получится использовать и :last-of-type, так как last-of-type подразумевает последний элемент по имени, а не по классу (и если после последнего div.blog-item будет хотя бы один div на этом же уровне иерархии, этот div.blog-item перестанет быть last-of-type).

    Вообще, я разделители меду элементами делал бы так:

    .blog-item + .blog-item {
        /* В ситуации с 5-ю элементами с классом .blog-item, которые строго 
         * следуют друг за другом, этот селектор применится
         * к элементам со второго по пятый. Первый будет проигнорирован.
         */
    }
    Ответ написан
    Комментировать
  • CSS, как настроить background сайта?

    nowm
    @nowm
    Непосредственно после тега BODY добавьте DIV с абсолютным позиционированием, отрицательным z-index и сокрытием overflow и задайте ему высоту в половину сайта и ширину 100%. Внутрь DIV-блока вставьте картинку (обычным тегом IMG) и сделайте ему минимальную высоту 100% и минимальную ширину — тоже 100%. Для псевдоэлемента :after DIV-блока задайте блоковое отображение, абсолютное позиционирование, и высоту, достаточную для вашего «помаленьку». Сделайте ему 100% ширины и bottom: 0, а так же градиентный фон от белого до прозрачного, направленный вверх.

    По-моему, это хорошая и понятная инструкция. Если нужен готовый код, есть смысл заглянуть на freelansim.ru — потому что есть ньюансы во время реализации.
    Ответ написан
    1 комментарий
  • CSS width - дробное число в пикселях возможно?

    nowm
    @nowm
    По стандарту, дробное число для пикселя можно использовать. Я указываю ссылку на версию CSS 2.1, так как в данный момент это действующая спецификация.

    The format of a length value (denoted by < length > in this specification) is a < number > (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.). After a zero length, the unit identifier is optional.

    Субъективно, кому-то может это казаться странным, неподходящим или неприемлемым, но дробные значения px корректно обрабатываются браузерами, так как браузеры ориентируются на стандарты.
    Ответ написан
    1 комментарий
  • Две линии в таблице, или что то мешает?

    nowm
    @nowm
    border-collapse применяется только к таблице. Или к любому элементу, у которого свойство display равно table. Оно указывает на то, что у всех дочерних элементов с display: table-cell границы будут склеиваться. Для всех остальных типов display это правило смысла не имеет.

    В вашем примере «a» — блочный элемент. Если вы хотите, чтобы не было двойной рамки в этой ситуации, нужно будет играть с margin, делая отрицательные отступы, чтобы рамки накладывались друг на друга.
    Ответ написан
    2 комментария
  • Как растянуть li по высоте?

    nowm
    @nowm
    Этот вопрос лучше архитектурно решать. Если вы вместо списка будете использовать таблицу для представления таких данных, то у вас автоматически решится куча вопросов с дизайном. И не нужно будет задавать кучу absolute/relative правил, и текст не будет на метки наезжать, и всё растягиваться будет нормально. Да и вообще, не нужно будет имитировать табличное представление — оно и так будет табличным.

    И для тех же тегов «TD» вполне нормально можно «itemptop» прописывать.
    Ответ написан
    Комментировать