Ответы пользователя по тегу HTML
  • Возможно ли дать картинкам такую форму в css?

    mizutsune
    @mizutsune
    Frontend Developer
    Например с помощью CSS масок или Clip Path.
    Ответ написан
    Комментировать
  • Как сделать такой выдвигающийся блок?

    mizutsune
    @mizutsune
    Frontend Developer
    Это самое обычное модальное окно, без центрирования по центру экрана и с оверлей элементом. Можно написать с нуля, или воспользоваться какой-нибудь библиотекой.



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

    mizutsune
    @mizutsune
    Frontend Developer
    Не у всех 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
    Frontend Developer
    Вот здесь:

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


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

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

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

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

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

    mizutsune
    @mizutsune
    Frontend Developer
    Есть библиотека под названием Conveyer которая имеет подобный функционал.

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

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

    mizutsune
    @mizutsune
    Frontend Developer
    Как вариант можно использовать 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
    Frontend Developer
    Устанавливать фиксированные значения для свойства 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
    Frontend Developer
    <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
    Frontend Developer
    Добавил бургер меню на свой сайт портфолио.


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

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

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

    mizutsune
    @mizutsune
    Frontend Developer
    В этом элементе нет ничего сложного. Карточка, внутри иконка, заголовок и текст с описанием.



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

    mizutsune
    @mizutsune
    Frontend Developer
    Данный элемент обычно называется Overlay. Его предназначение заключается не только в том чтобы затемнить область вокруг модального окна или off-canvas меню для наилучшей фокусировки на элементе, но ещё и для того чтобы при клике на данный элемент можно было закрыть окно/меню.

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

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

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

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

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

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

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

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

    mizutsune
    @mizutsune
    Frontend Developer
    Подключение библиотек/плагинов через CDN конечно в той или иной степени может увеличить скорость загрузки, но нужно понимать что у такого подхода есть свои подводные камни.

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

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

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

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

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

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

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

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

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

    mizutsune
    @mizutsune
    Frontend Developer
    Переместить навигацию из элемента с классом hero в общий контейнер. Сейчас навигация находится в блоке hero и не сможет выйти за его пределы при использовании position: sticky, так как не является прямым дочерним элементом блока, внутри которого и нужна липкая навигация. Рекомендую почитать как на самом деле работает position: sticky.

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

    mizutsune
    @mizutsune
    Frontend Developer
    1. Первые два изображения - это независимые блоки и поэтому вставляем их в контейнер без оборачивания в группу.
    2. Оставшиеся два изображения - которые находятся в вертикальной колонне, оборачиваем в группу чтобы в дальнейшем было проще изменять стили и раскладку, например при адаптиве.

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

    mizutsune
    @mizutsune
    Frontend Developer
    Один из вариантов - это использовать псевдоэлементы для двойного бекграунда блока.

    Вариант - #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 комментария
  • Как реализовать такой эффект?

    mizutsune
    @mizutsune
    Frontend Developer
    Это называется Before/After Image Slider Comparison или просто Image Comparison Slider.

    Несколько плагинов на JQuery.
    Несколько разных вариантов.
    Ещё можно на Codepen поискать. Есть несколько вариантов.

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

    mizutsune
    @mizutsune
    Frontend Developer
    Можно сделать например через clip-path + SVG.

    Если кратко объяснить процесс, то это делается примерно так:

    Рисуете в графическом редакторе фигуру, которая будет использоваться в качестве контейнера для видео. Далее копируем код SVG и воспользовавшись данным инструментом, получаем координаты для реализации clip-path.

    Финальная реализация будет выглядеть примерно так:

    <svg class="svg">
      <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
        <path d="M0.5,0 L1,1 H0"></path>
      </clipPath>
    </svg>
    
    <div class="clipped">
      <video src="./assets/video.mp4"></video>
    </div>


    .svg {
         position: absolute;
         width: 0;
         height: 0;
    }
    
    .clipped {
         width: 100%;
         max-width: 500px;
         height: 350px;
         -webkit-clip-path: url(#my-clip-path);
         clip-path: url(#my-clip-path);
    }
    
    video {
            width: 100%;
            height: 100%;
            object-fit: cover;
    }
    Ответ написан
    3 комментария
  • Просмотрите простой код, почему Sublime и другие редакторы жалуются?

    mizutsune
    @mizutsune
    Frontend Developer
    Не закрыт тег <article> с классом info и тег <div> с классом services.
    Ответ написан
    Комментировать
  • Как вставить html файл в другой html файл с помощью webpack или другого сборщика?

    mizutsune
    @mizutsune
    Frontend Developer
    Можете попробовать как вариант posthtml-include. Подключаете как модуль в своём сборщике, если есть поддержка и используете.
    Ответ написан
    Комментировать
  • Почему img стоит не по центру button?

    mizutsune
    @mizutsune
    Frontend Developer
    Конечно неплохо было бы добавить кнопке отдельный класс и уже дальше стилизовать кнопку по селектору класса, а не по имени тега. Ну это так, скорее рекомендация.

    А так по поводу вопроса, то можно сделать например вот так:

    button {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    Ответ написан
    5 комментариев