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

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

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

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

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

Wi-Fi 6, пришло твоё время
Войти на сайт
  • Все вопросы
  • Все теги
  • Пользователи

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

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

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

Ankhena

Нежно люблю верстку
  • 1406
    вклад
  • 0
    вопросов
  • 1482
    ответа
  • 63%
    решений
Лайки
  • Информация
  • Ответы
  • Вопросы
  • Комментарии
  • Подписки
  • Нравится
  • Достижения
  • Как сделать такой SVG эффект?

    origami1024
    origami1024 @origami1024
    went out for a night walk
    1) Линии через path.
    2) Круги на местах соединений - через svg элемент<marker>.
    3) Анимацию тегом animate.

    <svg viewBox="0 0 140 140" width=100vw height=100vh>
      <defs>
        <marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
            <circle cx=5 cy=5 r=3 />
        </marker>
      </defs>
      <path d="M20 20 L30 40 L70 20 L90 80" fill="none" stroke="red" marker-start=url(#markerCircle) marker-mid=url(#markerCircle) marker-end=url(#markerCircle)>
        <animate 
               attributeName="d"
               values="M20 20 L30 40 L70 20 L90 80;
                   M20 40 L30 10 L70 60 L90 110;
                   M10 10 L15 80 L120 70 L150 75;
                   M20 20 L30 40 L70 20 L90 80"
               dur="20s"
               repeatCount="indefinite"
               />
      </path>
    </svg>

    UPD: круги через svg marker
    Ответ написан более года назад
    Комментировать
    Нравится 16 Комментировать
  • Datepicker показывает не тот день недели, как исправить?

    NeiroNx
    Александр @NeiroNx
    Программист
    Как то так
    firstDay: 1,
    dayNames: [ "Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота" ],
    dayNamesMin: [ "Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб" ],

    Мне вообще не ясно как так можно настраивать игнорируюя документацию и примеры.
    Ответ написан более года назад
    2 комментария
    Нравится 4 2 комментария
  • Верстка блоков по всей высоте?

    Vlatqa
    Владислав Лысков @Vlatqa Куратор тега CSS
    замени весь свой wrapper
    .wrapper{
      width: 700px;
      columns: 2;
    }
    Ответ написан более года назад
    1 комментарий
    Нравится 1 1 комментарий
  • Почему шрифт не работает на кириллических символах?

    mirnaya @mirnaya
    Похоже, что в конкретно этом файле шрифта нет кириллицы или, что маловероятно, для каждого отдельного символа прописаны неверные номера знаков юникод. Это хорошо видно в прогах для работы со шрифтами
    Ответ написан более года назад
    Комментировать
    Нравится 1 Комментировать
  • Как решить задачку (шахматная доска, ход конем) без использования js?

    profesor08
    profesor08 @profesor08 Куратор тега CSS
    Вот ты с выделением ячейки справился. Молодец. Теперь задай для выделенной ячейки 8 теней синего цвета и позиционируй как надо.

    input[type="radio"]:checked + label {
        background: #FF0000;
        box-shadow: 60px 30px 0 0 blue, 60px -30px 0 0 blue;
        position: relative;
        z-index: 1;
    }


    Можешь даже анимацию задать для тени
    label {
        transition: ease box-shadow .3s;
    }
    Ответ написан более года назад
    5 комментариев
    Нравится 17 5 комментариев
  • Как добиться подобной трансформации?

    hisbvdis
    Рома Зварич @hisbvdis
    Как добиться подобной трансформации?

    С помощью свойства transform
    1) Устанавливаете перспективу
    2) Поворачиваете элемент вкруг оси Y

    Результат:
    https://codepen.io/hisbvdis/pen/OJLKmrv
    5d945671bb6ea903836288.png
    Ответ написан более года назад
    1 комментарий
    Нравится 1 1 комментарий
  • Как стилизировать по разному блоки с одинаковыми классами?

    Beeetle
    Beeetle @Beeetle
    Укажите дополнительные классы к основному: https://codepen.io/semzhukov/pen/PoYvvMx
    Ответ написан более года назад
    Комментировать
    Нравится 1 Комментировать
  • Стоит ли использовать jq для создания сайтов на cms?

    akavato @akavato
    frontend dev
    Всего скорее в "различных cms" уже где-нибудь да есть зависимость Jquery. Поэтому её вполне можно использовать без ущерба в размере загружаемого контента.
    Ответ написан более года назад
    Комментировать
    Нравится 1 Комментировать
  • Где найти такие картинки для сайта?

    alex-1917
    alex-1917 @alex-1917
    Если ответ помог, отметь решением
    Тут паси - https://creativemarket.com/search?q=isometric
    Да, платно. Но раз в неделю бесплатная раздача, жди и обязательно изометрик будет в раздаче, я так изометриков надыбал уже вагончик)))
    Ответ написан более года назад
    Комментировать
    Нравится 1 Комментировать
  • Где найти такие картинки для сайта?

    anatoly_kulikov
    Анатолий Куликов @anatoly_kulikov
    Помог ответ? Отметь решением!
    Freepik, конкретнее - ищите по запросу 'isometric'
    Ответ написан более года назад
    Комментировать
    Нравится 3 Комментировать
  • Нужно ли для Figma стороннее ПО для верстальщика?

    SmthTo
    Рустам Байназаров @SmthTo
    Все перепёлки мира будут оплакивать мою смерть.
    Дополнительного ПО не нужно.

    · можно просто напрямую скинуть ссылку на весь проект (пример), которая открывается в современных Chrome и Firefox (Safari ни разу не пробовал)
    · можно настроить командный доступ для совместной работы
    · можно экспортировать в JPG, PNG
    · можно сделать экспорт файла проекта (.FIG)

    Update: если дать ссылку, у верстальщика не будет возможности посмотреть свойства, цвета объектов, не будет возможности экспортировать иконки, картинки и т. д. Поэтому самый оптимальный вариант — совместная работа или файл (если дизайн не будет претерпевать дальнейших изменений).
    Ответ написан более двух лет назад
    17 комментариев
    Нравится 3 17 комментариев
  • Как сверстать панель такой формы?

    Ингвар Фон Бьёрк @DeboshiR
    Свободу разработчикам!!!
    Для фигур можно задать значения ширины в vw:
    width: 10vw; //10% от видимо ширины
    И аналогично расположить их:
    top: 10vh; 10% от видимой высоты
    left: 10vw; 10% от видимо ширины


    И добавить медиа-запросы, чтобы при определённом размере экрана они скрывались:
    @media screen and (max-width: 960px) {
    display: none; //при максимальной ширине 960px элемент скроется
    }
    Ответ написан более года назад
    1 комментарий
    Нравится 1 1 комментарий
  • Как сделать такой блок?

    RAX7
    RAX7 @RAX7

    В ms edge не работает сочетание свойств transition и min-height: calc()
    Ответ написан более года назад
    2 комментария
    Нравится 2 2 комментария
  • Как делаются такие блоки?

    NooBiToo
    Erl @NooBiToo
    rangesliderjs
    refreshless
    Ответ написан более года назад
    Комментировать
    Нравится 1 Комментировать
  • Как скрыть тег H1 не сломав индексацию?

    criticalsomethoughts
    Robert-critical-thoughts @criticalsomethoughts
    UI\UX Developer, Project Manager
    Коротко: visually-hidden
    Как правильно прятать элементы, не нарушая индексацию
    Ответ написан более года назад
    Комментировать
    Нравится 2 Комментировать
  • Как перенести ключи от Github на новый комп?

    glaphire
    Daria Motorina @glaphire
    PHP developer
    Ключи генерируются на каждой новой системе вручную
    Есть официальная инструкция, как их генерить и как добавлять в аккаунт
    Ссылка
    Ответ написан более года назад
    1 комментарий
    Нравится 3 1 комментарий
  • Как сверстать эту палку над текстом?

    hisbvdis
    Рома Зварич @hisbvdis
    Можно пойти по долгому пути с использванием псевдоэлементов, а можно в одну строку это сделать.

    Результат:
    https://codepen.io/hisbvdis/pen/yLBvoar
    Ответ написан более года назад
    1 комментарий
    Нравится 3 1 комментарий
  • VueJS: где лучше хранить css, в компонентах .vue или main.css?

    delphinpro
    Сергей delphinpro @delphinpro Куратор тега CSS
    frontend developer
    В Vue приложении используем препроцессор (scss). Кроме того используем внешние пакеты для вертикального ритма и сетки.

    Хочется хранить стили в однофайловых компонентах, при этом имея возможность определить глобально часть sass-переменных, кое-какие миксины и функции. Также нужно как-то подключить миксины сетки и ритма, возможно подключать стили от сторонних пакетов.

    Вариант импортировать scss-файл с определениями в каждом компоненте сразу откинули, ибо люди мы ленивые.

    Что делаем:
    Подключаем в точке входа (main.js) основной стилевой файл:
    import '@/styles/main.scss';
    import Vue from 'vue';
    //...

    В нем подключаем всякое-разное-глобальное-базовое:
    @import "base/normalize";
    @import "base/init";
    @import "base/typography";
    @import "base/code";
    @import "base/links";
    @import "base/tables";
    @import "base/buttons";
    @import "base/control-group";
    @import "base/general-form";
    @import "parts/transitions";
    ...

    Далаем два файла: env-development.scss и env-production.scss
    $NODE_ENV: development;
    @import "cfg-vars";

    $NODE_ENV: production;
    @import "cfg-vars";

    Переменная $NODE_ENV нам нужно. чтобы управлять стилями в зависимости от окружения.
    Дальше в cfg-vars.scss подключаем/пишем все необходимые глобальные конфиги
    $DEV_MODE: $NODE_ENV == development;
    $MAX_INT32: 2147483647;
    
    @import "cfg-vrhythm";
    @import "cfg-grid";
    @import "../../../node_modules/vrhythm/source/vrhythm";
    @import "../../../node_modules/bs-grid-system/source/scss/bs-grid";
    @import "../mixins";
    @import "cfg-z-indexes";
    
    $wt-family-base: "Open Sans", sans-serif;
    $wt-family-head: "Roboto Slab", serif;
    $font-family-monospace:  "Fira Code", Menlo, Monaco, Consolas, "Courier New", monospace;
    
    //==
    //== Color palette
    //== ======================================= ==//
    
    $palette-light-blue: #3c8dbc; // Primary
    $palette-red       : #dd4b39; // Danger
    $palette-green     : #00a65a; // Success
    $palette-aqua      : #00c0ef; // Info
    $palette-yellow    : #f39c12; // Warning
    
    ...


    Почти всё готово. Осталось только автоматически подключить эти конфиги к сборке.
    Идём в vue.config.js и добавляем секцию css:
    const NODE_ENV = process.env.NODE_ENV === 'development'
        ? 'development'
        : 'production';
    //...
    module.exports = {
        //...
        css: {
            extract: NODE_ENV === 'production',
            loaderOptions: {
                sass: {
                    data: `@import "@/styles/config/env-${NODE_ENV}.scss";`,
                },
            },
        },
    };


    Теперь мы спокойно пишем стили компонентов на scss прямо vue-файлах, и оставляем возможность какие-то стили писать в отдельных файлах.

    Enjoy!
    Ответ написан более года назад
    4 комментария
    Нравится 15 4 комментария
  • Где взять макеты для практики из Figma?

    SmthTo
    Рустам Байназаров @SmthTo
    Все перепёлки мира будут оплакивать мою смерть.
    https://www.figmafreebies.com/
    https://www.figmacrush.com/

    Вводите в поиск: Figma templates — находите кучи сайтов.

    UPDATE. Ещё в Community можно смотреть.
    Ответ написан более года назад
    Комментировать
    Нравится 19 Комментировать
  • Как узнать по каким ключевым словам переходили на сайт?

    anyuta84 @anyuta84
    Узнать запрсы по которым переходили на сайт очень просто - зарегистрируйте сайт в Яндекс и Google вебмастерах и Метрике с Аналитикой (кроме запросов найдете еще огромную кучу полезной информации). А по поводу мест в выдаче - есть огромное количество различных сервисов (единственный минус - они платные).
    Ответ написан более года назад
    1 комментарий
    Нравится 3 1 комментарий
Оценили как «Нравится»
  • ← Предыдущие
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • Следующие →
Самые активные сегодня
  • sashabeep
    sashabeep
    • 12 ответов
    • 0 вопросов
  • Шахмаев Анвар
    • 8 ответов
    • 0 вопросов
  • firedragon
    Владимир Коротенко
    • 7 ответов
    • 0 вопросов
  • 0xD34F
    0xD34F
    • 6 ответов
    • 0 вопросов
  • approximate_solution
    approximate solution
    • 6 ответов
    • 0 вопросов
  • MinTnt
    MinTnt
    • 6 ответов
    • 0 вопросов
  • © Habr
  • О сервисе
  • Обратная связь
  • Блог

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

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