Задать вопрос
Ответы пользователя по тегу CSS
  • Как инвертировать скролл по колесу мыши?

    scoffs
    @scoffs
    Fullstack | C# | Student
    Не это?
    try {
     window.addEventListener("wheel", function(event) {
        if (event.deltaX !== 0) {
            event.preventDefault();
            window.scrollBy(event.deltaX, -event.deltaY);
        }
    });
    }
    catch(e) {
      console.error(e);
    }
    Ответ написан
    Комментировать
  • Как прекрипить футер к самому нижу?

    scoffs
    @scoffs
    Fullstack | C# | Student
    Прежде всего хочу сказать, что в вашем коде есть намёк на БЕМ и вы даже используете SCSS, но при этом вы вообще не используете переиспользование БЭМ-классов. Почитайте, пожалуйста, об этой методологии и избавьтесь от каши в стилях.

    Ответ на ваш вопрос:
    https://dimox.name/press_footer_bottom_with_css/

    <body>
      <header>
        <!-- Ваш хедер -->
      </header>
    
      <main>
        <!-- Основной контент страницы -->
      </main>
    
      <footer>
        <!-- Ваш футер -->
      </footer>
    </body>

    *, *::before, *::after { 
      margin: 0;
      padding: 0;
    }
    html {
      height: 100%;
    }
    
    body {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    
    body {
      flex: 1; /* Расширяет основной контент на все доступное пространство */
    }
    
    header, footer {
      flex-shrink: 0; /* Предотвращает сжатие хедера и футера */
    }
    Ответ написан
  • Можно ли на чистом CSS показывать tooltip, только если текст не умещается в блоке?

    scoffs
    @scoffs
    Fullstack | C# | Student
    На чистом CSS нет, тут можно сделать с помощью JS

    const block = document.getElementById('your-block-id'); // Замените 'your-block-id' на актуальный идентификатор вашего блока
    
    if (block.scrollWidth > block.offsetWidth) {
      // Текст обрезается и появляется троеточие
      // В этом случае вы можете добавить обработчик события наведения мыши, чтобы показать тултип
      block.addEventListener('mouseenter', showTooltip);
      block.addEventListener('mouseleave', hideTooltip);
    } else {
      // Текст полностью умещается в блоке
      // В этом случае вы можете удалить обработчики событий или не отображать тултип вообще
      block.removeEventListener('mouseenter', showTooltip);
      block.removeEventListener('mouseleave', hideTooltip);
    }
    
    function showTooltip() {
      // Код для показа тултипа
    }
    
    function hideTooltip() {
      // Код для скрытия тултипа
    }
    Ответ написан
    Комментировать
  • Почему не применяются стили для псевдоэлемента?

    scoffs
    @scoffs
    Fullstack | C# | Student
    Как минимум к псевдоэлементам обращаются через ::
    Т.е. не :after, а ::after

    upd: хотя работать по сути должны оба способа
    upd 2: тень есть
    Для проверки меняем непрозрачность и всё
    box-shadow: 0px 4px 19px rgba(0, 0, 0, 1);
    Что не так с цветом?
    Ответ написан
    Комментировать
  • Как сделать "квадраты" одного размера?

    scoffs
    @scoffs
    Fullstack | C# | Student
    Одно из возможных решений заменить grid на flex:
    .services-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: stretch;
    }

    Удалите свойство grid-template-columns из .services-content.
    Ответ написан
    Комментировать
  • Font-dislay: swap. Как избежать смещение макета?

    scoffs
    @scoffs
    Fullstack | C# | Student
    Одним из возможных решений этой проблемы может быть использование опции font-display: optional вместо swap для пользовательского шрифта. Это позволит браузеру применять масштабирование шрифта сразу после его загрузки, даже если он еще не полностью загружен.

    Вот пример кода:
    @font-face {
        font-family: 'Roboto Condensed';
        font-style: normal;
        font-weight: 400;
        font-display: optional;
        src: url(fonts/roboto_condensed/RobotoCondensed-Regular.ttf) format('truetype')
    }


    Также убедитесь, что шрифт Adjusted Arial доступен на устройствах, на которых отображается ваш сайт, и что он правильно загружается.

    Однако имейте в виду, что изменение font-display может повлиять на воспринимаемую производительность сайта, поскольку оно может вызвать "сдвиг" текста после полной загрузки шрифта
    Ответ написан
    Комментировать
  • Почему не отображается checkbox при клике на него, React?

    scoffs
    @scoffs
    Fullstack | C# | Student
    Возможно надо что-то типа этого:
    export default function CheckBox() {
        const [isChecked, setIsChecked] = useState(false);
    
        const handleChange = () => {
            setIsChecked(!isChecked);
        };
    
        return (
            <div className='todo-item__container-field'>
                <input
                    className='todo-item__checkbox'
                    type='checkbox'
                    name='checkbox'
                    checked={isChecked}
                    onChange={handleChange}
                />
                <span className='todo-item__span'></span>
            </div>
        );
    }


    Залил бы в песочницу, чтобы самому можно было потыкать и подебажить
    Ответ написан
    Комментировать
  • Как верстать такие блоки?

    scoffs
    @scoffs
    Fullstack | C# | Student
    На первых двух скринах подойдет displey: flex
    На третьем было бы неплохо увидеть полный скрин, в теории там просто текст по центру, а названия планет через positio: absolute
    Ответ написан
    Комментировать
  • Как сделать бесконечный фон сайта с одной стороны?

    scoffs
    @scoffs
    Fullstack | C# | Student
    В теории это какой-то дополнительный блок или псевдоэлемент, на который наложена маска (можно через clip-path)
    Ответ написан
    Комментировать
  • Как правильно расположить элементы через стили?

    scoffs
    @scoffs
    Fullstack | C# | Student
    Тебе не что-то типа этого надо?
    <div class="parent-span">
      <span class="child-span">Дочерний span</span>
      Родительский span
    </div>

    .parent-span {
      display: flex;
      justify-content: center;
    }
    
    .child-span {
      align-self: flex-start;
    }
    Ответ написан
    Комментировать