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

    mizutsune
    @mizutsune
    I will live forever in the flame of your eyes.
    Например можно сделать так:



    В примере выше - "позиция" каждого псевдоэлемента зависит от его размера.

    Конечно можно изменить значение переменной для смещения элемента:

    - --pseudo-offset: calc((0px - (var(--pseudo-size) / 2)) - 1px);
    + --pseudo-offset: calc(0px - (var(--pseudo-size) / 2));


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

    Ну или вообще можно задавать смещение для псевдоэлементов вручную:

    - --pseudo-offset: calc((0px - (var(--pseudo-size) / 2)) - 1px);
    + --pseudo-offset: -8px;


    В целом конечно есть и другие варианты решения без создания лишних элементов и так далее, но я думаю что и такого варианта будет достаточно для примера.
    Ответ написан
    1 комментарий
  • Как выстроить блоки с помощью grid?

    mizutsune
    @mizutsune
    I will live forever in the flame of your eyes.
    .main__work-blocks {
      display: grid;
      grid-gap: 30px;
      grid-template-columns: repeat(12, 1fr);
    }
    
    .main__work-block:nth-child(n + 2) {
      grid-column: span 4;
    }
    
    .main__work-block:nth-child(3n + 1) {
      align-items: center;
      grid-column: span 8;
    }
    Ответ написан
    Комментировать
  • Не затемняется фото?

    mizutsune
    @mizutsune
    I will live forever in the flame of your eyes.
    но background-color: rgba(0, 0, 0, 0.85); не затемняет картинку


    Ну как бы всё правильно. Эффект затемнения делается совсем по другому.

    1. CSS Filter.

    Пример

    .order {
         filter: brightness(0.7);
    }



    2. Псевдоэлемент.

    Пример

    .order {
         position: relative;
    }
    
    .order::after {
         position: absolute;
         width: 100%;
         height: 100%;
         content: "";
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: rgb(16 16 16 / 76%);
    }



    3. Множественный фон.

    Пример

    .order {
         background: linear-gradient(
              to top, 
              rgb(20 22 23 / 77%), 
              rgb(20 22 23 / 77%) 100%
              ), 
              url("../images/order.jpg");
    }



    И ещё множество альтернативных решений.
    Ответ написан
    Комментировать
  • Как сделать подчёркнутый текст в select?

    mizutsune
    @mizutsune
    I will live forever in the flame of your eyes.
    Тег option невозможно нормально стилизовать средствами CSS. Но есть несколько вариантов решения задачи:

    1. Простым решением будет отказ от каких либо стилизаций тега option, ограничившись при этом стилизацией тега select. Да, можно сказать что идея так себе, но это достаточно "популярное" решение, которое встречается очень часто во многих ответах/советах, при возникновении подобных вопросов. В основном это связано с тем что нативный select имеет поддержку доступности, удобное управление с клавиатуры и мыши и так далее. Воссоздавать весь набор этих функций, достаточно сложно, без наличия опыта.

    2. Найти более менее нормальную библиотеку кастомных select`ов и использовать её, вместо стандартного select. Однако готовая библиотека не панацея и в ней может отсутствовать набор тех или иных функций. Разумеется при желании можно добавить нужный функционал, но это займёт определенное время, а также потребует знаний JS + навыка работы с чужим кодом.

    3. Наиболее сложным вариантом является создание своего кастомного select`а с нуля. Можно конечно уложиться и в пару строк кода, создав простой select, но если делать доступный и качественный компонент, придётся потратить немало времени, чтобы реализовать полную копию тега select с набором всех необходимых функций, а также с возможностью нормальной стилизации как самого компонента, так и дочерних элементов.

    4. Ну и в качестве ещё одного варианта можно попробовать какую-нибудь комбинацию JS + </select> с добавлением дополнительных элементов, для стилизации, но это так себе решение...
    Ответ написан
    Комментировать
  • Как с помощью js при уменьшении ширины экрана обрезался текст?

    mizutsune
    @mizutsune
    I will live forever in the flame of your eyes.
    Вообще подобные задачи хорошо решаются и без JS, например если просто нужно обрезать одну строку по ширине родителя, без переноса строки, тогда можно воспользоваться свойством text-overflow.

    Пример

    .target {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }



    Или если нужно обрезать текст по количеству строк, тогда вполне подойдёт webkit-line-clamp.

    Пример

    .target {
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
    }



    Однако если всё же хочется сделать с помощью JS, тогда как вариант можно сделать так:



    Свойство breakpoints содержит двумерный массив с парами значений: [[min-width, max-width], wordsLimit].
    Ответ написан
    Комментировать
  • Возможно ли дать картинкам такую форму в css?

    mizutsune
    @mizutsune
    I will live forever in the flame of your eyes.
    Например с помощью CSS масок или Clip Path.
    Ответ написан
    Комментировать
  • Как сделать такой выдвигающийся блок?

    mizutsune
    @mizutsune
    I will live forever in the flame of your eyes.
    Это самое обычное модальное окно, без центрирования по центру экрана и с оверлей элементом. Можно написать с нуля, или воспользоваться какой-нибудь библиотекой.



    Добавить нужных стилей и всё будет как нужно.
    Ответ написан
    Комментировать
  • Можно ли ставить after прямо на input а не на form?

    mizutsune
    @mizutsune
    I will live forever in the flame of your eyes.
    Не у всех HTML тегов есть собственное содержимое, поэтому не во всех случаях стоит ждать корректного результата при использовании псевдоэлементов на следующих тегах <img>, <input type="text">, <input type="email">, <input type="password">, <input type="datetime">, etc.

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

    <div class="inputbox">
       <input type="text">
    </div>


    .inputbox::after { 
      /* ...стили для псевдоэлемента */ 
    }
    Ответ написан
    3 комментария
  • Не работает псевдоэлменет при наведение на текст?

    mizutsune
    @mizutsune
    I will live forever in the flame of your eyes.
    Вот здесь:

    .title:hover ~ .title::after {
        transform: rotate(180deg);
    }


    При наведении на элемент .title, вы пытаетесь применить трансформацию псевдоэлементу :after, используя при этом селектор следующего элемента, который работает совсем по другому.

    Чтобы менять стили псевдоэлементов, при наведении на родительский элемент, используется такая комбинация:

    <element>:hover::after { /* ... style */ }

    То есть для решения проблемы, нужно сделать так:

    .title:hover::after {
        transform: rotate(180deg);
    }
    Ответ написан
    Комментировать
  • Как сделать что мы можно было пролистать элементы в блоке?

    mizutsune
    @mizutsune
    I will live forever in the flame of your eyes.
    Есть библиотека под названием Conveyer которая имеет подобный функционал.

    В качестве альтернативного варианта, можно взять слайдер Swiper. В этом слайдере есть всё что нужно для реализации подобных элементов со скроллом. Ну, а ещё можно выпилить лишнее и собрать слайдер с нужными модулями, после чего вес слайдера уменьшится.

    Думаю что есть ещё много других альтернатив, в том числе и реализация данного функционала без стороннего кода, но такой вариант стоит рассматривать если вы уверены в своих знаниях и способны учесть множество моментов, которые нужно учитывать.
    Ответ написан
    Комментировать
  • Как получить содержимое HTML в JS из другого файла?

    mizutsune
    @mizutsune
    I will live forever in the flame of your eyes.
    Как вариант можно использовать Fetch API.

    Простой пример на обычном JS:

    const button = document.querySelector(".button");
    const container = document.querySelector(".container");
    
    button.addEventListener("click", async () => {
       const response = await fetch("./path/sample.html");
       const result = await response.text();
       const parser = new DOMParser();
       const DOM = parser.parseFromString(result, "text/html");
       const targetContent = DOM.querySelector("body").innerHTML;
    
       container.insertAdjacentHTML("afterbegin", targetContent);
    });


    Думаю большого труда не составит переделать под свои нужды.
    Ответ написан
    Комментировать
  • Как выровнять форму по центру?

    mizutsune
    @mizutsune
    I will live forever in the flame of your eyes.
    Устанавливать фиксированные значения для свойства width - не совсем корректно. Да и к тому же вы используется гриды, не совсем так как нужно.

    Немного подправил ваши стили:

    .register__inner {
         width: 100%;
    }
    
    .register__form {
         width: 100%;
         max-width: 1000px;
         margin: 0 auto;
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
         grid-gap: 10px;
    }
    
    .register__input {
         width: 100%;
         height: 65px;
         border: 1px solid #d8d8d8;
         border-radius: 5px;
         padding: 27px 24px 23px;
    }
    
    .register__btn {
         width: 100%;
         height: 65px;
         border: none;
         border-radius: 5px;
         background: #ffe100;
    }


    У элемента .register__form в принципе можно установить значение grid-template-columns: repeat(2, 1fr), а потом через медиа запросы поменять, но это уже второстепенная задача.
    Ответ написан
    Комментировать
  • Как расположить блоки с контентом таким образом?

    mizutsune
    @mizutsune
    I will live forever in the flame of your eyes.
    <div class="container">
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
    </div>


    .container {
        display: grid;
        grid-auto-flow: column;
        grid-gap: 10px;  
        grid-template-areas: 
          "A B"
          "A C";
    }
    
    .card:nth-child(1) {
        grid-area: A;
    }
    
    .card:nth-child(2) {
        grid-area: B;
    }
    
    .card:nth-child(3) {
        grid-area: C;
    }


    Или:

    .container{
        display: grid;
        grid-gap: 10px;  
        grid-template-columns: repeat(2, 1fr);
    }
    
    .card:nth-child(1) {
        grid-row: 1 / span 2;    
    }
    Ответ написан
    Комментировать
  • В чем причина не рабочего бургер меню на GitHub?

    mizutsune
    @mizutsune
    I will live forever in the flame of your eyes.
    Добавил бургер меню на свой сайт портфолио.


    Если речь идёт об этом портфолио, то тут ошибка в этом:

    <script src="/source/js/script.js"></script>

    - <script src="/source/js/script.js"></script>
    + <script src="source/js/script.js"></script>
    Ответ написан
    1 комментарий
  • Как сверстать этот элемент?

    mizutsune
    @mizutsune
    I will live forever in the flame of your eyes.
    В этом элементе нет ничего сложного. Карточка, внутри иконка, заголовок и текст с описанием.



    В песочнице в качестве иконок используются Inline SVG. Разумеется их лучше заменить тегами <img /> с путями до иконок, атрибутом alt и другими нужными атрибутами.
    Ответ написан
    3 комментария
  • Как реализовать вещь, которая изображена на скриншоте?

    mizutsune
    @mizutsune
    I will live forever in the flame of your eyes.
    Данный элемент обычно называется Overlay. Его предназначение заключается не только в том чтобы затемнить область вокруг модального окна или off-canvas меню для наилучшей фокусировки на элементе, но ещё и для того чтобы при клике на данный элемент можно было закрыть окно/меню.

    Однако если закрытие по клику не нужно, разумеется можно сделать и тенью и псевдоэлементами как вам подсказали в комментариях.

    Или если всё же нужно закрытие по клику, тогда вариантов несколько.

    Первый вариант:

    Оборачиваете off-canvas меню в обертку для которой устанавливаете полупрозрачный темный фон. При открытии меню, делаете обертку и меню видимыми.

    Второй вариант:

    Создаёте отдельный элемент для оверлея, задав нужный полупрозрачный темный фон. При открытии меню, делаете оверлей и меню видимыми.

    Есть ещё несколько вариантов, но эти два наиболее подходящие для решения подобных задач.

    Вот как пример библиотека onoffcanvas.
    Ответ написан
    Комментировать
  • Как влияет подключение на твой сайт?

    mizutsune
    @mizutsune
    I will live forever in the flame of your eyes.
    Подключение библиотек/плагинов через CDN конечно в той или иной степени может увеличить скорость загрузки, но нужно понимать что у такого подхода есть свои подводные камни.

    На самом деле минусов может быть больше, но я выделю два основных:

    1. Неизвестно какое обновление получит та или иная внешняя библиотека, что в свою очередь может стать угрозой для безопасности.

    2. Несмотря на популярность CDN, не стоит забывать что эта сеть не является настолько мощной, чтобы пробиваться сквозь различные блокировки сайтов, интернет провайдерами.

    Приведу небольшой пример для второго пункта из списка подводных камней.

    Имеется какой-нибудь сайт, например интернет магазин. Сам сайт открывается отлично, всё работает, но на сайте через CDN подключены несколько десятков библиотек, допустим: Слайдер, Модальные окна, Аккордеоны, Тултипы и ещё 100500+ библиотек и плагинов.

    У 99% посетителей всё будет загружаться, работать отлично, но есть как минимум 1% людей у которых подключение к CDN блокируется. Получается что у этого процента посетителей сайт будет отображаться кривым и поломанным, а ещё множество функций будут недоступны. Если суть не понятна, тогда сверстайте страницу, напичкайте её компонентами, а затем просто отключите скрипты и стили. Не думаю что результат понравится вам как разработчику, а обычным пользователям тем более.

    В общем подводя итоги, хочется сказать что прежде чем слепо подключать что-то из CDN, нужно подумать, а нужно ли вам это на самом деле или нет. Ведь не все пользователи у которых криво отображается сайт из-за незагруженных стилей и скриптов, умеют и/или должны открывать консоль, читать ошибки и репортить об этом администрации.

    Можно было бы конечно привести ещё какие-нибудь примеры подводных камней, но я не особо в курсе прям всех плохих сценариев, потому что обычно подключаю библиотеки из того же хранилища, где лежат основные скрипты/стили/etc.

    Ну, а выбирать между нативным fetch и axios, нужно исходя из нужного функционала. На данный вопрос сложно ответить, так как это зависит от многих факторов.
    Ответ написан
  • Как прикрепить меню навигации кверху при скролле?

    mizutsune
    @mizutsune
    I will live forever in the flame of your eyes.
    Переместить навигацию из элемента с классом hero в общий контейнер. Сейчас навигация находится в блоке hero и не сможет выйти за его пределы при использовании position: sticky, так как не является прямым дочерним элементом блока, внутри которого и нужна липкая навигация. Рекомендую почитать как на самом деле работает position: sticky.

    Ну и вообще, зачем у элемента .container - стоит max-height: 50px? Думаю что надо бы убрать это ограничение.
    Ответ написан
  • Как с помощью flex сделать как на картинке?

    mizutsune
    @mizutsune
    I will live forever in the flame of your eyes.
    1. Первые два изображения - это независимые блоки и поэтому вставляем их в контейнер без оборачивания в группу.
    2. Оставшиеся два изображения - которые находятся в вертикальной колонне, оборачиваем в группу чтобы в дальнейшем было проще изменять стили и раскладку, например при адаптиве.

    Ответ написан
    Комментировать
  • Как корректно соединить текст и картинку?

    mizutsune
    @mizutsune
    I will live forever in the flame of your eyes.
    Один из вариантов - это использовать псевдоэлементы для двойного бекграунда блока.

    Вариант - #1

    .element {
            width: 100%;
            height: 400px;
            position: relative;
    }
    
    .element:before {
            content: "";
            width: 30%;
            height: 100%;
            background: #673ab7;
            position: absolute;
            top: 0;
            left: 0;
    }
    
    .element:after {
            content: "";
            width: 70%;
            height: 100%;
            background: url(image.jpg);
            position: absolute;
            top: 0;
            right: 0;
    }




    Блок с текстом уже при желании можно отцентрировать кучей различных способов.

    Если рассматривать другие варианты, то к примеру можно взять свойство background-image и применить с его помощью два фона к блоку, путём указания двух разных бекграундов, плюс минус потребуется настройка положения, размера, etc. Допустим первый бекграунд сделаем градиентом, а для второго уже можно использовать изображение.

    Вариант - #2
    .element {
            width: 100%;
            height: 400px;
            background: linear-gradient(to right, #e91e63 100%, transparent), url(image.jpg);
            background-size: 30% 100%, 70% 100%;
            background-position: left center, right center;
            background-repeat: no-repeat, no-repeat;
    }


    Есть конечно ещё множество других вариантов, но некоторые из них не стоит рассматривать, потому что данная задача решается одним только CSS, без добавления лишних сущностей в разметку.
    Ответ написан
    2 комментария