Вопросы с меткой [css]

CSS, или каскадные таблицы стилей, — формальный язык описания внешнего вида документа, язык стилей, определяющий отображение HTML-документов.

Фильтрация
Сортировка
Метки
0 голосов
0 ответов
21 показ

как сделать плавное открытие и закрытие модалки?

HTML <div class="add-task-btn" onclick="showModal('add-task-form')"> <img src="./img/icons/plus.png" alt="add" /> </div> <div class=&...
Dias's user avatar
  • 45
1 голос
1 ответ
24 показа

Картинка заслоняет уголки у блока

Сделал у текстового блока уголки с помощью двух прямоугольников псевдоклассов При изменении z-index у изображения оно начинает закрывать уголки Код: *{ margin: 0; padding: 0; } :root{ ...
Dmitry's user avatar
  • 107
0 голосов
1 ответ
30 показов

Блоки одной высоты

Задача заключается в том, чтобы сделать блоки с рамкой одинаковой высоты в независимости от содержимого. Сейчас это все держится на min-height, но это не то что нужно( .about-main-title { span {...
Denis's user avatar
  • 77
0 голосов
0 ответов
13 показов

Font-dislay: swap и смещение макета

Проблема заключается в следующем. Задал подключение пользовательского шрифта и свойство font-display: swap @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; font-...
alexsun7's user avatar
1 голос
1 ответ
28 показов

Почему псевдо элемент(.todo-item__span::after) появляется не по середине?

Проблема заключается в том что при клике на .todo-item__span::before элемент .todo-item__span::after появляется в нижнем правом углу, а должен по середине. .todo-item__container-field { ...
NANO_996's user avatar
  • 201
0 голосов
1 ответ
33 показа

Как добавить header когда страница скролится вверх?

Как сделать так что-бы когда скроллим страницу хедер пропадает. Но если он проскролить вверх , хедер снова появляется на любом участке. Спасибо addWindowScrollEvent = true; const header = ...
powerg's user avatar
  • 79
1 голос
1 ответ
19 показов

Как добавить класс другому блоку в зависимости от слайда swiper.js?

Я использую для слайдера библиотеку swiper.js. Мне необходимо в зависимости от текущего слайда, добавлять класс для header, для того, чтобы текст в нем был другого цвета. Желательно решение на js.
niskofly's user avatar
0 голосов
0 ответов
17 показов

Переключение слайдов в swiper slider

На данный момент когда я в thumbs переключаю слайды, то активный слайд сразу передвигает контейнер, а не идет к нижнему слайду. Сейчас все наглядно покажу. Сейчас у меня вот так а надо при нажатии на ...
Moty's user avatar
  • 11
0 голосов
0 ответов
24 показа

Анимация svg элемента (движущийся пар над стаканчиком кофе)

Как сделать анимацию движения паров над стаканчиком? Чтобы все три волны двигались одинаково синусоидально(как змея), но при этом были статичны(неподвижны). Я пробовал SVGator , SVG Artista , svg path,...
Rusnus's user avatar
  • 1
0 голосов
0 ответов
15 показов

Tooltip съезжают при скролле

У меня на странице элементы(tooltip) который при наведение должны отображать информацию, но почему-то они сьезжают Как это можно исправить? const QuestiontooltipRed = document.querySelector('....
Moty's user avatar
  • 11
1 голос
0 ответов
22 показа

Почему не отображается checkbox при клике?

Почему не отображается checkbox при клике на него ? Код отвечающий за checkbox: <div className="todo-item__container-field"> <Input type='checkbox' name='...
NANO_996's user avatar
  • 201
0 голосов
0 ответов
16 показов

Как правильно обеспечить работу Z-index между страницей и iframe?

На сайте есть окно(div), оно должно быть поверх iframe блока, но внутри iframe тоже есть окна, некоторые из которых должны быть поверх этого первого окна. Как правильно это реализовать, чтобы ...
manking's user avatar
  • 6,331
1 голос
1 ответ
25 показов

Почему при нажатии на popup он закрывается?

Открытие popup происходит хорошо, но когда я нажимаю на содержимое popup например на один из input то он сразу закрывается, как я это могу решить? const openButtonProduct = document....
Moty's user avatar
  • 11
0 голосов
0 ответов
32 показа

Как плавно заполнить background у div-а?

Есть блок, который на странице выглядит так: Html выглядит так: <div class="relative rounded-full rating_border overflow-hidden h-9 bg-grey-100 mb-3"> <div class="bg-primary ...
F. Tomas's user avatar
  • 743
0 голосов
1 ответ
25 показов

Подскажите в чем проблема. Ошибка ERR_FILE_NOT_FOUND при появлении картинки в окне

При нажатии на галерею изображений, должно всплывать фото в отдельном окне , но почему то при нажатии происходит ошибка ERR_FILE_NOT_FOUND <div class="container-gallery"> <...
imo717's user avatar
  • 21
0 голосов
0 ответов
15 показов

Как стилизовать яндекс карту?

Подскажите возможно ли так стилизовать яндекс карту? или какие-то стили сделать будет невозможно? api читал, но карты так некогда не стилизовал, только базово(поменять цвет, иконку и тд) https://i....
powerg's user avatar
  • 79
0 голосов
1 ответ
32 показа

Как растянуть input на всю ширину родителя?

Есть у меня форма и wrapper. Даю wrapper-у display:flex; Даю form-е max-width: 480px; и input-ам даю width:100% но инпуты не растягивается на всю ширину. <div> <form> <input type=&...
Dias's user avatar
  • 45
0 голосов
1 ответ
8 показов

SASS не работает один класс

Делаю сайт, в header есть вот такой текст, разбитый на два класса main и secondary. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &...
Илья's user avatar
0 голосов
2 ответа
19 показов

Как сделать одинаковую высоту слайдов в Slick Slider

Всем привет! Я попробовал уже много способов решения этой проблемы, но так и не смог решить её. Мне необходимо, чтобы высота слайдов в slick slider была одинаковой и соответственно зависела от высоты ...
Arseniy's user avatar
  • 57
-3 голоса
1 ответ
48 показов

Анимация плавного появления при скролле

Как сделать такую анимацию чтобы при скролле вниз она плавно появлялась, а при скролле верх она плавно исчезала. Пример:
whoismatvei's user avatar
0 голосов
2 ответа
44 показа

Как зафиксировать объекты при масштабировании

Кусочек кода HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
Minimus's user avatar
0 голосов
1 ответ
21 показ

Как сделать рамку так чтобы одна часть была над другим элементом а другая под другим элементом?

Всем привет. Помогите пожалуйста сделать рамки как на картинке, так чтобы одна часть была над другим элементом а другая под другим элементом ?
Ahmed_08's user avatar
0 голосов
0 ответов
36 показов

Как изменить код, чтобы на клике кнопки "Так" в модальном окне добавлялся товар, по которому сделан клик?

Учусь React, помогите пожалуйста class App extends Component { state = { data: [], cards: [], carts: [], favoriteCards: [], isModalOpen: false, ...
Stud's user avatar
  • 61
0 голосов
0 ответов
28 показов

Как сделать календарь?

Подскажите пожалуйста как сделать в календаре дату по месяцам правильно? у меня сейчас до 32 числа почему-то выдает. Но число в input выводится правильно. Спасибо const calendar = document....
powerg's user avatar
  • 79
0 голосов
1 ответ
30 показов

Как сделать чтобы блок скролился мышкой в overflow-hidden

Возникла проблема. Не пойму как сделать, чтобы блок скролился внутри блока с overflow:hidden. Я нашел решение на реагирование с колесиком мышки, но как сделать, чтобы реагировало на перетаскивание ...
Pavel 's user avatar
  • 189
0 голосов
1 ответ
23 показа

Как сделать, чтобы контейнер было видно только внутри карточек

Есть контейнер, внутри (или поверх) которого располагаются карточки. Вопрос в том как сделать так, чтобы пространство между карточками было белым (или просто не отображался контейнер) а внутри самих ...
Arkeviz's user avatar
0 голосов
1 ответ
21 показ

Как сделать счетчик ввода значений?

Подскажите пожалуйста как реализовать счетчик значений как на фото https://i.stack.imgur.com/nZiNw.png . Получается что в input можно писать только 1 цифру, и инпуты как-бы открываются по очереди ...
powerg's user avatar
  • 79
0 голосов
0 ответов
26 показов

progress steps bar

Необходимо сделать прогресс бар по шагам. + на каждый ваш появляется блок и информацией. Не могу ничего толком найти и не получается сделать
Владислав Кулик's user avatar
0 голосов
0 ответов
24 показа

Слайдер с анимацией отступа между элементами

возникла проблема с анимированием слайдера. На скриншотах принципе весь процесс виден. При скролле слайдера, должен появляться отступ между элементами, как гармошка, Используется библиотека (на данный ...
keltias's user avatar
-1 голос
1 ответ
41 показ

Анимация текста как у Spotify

Подскажите, как сделать такую анимацию?
whoismatvei's user avatar
0 голосов
1 ответ
39 показов

Высота ребенка по всю высоту скролла родителя + абсолютный блок

Если внутри скролла есть элемент с абсолютной позиций (.absolute), он расширяет высоту скролла переполненного родителя (.overflow), но контент (.content) при этом не расширяется, как сделать что-бы ...
Mr_Epic's user avatar
  • 1,903
-1 голос
0 ответов
36 показов

Активный меню ul li по центру

Как сделать активный меню по центру, в мобильной версии, активный меню отображается вне экрана можно сделать так, чтоб активный отображался по центру .sub-categories { display: -webkit-box; ...
mat's user avatar
  • 103
0 голосов
1 ответ
8 показов

Карточки слайдера slick

Такая проблема, верстаю карусель из карточек, используя slick. Сам слайдер работает, но я хочу, чтобы карточки меняли резиново свои размеры (ширина, высота, font-size) Подскажите, как правильно это ...
Egor's user avatar
  • 1
0 голосов
1 ответ
26 показов

CSS проблемы с ::before

на оригинальном сайте, при наведении на ссылку в меню, появляется зеленая полоса, индивидуальная для каждого элемента списка. Я скопировал оттуда стили, но у меня полоса сплошная на весь родительский ...
Tutti Frutti's user avatar
1 голос
0 ответов
51 показ

Выровнять элементы

Всё никак не могу выровнять элементы, при одних размерах внутренних элементов кажется, что все отлично, но когда добавляю больше содержимого, то некоторые псевдоэлементы перестают стыковаться и всё ...
Denis's user avatar
  • 77
0 голосов
0 ответов
30 показов

Как разместить или нарисовать эту линию на сайте?

В макете была эта черная линия,что на заднем плане,но я не знаю как ее разместить,буду благодарен за помощь (P.s эта линия обведена на скрине синим бордером)
Sywuxy's user avatar
  • 19
0 голосов
0 ответов
18 показов

Как обратиться через один объект к другому? Кнопка крестик для закрытия формы

Верстаю сайт на 1c-umi, функционал очень ограничен. Мне доступен только css файл и то, не в полном виде. Костылями пытаюсь сделать кнопку закрытия формы обратной связи. Проблема в том, что не ...
MARK inc.'s user avatar
1 голос
0 ответов
22 показа

Как отцентровать блоки в последней строке грида, при условии, что блок динамичный и количество элементов может меняться?

Как отцентровать блоки в последней строке грида, при условии, что блок динамичный и количество элементов может меняться? Собственно, интересует, есть ли вообще такое решение у грида, не рассматривая ...
Александра Иванова's user avatar
0 голосов
1 ответ
36 показов

Как работает градиентый текст в данном случае?

Объясните, пожалуйста как работает градиентный текст? background: var(--third-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; Что записывается в background? ...
mindcontrol's user avatar
0 голосов
1 ответ
31 показ

Почему не получается прижать грид элемент полностью к верху?

Есть вот такой блок нужно чтоб кнопки переключение слайдов прижимались к верху прописываю им align-self: start; они все ровно не становятся в самый верх когда вместо start ставлю end все роботает как ...
Женя's user avatar
2 голоса
1 ответ
32 показа

У h1 появляется margin после подключения normalize, но я сбрасывала отступы с помощью *

В css пишу *{ box-sizing: border-box; margin: 0; padding: 0; } Подключаю normalize.css и из него у h1 появляется margin: 0.67em 0px; А по макету мне нужен только margin-top: 53px ...
Рита's user avatar
0 голосов
1 ответ
26 показов

Почему мой фон отображается только на одной части сайта

У меня есть часть кода в css и html: * { padding: 0; margin: 0; box-sizing: border-box; scroll-behavior: smooth; } body { font-family: 'Oswald', sans-serif; } ::selection { ...
Issa's user avatar
  • 1
0 голосов
1 ответ
44 показа

Почему-то перестало работать подчеркивание + счетчик

Html/Css/Js код : let inputData = document.querySelector('#inputTask'); let btnAddTask = document.querySelector('#btn-add'); let ulList = document.querySelector('#list'); let spans = document....
данила неймарк's user avatar
0 голосов
1 ответ
29 показов

Как изменить модульное окно, чтобы оно открывалось в этой же вкладке (css+html)

Модульное окно в той же вкладке не открывается по кнопке. Чтобы его открыть нужно нажать на правую кнопку мыши, потом выбрать "открыть в новой вкладке" перейти на эту новую вкладку и только ...
Анастасия Полозова's user avatar
0 голосов
0 ответов
34 показа

Как вынести выпадающее меню из overflow: auto?

Есть меню, при переполнение меню, оно уходит вправо и появляется скролл(написанный на js), при клике на меню со стрелочкой выпадает список, но когда появляется скролл список не открывается. Подскажите ...
powerg's user avatar
  • 79
4 голоса
2 ответа
42 показа

Как убрать границы у блоков с определённых сторон?

Как убрать границу в некоторых местах? В местах скругления границы расходятся: Также нужно продлить верхнюю границу первого элемента: .company-items { margin: 0 100px; } .company-items-...
Denis's user avatar
  • 77
1 голос
1 ответ
32 показа

Как выровнять кнопки CSS?

Не могу понять, как в моём случае сделать кнопки на одном уровне. Перепробовал много вариантов, но кнопки так и не выровнялись. .package-items { margin-left: 40px; margin-right: 40px; } ....
Denis's user avatar
  • 77
0 голосов
1 ответ
27 показов

Navbar не растягивается всю ширину экрана

При вёрстке navbar'a столкнулся с проблемой, что он не растягивается во всю ширину экрана. <style> .navbar { overflow: hidden; background-color: #6A6666; position: ...
Beirym's user avatar
  • 74
0 голосов
3 ответа
37 показов

Почему появляется вертикальный скролл?

Объясните пожалуйста почему появляется вертикальный скролл и как избавиться от него ? HTML: * { margin: 0px; padding: 0px; } a { text-decoration: none; } html { width: 100%; ...
denikotin's user avatar
0 голосов
1 ответ
16 показов

Не работает SlickSlider в Chrome

Суть проблемы. Если запускаю сайт "Go Live" через VSCode, то всё отлично работает. Но если открываю сам файл index.html из папки, то слайдер перестаёт работать. В чём может быть проблема??
Владислав Кулик's user avatar