Все сервисы Хабра

Сообщество IT-специалистов

Ответы на любые вопросы об IT

Профессиональное развитие в IT

Удаленная работа для IT-специалистов

Войти на сайт
  • Все вопросы
  • Все теги
  • Пользователи

Хабр Q&A — вопросы и ответы для IT-специалистов

Получайте ответы на вопросы по любой теме из области IT от специалистов в этой теме.

Узнать больше
другие проекты хабра
  • Хабр
  • Карьера
  • Фриланс
Задать вопрос

Kote

Режу
  • 4
    вклад
  • 9
    вопросов
  • 9
    ответов
  • 44%
    решений
Лайки
  • Информация
  • Ответы
  • Вопросы
  • Комментарии
  • Подписки
  • Нравится
  • Почему не принимает переменные миксин PUG?

    yarkov
    Алексей Ярков @yarkov
    Проект "Жизнь после смерти" - lifeafterdeath.ru
    mixin img(name, ext, alt)
      img(srcset=`img/${name}.${ext},img/${name}@2x.${ext} 1.5x,img/${name}@2x.${ext} 2x', src='img/${name}.${ext}`, alt=`${alt}`)
    
    +img('sail','jpg', 'alt text')
    Ответ написан более трёх лет назад
    4 комментария
    4 комментария
  • Три блока друг над другом при резиновой верстке. Как сделать одинаковую высоту средствами css?

    iiiBird
    iBird Rose @iiiBird Куратор тега CSS
    Пока ты спишь - твой конкурент совершенствуется
    flex такое умеет
    Ответ написан более трёх лет назад
    2 комментария
    2 комментария
  • Насколько верна следующая структура HTML?

    dmitry_luzanov
    Дмитрий Лузанов @dmitry_luzanov
    Не профи, но сделал бы так
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Какие контрольные точки для адаптивных макетов лучше?

    sfi0zy
    Ivan Bogachev @sfi0zy Куратор тега HTML
    Creative frontend developer
    Есть два варианта
    1) 1600 - 1366; 1366-800; 800-320; 320 и меньше
    2) 1920 - 1440; 1440-1024;1024-760; 760 и меньше

    Чувствую себя тем самым осликом из картинки со шреком, но почему бы не посмотреть на ваш контент? Просто посмотреть на каких разрешениях он начинает плохо восприниматься (может быть строки слишком короткие - не читаются, или наоборот - слишком длинные) и исходя из этого решить на каких разрешениях нужно что-то менять, или не нужно (если и так все хорошо), и не привязываться к конкретным разрешениям конкретных устройств?
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Почему последний flex-item не сохраняет ширину других flex-item'ов?

    aliencash
    Андрей Федоров @aliencash
    Партизан
    Потому что вы позволили item'ам растягиваться - flex: 1 1 150px;
    Замените на flex: 0 1 150px;
    Ответ написан более трёх лет назад
    3 комментария
    3 комментария
  • Как сделать подобную стрелку на сайте?

    aliencash
    Андрей Федоров @aliencash
    Партизан
    codepen.io/aliencash/pen/egpgzL
    тени и градиенты сложновато будет одним div сделать...
    Ответ написан более трёх лет назад
    1 комментарий
    1 комментарий
  • Можно ли сделать div с треугольным низом и обводкой?

    webirus
    Сергей Горячев @webirus
    Тыжверстальщик! Наверстай мне упущенное...
    Градусы, размеры и остальное подбирайте под свою фигуру.
    https://jsfiddle.net/v8v0swa4/

    .div {
      width: 100px;
      height: 100px;
      border: 3px solid red;
      border-bottom: 0;
      position: relative;
    }
    .div:after, .div:before {
      position: absolute;
      content: '';
      width: 57px;
      border-top: 3px solid red;
      bottom: -11px;
    }
    .div:before {
      left: -4px;
      transform: rotate(20deg);
    }
    .div:after {
      right: -4px;
      transform: rotate(-20deg);
    }
    Ответ написан более трёх лет назад
    7 комментариев
    7 комментариев
  • Как сделать двойное подчеркивание у ЦЕНТРИРОВАННОГО заголовка без дополнительной обертки?

    mibo @mibo
    Оберните текст заголовка в span и для него пропишите border-bottom:3px double;
    Ответ написан более трёх лет назад
    1 комментарий
    1 комментарий
  • Почему блоки разъезжаются по вертикали при маштабирование?

    webirus
    Сергей Горячев @webirus
    Тыжверстальщик! Наверстай мне упущенное...
    Потому что.
    Какой вопрос, такой и ответ.
    Ответ написан более трёх лет назад
    2 комментария
    2 комментария
  • Как сделать двойное подчеркивание у ЦЕНТРИРОВАННОГО заголовка без дополнительной обертки?

    ant1vit @ant1vit
    border-bottom:3px double;
    Ответ написан более трёх лет назад
    2 комментария
    2 комментария
  • Как сделать подобное?

    archakov06
    Archakov Dennis @archakov06
    Frontend-разработчик (ReactJS)
    $('header .top .profile ul li a[href*="'+location.pathname+'"]').addClass('active');


    Это решение не займет лишнего пространства и использовать window.location.href, не есть правильно. Так как во многих сайтах, в качестве адреса используется путь без указа протокола и домена, то есть только путь к разделу. Можно этой одной строчкой решить весь ваш вопрос и код @Huf

    location.pathname = "/q/373607" - возвращает только путь к определенному разделу, без протокола и домена.

    location.href = "https://toster.ru/q/373607" - возвращает полный адрес.

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

    Вам остается просто создать для ul.menu li a, отдельный класс .active и уже настраивать по вашему желанию.
    Ответ написан более трёх лет назад
    3 комментария
    3 комментария
  • Как сделать, чтобы цвет меню менялся в зависимости от активного раздела?

    Ankhena
    Ankhena @Ankhena Куратор тега CSS
    Нежно люблю верстку
    В JS условие в зависимости от высоты прокрутки присваивать класс light или dark (или как Вам больше нравится их называть)
    Ответ написан более трёх лет назад
    1 комментарий
    1 комментарий
  • Существует ли решение для компиляции LESS/SASS/Stylus/etc. без Node.js на десктопе?

    Aleksey Chernikov @ch3rri
    Prepros хорош. Несмотря на то, что лицензия платная, вся функциональность доступна в триале. Но будет примерно раз в час выскакивать окошко о просьбе оплатить лицензию.
    Для MacOS - CodeKit 3
    Ответ написан более трёх лет назад
    3 комментария
    3 комментария
  • Как в MS Visual Studio сделать фрагмент кода (html) inline?

    AlekseyNemiro
    Алексей Немиро @AlekseyNemiro
    В самой студии такого не припомню.

    Можно макрос написать, но лучше расширение поискать.

    Например, в CodeMaid есть функция Joining для склейки нескольких строк в одну.

    Или JoinLines - более легкий вариант.

    По горячим клавишам, если будут проблемы или просто захочется их переопределить, то сделать это можно в настройках Visual Studio: меню Сервис => Параметры => Окружение => Клавиатура.

    50ca11b86dad4ea7a2a7a096072e27bd.png
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
  • Как сделать подобный элемент?

    iiiBird
    iBird Rose @iiiBird Куратор тега CSS
    Пока ты спишь - твой конкурент совершенствуется
    https://jsfiddle.net/iBird/qfw1bss5/
    Ответ написан более трёх лет назад
    5 комментариев
    5 комментариев
  • Как сделать фильтр на JS?

    Immortal_pony
    Immortal_pony @Immortal_pony Куратор тега JavaScript
    Для начала select'у присвоить какое-то имя а в value каждого option'а прописать класс необходимого div'а:
    <select name="doctors">
        <option disabled selected>Все специальности</option>
        <option value="pediatric-dentist">Детский стамотолог</option>
        <option value="surgeon">Хирург</option>
    </select>


    Не забудьте и div'ам его прописать.
    <div class="item">
        <div class="doctor surgeon">
            <!-- Дальнейший код карточки -->
        </div>
    </div>


    Потом написать обработчик, который будет отслеживать изменения выпадающего списка и показывать соответствующие блоки.
    $('[name="doctor"]').on('change', function() { 
        var selector = '.' + $(this).val();
        var chosenItems = $(selector).closest('.item');
    
        // Сокрытие всех блоков
        $('.item').hide();
    
        // Показ выбранных блоков
        chosenItems.show();
    });


    Не заметил, что в тэгах нет JQuery. На всякий случай продублирую на чистом JS
    var toggle = document.querySelector('[name="doctors"]');
    
    toggle.addEventListener('change', function() { 
        var chosenClass = this[this.selectedIndex].value;
        var items = document.querySelectorAll('.item');
    
        Array.prototype.forEach.call(items, function(item) {
            var child = item.children[0];
            var childClasses = child.className.split(' ');
    
            if (childClasses.indexOf(chosenClass) === -1) {
                item.style.display='none';
            } else {
                item.style.display='block';
            }
        });
    });


    Пример: https://jsfiddle.net/t3hy7mjr/2/
    Ответ написан более трёх лет назад
    3 комментария
    3 комментария
  • Шаблонизатор html для новчиков: как сделать первые шаги?

    andrhohlov
    Андрей Хохлов @andrhohlov
    Разберитесь Gulp
    gulpjs.com
    + тысячи ссылок в гугле и вопросов на тостере, не ленитесь поискать

    Затем рекомендую взять Jade в качестве шаблонизатора
    https://www.npmjs.com/package/gulp-jade
    jade-lang.com
    Или Handlebars
    handlebarsjs.com

    Можете взять что-то готовенькое
    https://github.com/tars/tars
    https://github.com/CSSSR/csssr-project-template
    но мне кажется будет сложнее разобраться сразу в таком комбайне.
    Ответ написан более трёх лет назад
    2 комментария
    2 комментария
  • Как наложить картинку на первую букву?

    Faliah @Faliah
    А что конкретно вы подразумеваете под "не будет адаптивно"? position: absolute Выравнивает элемент относительно ближайшего родительского блока, у которого position: relative. Если таких элементов нет, то им становится body.
    Вот быстрая реализация: Выглядит не плохо

    Её минусы в том, что размеры статические, но если поиграть с процентами, em или rem, то можно сделать полностью динамические размеры.

    Быстро сделал обновлённую версию через rem - при изменении font-size у html картинка и текст довольно хорошо подстраиваются, не разъезжаясь
    Ответ написан более трёх лет назад
    6 комментариев
    6 комментариев
  • Как сделать, чтобы цвет rgba плавно перешел из прозрачного в 1?

    bootd
    Дима Паутов @bootd Куратор тега CSS
    Гугли и ты откроешь врата знаний!
    .menu {
    background-color: rbga(0,0,0,0);
    
    transition: .2s ease-in-out;
    }
    
    .menu.open {
    background-color: rbga(0,0,0,1);
    }
    Ответ написан более трёх лет назад
    Комментировать
    Комментировать
Оценили как «Нравится»
Самые активные сегодня
  • mayton2019
    • 13 ответов
    • 0 вопросов
  • gzhegow
    Григорий Васильков
    • 9 ответов
    • 0 вопросов
  • Adamos
    Adamos
    • 7 ответов
    • 0 вопросов
  • VoidVolker
    VoidVolker
    • 6 ответов
    • 0 вопросов
  • Dr. Bacon
    • 6 ответов
    • 0 вопросов
  • sergey-gornostaev
    Сергей Горностаев
    • 6 ответов
    • 0 вопросов
  • © Habr
  • О сервисе
  • Обратная связь
  • Блог

Войдите на сайт

Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации