Задать вопрос
AngReload

AngReload

Кратко о себе
Ответы пользователя по тегу CSS

  • Как показать другую часть картинки по наведение в css?

    AngReload
    @AngReload
    Кратко о себе
    Ещё один вариант: вложить изображение в блок с размерами 16x16 и overflow:hidden, и при наведении применить картинке margin-top:-16px;
    Ответ написан
    14 комментариев
    14 комментариев

  • Можно ли придать фокусировочному обрамлению поля формы такую же скруглённую форму, как и само скруглённое (посредством border-radius) поле формы?

    AngReload
    @AngReload
    Кратко о себе
    outline не скругляется, но вместо него можно использовать box-shadow
    :focus {
     outline: 0;
     box-shadow: 0 0 0 1px #0078d7;
     box-shadow: 0 0 0 1px -webkit-focus-ring-color;
}
    Ответ написан
    Комментировать
    Комментировать

  • Вместо GIF получается квадратики?

    AngReload
    @AngReload
    Кратко о себе
    Дайте ссылку.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделаю такую линию на SVG?

    AngReload
    @AngReload
    Кратко о себе
    Можно поиграться здесь:
    blogs.sitepointstatic.com/examples/tech/svg-curves...

    Вообще мало понял, какая кривая, график чего.
    Ответ написан
    Комментировать
    Комментировать

  • Почему цвет отображается некорректно?

    AngReload
    @AngReload
    Кратко о себе
    Может там стиль для посещённой ссылки сработал? Какой-нибудь селектор на старом браузере не работает? Или у пользователя установлен юзерстиль... Тут только гадать.
    Ответ написан
    1 комментарий
    1 комментарий

  • Откуда появляется горизонтальный скрол на этой странице?

    AngReload
    @AngReload
    Кратко о себе 
    .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    margin-top: 20px;
}

    У вас тут написано
    margin-right: -15px;
    margin-right: -15px;
    грубо говоря, залезть на 15 пикселей за правую и левую границу экрана
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать так чтобы блок не сжимался при font-size: 0?

    AngReload
    @AngReload
    Кратко о себе
    Тот код, что в вашем вопросе — работает как ожидается. Но возможно у вас есть ещё какие-то стили для этого блока, следует посмотреть в Инспекторе в Инструментах разработчика.

    А так нельзя?
    <a href="#" class="ig"><img src="URL" alt="Мы в инстаграм"></a>
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать такое подчеркивание текста?

    AngReload
    @AngReload
    Кратко о себе
    Помести текст в тег span и примени к нему что-то типа border-bottom: 4px solid red;
    https://jsfiddle.net/256hwzej/7/
    Ответ написан
    Комментировать
    Комментировать

  • Как обойти anti-adblock на qaru.site?

    AngReload
    @AngReload
    Кратко о себе
    Зайди в настройки uBlock Origin > Мои фильтры, и добавь строчку:
    http://qaru.site/*.js
    Потом нажми «Сохранить изменения».

    Какой-то он подозрительный этот сайт, он только переводит stackoverflow?
    Ответ написан
    6 комментариев
    6 комментариев

  • Почему не получается переписать оригинальное свойство импортируемого css?

    AngReload
    @AngReload
    Кратко о себе
    По нормальному должны быть такие селекторы:
    .subtitle, который задаёт отступ-снизу для всех subtitle и
    .subtitle:last-child который отменяет отступ-снизу для последнего subtitle

    У вас селекторы почему-то были организованы наоборот, так что есть правила:
    .subtitle — который работает только для последнего элемента, так как после него есть селектор отменяеющий его для всех остальных
    .subtitle:not(:last-child) да-да этот, поищите его ниже в CSS, если его изменить, то изменятся и все .subtitle. Но это правило применяется и к другим элементам, так что лучше создать отдельное правило после него.
    Ответ написан
    Комментировать
    Комментировать

  • Как пофиксить добавление ширины от скроллбара на Windows?

    AngReload
    @AngReload
    Кратко о себе
    В приципе, можно узнать размер прокрутки.
    https://codepen.io/parziphal/pen/qrZGLw
    Но я не знаю что вы хотите делать с этим дальше? Можно с помощью js классы навешивать или ещё что-нибудь что вам нужно.
    Ответ написан
    Комментировать
    Комментировать

  • Как модернизировать скролл на IE11?

    AngReload
    @AngReload
    Кратко о себе
    Попробуй остановить видео когда текущая прокрутка не равна нулю. Оно всё равно фоновое, и даром не нужно его воспроизведение, когда оно на половину обрезано.
    Ответ написан
    Комментировать
    Комментировать

  • Как убрать отступы в блоке в Опере и Хроме?

    AngReload
    @AngReload
    Кратко о себе
    У меня ваша картинка не показывается, так как вы сделали кривую ссылку на яндекс диск.
    Но подозреваю, что это может быть артефакт интерполяции изображения. Попробуйте добавить для картинки стиль image-rendering: pixelated;. Если границы исчезнут, то проблема в этом.
    Ответ написан
    1 комментарий
    1 комментарий

  • Последствия добавления backface-visibility: hidden для *?

    AngReload
    @AngReload
    Кратко о себе
    Здесь https://caniuse.com/#search=backface-visibility есть несколько known issues, но ничего смертельного на мой взгляд.
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно называть переменные в CSS?

    AngReload
    @AngReload
    Кратко о себе
    Можно подглядеть у пикабу, на сайте можно менять светлую и тёмную тему и основной цвет. Там хороший код, и названия, которые дали переменным отлично отражают их назначение.
    Длиннокод
    :root {
  --color--bg: #fff;
  --color--bg_80: rgba(255, 255, 255, 0.8);
  --color--bg_90: rgba(255, 255, 255, 0.9);
  --color--bg_contrast: #000;
  --color--bg_contrast-50: rgba(0, 0, 0, 0.5);
  --color--bg_contrast-60: rgba(0, 0, 0, 0.6);
  --color--color: #000;
  --color--green: #8ac858;
  --color--red: #FD5D47;
  --color--yellow: #ffc800;
  --color--gray: #cacaca;
  --color--gray_light: #e8e8e8;
  --color--gray_dark: #adadad;
  --color--text: #212121;
  --color--secondary: #4d4d4d;
  --color--caption: #757575;
  --color--text_green: #6c9b45;
  --color--text_link: #6c9b45;
  --color--text_link: var(--color--text_green);
  --color--text_red: #f75c48;
  --color--text_contrast: #fff;
  --color--text_search: rgba(255, 200, 0, 0.3);
  --color--selection: #c5e4ac;
  --color--tool: #c2c2c2;
  --color--icon: #BDBDBF;
  --color--social_vk: #5b7aa8;
  --color--social_facebook: #4867aa;
  --color--social_twitter: #41abe1;
  --color--social_google: #dd4b38;
  --color--app__bg: #f4f4f4;
  --color--app__text: #212121;
  --color--section__bg: #fff;
  --color--section_gray__bg: #f9f9fb;
  --color--section_success__bg: #8ac858;
  --color--section_success__bg: var(--color--green);
  --color--section_success__text: #fff;
  --color--section_danger__bg: #FD5D47;
  --color--section_danger__bg: var(--color--red);
  --color--section_danger__text: #fff;
  --color--section_warning__bg: rgba(255, 200, 0, 0.05);
  --color--section_warning__border: #ffc800;
  --color--section_warning__text: #212121;
  --color--toast_default__bg: #6ea046;
  --color--toast_default__text: #fff;
  --color--toast_danger__bg: #FD5D47;
  --color--toast_danger__bg: var(--color--red);
  --color--toast_danger__text: #fff;
  --color--toast_warning__bg: #ffc800;
  --color--toast_warning__text: #5e3a00;
  --color--popup_shadow-arrow: rgba(0, 0, 0, 0.08);
  --color--popup_default__bg: #fff;
  --color--popup_default__text: #212121;
  --color--popup_gray__bg: #f9f9fb;
  --color--popup_gray__text: #212121;
  --color--popup_danger__bg: #FD5D47;
  --color--popup_danger__bg: var(--color--red);
  --color--popup_danger__text: #fff;
  --color--popup_warning__bg: #212121;
  --color--popup_warning__text: #fff;
  --color--tag__text: #757575;
  --color--tag_highlight__text: #4d4d4d;
  --color--tag-focus__text: #212121;
  --color--header__text: #d8ffbc;
  --color--header_active__text: #fff;
  --color--header_dark__text: rgba(255, 255, 255, 0.7);
  --color--header_icon__bg: rgba(0, 0, 0, 0.05);
  --color--header__bg: #8ac858;
  --color--header__bg: var(--color--green);
  --color--footer__text: #212121;
  --color--footer__bg: #f0f0f0;
  --color--award__bg: #f1f1f1;
  --color--award__bg_hover: #d9d9d9;
  --color--menu-item-current__text: #6c9b45;
  --color--menu-item-current__text: var(--color--text_green);
  --color--menu-item-current__bg: #8ac858;
  --color--menu-item-current__bg: var(--color--green);
  --color--comments__left-border: #efefef;
  --color--comments__image: #fff;
  --color--input__bg: #fff;
  --color--input__text: #212121;
  --color--input-placeholder__text: #757575;
  --color--input-focus__border: #8ac858;
  --color--input-focus__border: var(--color--green);
  --color--input_complexity__bg: #e8e8e8;
  --color--input_checkbox: #adadad;
  --color--bell_yellow: #ffc800;
  --color--border: #e9e9e9;
  --color--border_success: #8ac858;
  --color--border_success: var(--color--green);
  --color--border_error: #FD5D47;
  --color--border_error: var(--color--red);
  --color--border_upload: rgba(233, 233, 233, 0.4);
  --color--highlight_yellow__bg: rgba(255, 200, 0, 0.1);
  --color--highlight_yellow__bg_40: rgba(255, 200, 0, 0.4);
  --color--highlight_red__bg: rgba(253, 93, 71, 0.1);
  --color--highlight_gray__bg: rgba(233, 233, 233, 0.4);
  --color--highlight_green__bg: rgba(138, 200, 88, 0.1);
  --color--shadow: rgba(0, 0, 0, 0.16);
  --color--button__text_contrast: #fff;
  --color--button__stroke: rgba(88, 88, 88, 0.2);
  --color--button__stroke_contrast: rgba(255, 255, 255, 0.2);
  --color--button_default__bg: #e9e9e9;
  --color--button_default__text: #585858;
  --color--button_success__bg: #8ac858;
  --color--button_success__bg: var(--color--green);
  --color--button_danger__bg: #FD5D47;
  --color--button_danger__bg: var(--color--red);
  --color--button_warning__bg: #ffc800;
  --color--button_warning__bg: var(--color--yellow);
  --color--button_dark__bg: #4d4d4d;
  --color--button_dark__bg: var(--color--secondary);
  --color--button-small_success__bg: #83be54;
  --color--button-small_default__bg: #dddddd;
  --color--button-small_default__text: #585858;
  --color--slider__quantity: rgba(138, 200, 88, 0.7);
  --color--progress-circle__storke: rgba(117, 117, 117, 0.2);
  --color--editor__bg: rgba(0, 0, 0, 0.7);
  --color--editor__text: #fff;
  --color--editor__button_hover: rgba(0, 0, 0, 0.4);
  --color--editor__button_active: rgba(0, 0, 0, 0.4);
  --color--player__play: rgba(0, 0, 0, 0.1);
  --color--player__logo: rgba(255, 255, 255, 0.5);
  --color--code__bg: #f9f9fb
}

