• Как выровнять картинку к кнопке outlook 2016?

    @thekunichka
    1) Сделай ссылку блочной, а line-height или height img-тега задай равной высоте ссылки
    2) Сделай ссылку flex, задай ссылке свойство align-items: center
    3) Создай внутри ссылки div-обёртку (уже разрешено в ссылки помещать блочные элементы), обёртке дай width и height по 100%, сделай обёртку относительной position: relative, с помощью абсолютного позиционирования выровняй картинку по центру - top: 50%, transform: translateY(-50%), но тогда текст будет накладываться на картинку, поэтому задай обёртке padding-left со значением ширины картинки + несколько пикселей, чтобы между картиной и текстом было пространство
    Ответ написан
  • По какой логике нарисовать линии для древовидной структуре комментариев?

    @thekunichka
    На самом деле для стилизации и работы такой структуры и JS не нужен. Такое дерево можно нарисовать с помощью ::before элемента. У тебя есть комментарий - в нём лежит ещё один комментарий как ответ на комментарий выше. Вот этому ответу на комментарий рисуешь ::before линию, как это сделать? Создаёшь before блок допустим 30px на 30px, создаёшь этому блоку border-left и border-bottom, делаешь скругление border-bottom-left-radius условно на 20px (там уже как тебе нужно по макету), затем этот before блок с абсолютным позиционированием сдвигаешь за рамки его родителя как тебе нужно
    Ответ написан
    Комментировать
  • Как реализовать переключение тем на сайте, созданном на WordPress с конструктором Elementor?

    @thekunichka
    Создай отдельный css файл с названием темы, например, у тебя есть style-dark.css, ты создаёшь ещё один style-light.css где меняешь стили темы, и в JS при клике на кнопку переключения в head-link меняешь атрибут href с указанием своего пути в проекте "./style-light.css" Само собой, не забудь сохранить изменения в storage
    Ответ написан
    Комментировать
  • Почему не переключаются стили?

    @thekunichka
    Довольно странно писать css код в html
    Ну для начала рекомендую проверить наличие нужного мета-тега в head страницы:
    <meta name="viewport" content="width=device-width, initial-scale=1">


    У вас не верный синтаксис: тег, для которого будут применяться стили, должен входить в фигурные скобки медиа-запроса, ваш код должен выглядеть вот так:

    <style id="R8639" disabled="false" media="screen and (min-width:0px) and (max-width:222px)"> {body { background-color: hsl(65,20%,70%); }} </style>
    <style id="R6021" disabled="false" media="screen and (min-width:223px) and (max-width:4000px)"> {body { background-color: hsl(285,20%,70%); }} </style>


    И всё-таки настоятельно рекомендую писать код стилей, особенно медиа-запросы, в css файлах.

    @media screen (min-width: 0px) and (max-width: 222px) {
        body {
            background-color: hsl(65,20%,70%);
        }
    }

    @media screen (min-width: 223px) and (max-width: 4000px) {
        body {
            background-color: hsl(285,20%,70%);
        }
    }
    Ответ написан
    5 комментариев
  • Прозрачный текст без размытия на filter: blur() родителе?

    @thekunichka
    Попробуйте ice в before/after задать content: "ice", указав ему приоритетный индекс, размытие на 0px, а самому тексту задать background: transparent
    Ответ написан
    Комментировать