Местоположение
Россия

Наибольший вклад в теги

Все теги (17)

Лучшие ответы пользователя

Все ответы (24)
  • Знает ли кто-то как собрать сайт в 1 файл?

    @markak
    Frontend developer
    Можно, если стили из файла перенести в тэг style, изображения сконвертировать в base64 и заменить в соответствующих атрибутах src и значениях свойств background-*
    Например вот так:

    https://jsfiddle.net/71emtqoL/

    <!doctype html>
    
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>example</title>
      <style>
        .bg-img{
          background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
    	    background-repeat:  no-repeat;
    	    padding-top: 10px;
        }
      </style>
    </head>
    
    <body>
      <div>
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
        <p>Изображение красной точки в base64 (img src)</p>
      </div>
      <div class="bg-img">Изображение красной точки в base64 (background-image)</div>
    </body>
    </html>
    Ответ написан
    Комментировать
  • Сделать половину заголовка в две строки?

    @markak
    Frontend developer
    https://jsfiddle.net/3m6yu48c/2/

    <h1 class="title">
        <span class="title__w1">корм</span>
        <span class="title__w2">для</span>
        <span class="title__w3">домашних</span>
        <span class="title__w4">кроликов</span>
    </h1>


    .title {
      display: grid;
      grid-template-areas: 
        "w1 w2"
        "w1 w3"
        "w4 w4";
        grid-template-columns: auto 1fr;
        
        &__w1{
          grid-area: w1;
          font-size: 2.5em;
        }
        
        &__w2{
          grid-area: w2;
        }
        
        &__w3{
          grid-area: w3;
        }
        
        &__w4{
          grid-area: w4;
          font-size: 2em;
        }
    }
    Ответ написан
    Комментировать
  • Стоит ли верстать верстать под perfect pixel?

    @markak
    Frontend developer
    1. Фигма и браузер по-разному рендерят шрифты, соответственно текст может расходится в макете и браузере.
    2. Если делаешь блок на флексах и задаешь центрирование или кнопку, то в некоторых местах у дизайнера может быть визуально контент посередине, а по факту padding-left: 16px; padding-right: 17px и соответственно следовать пиксель в пиксель - делать некачественную верстку, которая займет больше времени.

    Все зависит от макета, дизайнера и заказчика, чьи требования выполняются. Этот вопрос скорее по работе с клиентом, чем технический.
    Ответ написан
    2 комментария
  • Как сделать такое меню?

    @markak
    Frontend developer
    transition 3d css в гугл
    Ответ написан
    Комментировать
  • Как реализовать поиск на js?

    @markak
    Frontend developer
    https://jsfiddle.net/khvobL3r/11/

    let itemsStr = "";
    list.forEach(function(text, indx) {
          if( text.textContent.toUpperCase().includes(query) ) {
          itemsStr += '<li>'+text.textContent+'</li>';
       }
    });
    $('#result').append(itemsStr);
    Ответ написан
    3 комментария