html[data-theme-dark] {
  --color--bg: #22272B;
  --color--bg_80: rgba(34, 39, 43, 0.8);
  --color--bg_90: rgba(34, 39, 43, 0.9);
  --color--bg_contrast: #fff;
  --color--bg_contrast-50: rgba(34, 39, 43, 0.5);
  --color--bg_contrast-60: rgba(34, 39, 43, 0.6);
  --color--color: #fff;
  --color--green: #567842;
  --color--red: #FD5D47;
  --color--yellow: #917815;
  --color--gray: #4e5255;
  --color--gray_light: #65686b;
  --color--gray_dark: #393d41;
  --color--text: #bfbfbf;
  --color--secondary: #a6a6a6;
  --color--caption: #7d7d7d;
  --color--text_green: #6c9b45;
  --color--text_red: #f75c48;
  --color--text_contrast: #fff;
  --color--text_search: rgba(145, 120, 21, 0.3);
  --color--selection: rgba(69, 96, 53, 0.99);
  --color--tool: #4e5255;
  --color--icon: #4e5255;
  --color--social_vk: #5b7aa8;
  --color--social_facebook: #4867aa;
  --color--social_twitter: #41abe1;
  --color--social_google: #dd4b38;
  --color--app__bg: #171c20;
  --color--app__text: #bfbfbf;
  --color--section__bg: #22272B;
  --color--section_gray__bg: #1a1e21;
  --color--section_success__text: #fff;
  --color--section_danger__bg: #FD5D47;
  --color--section_danger__text: #fff;
  --color--section_warning__bg: rgba(145, 120, 21, 0.05);
  --color--section_warning__border: #917815;
  --color--section_warning__text: #bfbfbf;
  --color--toast_default__bg: #8ac858;
  --color--toast_default__text: #fff;
  --color--toast_danger__bg: #FD5D47;
  --color--toast_danger__text: #fff;
  --color--toast_warning__bg: #fed45b;
  --color--toast_warning__text: #5e3a00;
  --color--popup_shadow-arrow: rgba(0, 0, 0, 0.08);
  --color--popup_default__bg: #1f2327;
  --color--popup_default__text: #bfbfbf;
  --color--popup_gray__bg: #171b1e;
  --color--popup_gray__text: #bfbfbf;
  --color--popup_danger__bg: #FD5D47;
  --color--popup_danger__text: #fff;
  --color--popup_warning__bg: #181b1e;
  --color--popup_warning__text: #bfbfbf;
  --color--tag__text: #7d7d7d;
  --color--tag_highlight__text: #a6a6a6;
  --color--tag-focus__text: #bfbfbf;
  --color--header__text: rgba(255, 255, 255, 0.7);
  --color--header_active__text: #fff;
  --color--header_dark__text: rgba(255, 255, 255, 0.7);
  --color--header_icon__bg: rgba(255, 255, 255, 0.05);
  --color--header__bg: #1f2327;
  --color--footer__text: #bfbfbf;
  --color--footer__bg: #0f0f0f;
  --color--award__bg: #4e5255;
  --color--award__bg_hover: #606366;
  --color--comments__left-border: #393d41;
  --color--input__bg: #22272B;
  --color--input__text: #bfbfbf;
  --color--input-placeholder__text: #7d7d7d;
  --color--input-focus__border: #8ac858;
  --color--input-focus__border: var(--color--green);
  --color--input_complexity__bg: #65686b;
  --color--input_checkbox: #393d41;
  --color--bell_yellow: #ffc800;
  --color--border: #393d41;
  --color--border_error: #FD5D47;
  --color--border_upload: rgba(57, 61, 65, 0.4);
  --color--highlight_yellow__bg: rgba(145, 120, 21, 0.1);
  --color--highlight_yellow__bg_40: rgba(145, 120, 21, 0.4);
  --color--highlight_red__bg: rgba(253, 93, 71, 0.1);
  --color--highlight_gray__bg: rgba(255, 255, 255, 0.1);
  --color--highlight_green__bg: rgba(86, 120, 66, 0.1);
  --color--shadow: rgba(0, 0, 0, 0.46);
  --color--button__text_contrast: #fff;
  --color--button__stroke: rgba(110, 110, 110, 0.2);
  --color--button__stroke_contrast: rgba(255, 255, 255, 0.2);
  --color--button_default__bg: #2d3236;
  --color--button_default__text: #6e6e6e;
  --color--button_dark__bg: #0f0f0f;
  --color--button-small_default__bg: #2b3033;
  --color--button-small_default__text: #6e6e6e;
  --color--button-small_success__bg: #52723f;
  --color--slider__quantity: #3c542e;
  --color--progress-circle__storke: rgba(125, 125, 125, 0.2);
  --color--editor__bg: rgba(34, 39, 43, 0.9);
  --color--editor__text: #fff;
  --color--editor__button_hover: rgba(255, 255, 255, 0.2);
  --color--editor__button_active: rgba(255, 255, 255, 0.4);
  --color--player__play: rgba(34, 39, 43, 0.1);
  --color--player__logo: rgba(255, 255, 255, 0.5)
}
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать так, что-бы условие выполнялось после того, как оно будет НЕ выполнено один раз?

    AngReload
    @AngReload
    Кратко о себе
    Как-то так?
    // global variable
let isBeforeWasNotOffset = false;

function myAwesomeListener() {
  if (top_offset >= general_logo_offset.top) isBeforeWasNotOffset = true;
  if (isBeforeWasNotOffset &&
      top_offset <= general_logo_offset.top - 55 && top_offset >= 0
  ) {
    // bla bla bla
  }
}
    Ответ написан
    Комментировать
    Комментировать

  • Почему иконки стали пиксельными?

    AngReload
    @AngReload
    Кратко о себе
    Я бы проверил нет ли каких-нибудь поворотов, хитрых наложений, эффектов. Чего-нибудь что может отправить на обработку на видеокарту. Хе-хе, артефакты выглядят как шрифты в win xp, который не умел сглаживать текст по вертикали.
    Ответ написан
    Комментировать
    Комментировать

  • Как убрать перенос корейских и японских иероглифов?

    AngReload
    @AngReload
    Кратко о себе
    CSS-свойство word-break меняет определение того, что считать словом. Значение break-all по сути воспринимает любой текст как восточноазиатский, который может переноситься практически где угодно (кроме точек в конце предложений и закрывающих скобок). Значение keep-all, наоборот, воспринимает восточноазиатские иероглифы как буквы в слове, а не как целые слова.
    p {
  word-break: keep-all;
}

    Рекомендую чтение css-live.ru/articles/gde-vsyo-slozhno-s-perenosami...
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать анимацию фонового градиента, которая не грузит CPU?

    AngReload
    @AngReload
    Кратко о себе
    Используйте animation-timing-function: steps вместо linear, ведь анимация очень плавная, можно и уменьшить частоту кадров.

    $animation-steps: 100;
    codepen.io/anon/pen/BKoqpm?editors=1100
    Ответ написан
    1 комментарий
    1 комментарий

  • Как убрать отступ-пробел перед шапкой?

    AngReload
    @AngReload
    Кратко о себе
    В инспекторе текст перед шапкой, в начале body:
    61963bcb61ed4c90a540d72865b2dc23.png
    Ответ написан
    2 комментария
    2 комментария