Вопросы с меткой [css]
CSS, или каскадные таблицы стилей, — формальный язык описания внешнего вида документа, язык стилей, определяющий отображение HTML-документов.
28,405
вопросов
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=&...
1
голос
1
ответ
24
показа
Картинка заслоняет уголки у блока
Сделал у текстового блока уголки с помощью двух прямоугольников псевдоклассов
При изменении z-index у изображения оно начинает закрывать уголки
Код:
*{
margin: 0;
padding: 0;
}
:root{
...
0
голосов
1
ответ
30
показов
Блоки одной высоты
Задача заключается в том, чтобы сделать блоки с рамкой одинаковой высоты в независимости от содержимого. Сейчас это все держится на min-height, но это не то что нужно(
.about-main-title {
span {...
0
голосов
0
ответов
13
показов
Font-dislay: swap и смещение макета
Проблема заключается в следующем.
Задал подключение пользовательского шрифта и свойство font-display: swap
@font-face {
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 400;
font-...
1
голос
1
ответ
28
показов
Почему псевдо элемент(.todo-item__span::after) появляется не по середине?
Проблема заключается в том что при клике на .todo-item__span::before элемент .todo-item__span::after появляется в нижнем правом углу, а должен по середине.
.todo-item__container-field {
...
0
голосов
1
ответ
33
показа
Как добавить header когда страница скролится вверх?
Как сделать так что-бы когда скроллим страницу хедер пропадает. Но если он проскролить вверх , хедер снова появляется на любом участке. Спасибо
addWindowScrollEvent = true;
const header = ...
1
голос
1
ответ
19
показов
Как добавить класс другому блоку в зависимости от слайда swiper.js?
Я использую для слайдера библиотеку swiper.js. Мне необходимо в зависимости от текущего слайда, добавлять класс для header, для того, чтобы текст в нем был другого цвета. Желательно решение на js.
0
голосов
0
ответов
17
показов
Переключение слайдов в swiper slider
На данный момент когда я в thumbs переключаю слайды, то активный слайд сразу передвигает контейнер, а не идет к нижнему слайду. Сейчас все наглядно покажу. Сейчас у меня вот так
а надо при нажатии на ...
0
голосов
0
ответов
24
показа
Анимация svg элемента (движущийся пар над стаканчиком кофе)
Как сделать анимацию движения паров над стаканчиком? Чтобы все три волны двигались одинаково синусоидально(как змея), но при этом были статичны(неподвижны). Я пробовал SVGator , SVG Artista , svg path,...
0
голосов
0
ответов
15
показов
Tooltip съезжают при скролле
У меня на странице элементы(tooltip) который при наведение должны отображать информацию, но почему-то они сьезжают
Как это можно исправить?
const QuestiontooltipRed = document.querySelector('....
1
голос
0
ответов
22
показа
Почему не отображается checkbox при клике?
Почему не отображается checkbox при клике на него ?
Код отвечающий за checkbox:
<div className="todo-item__container-field">
<Input type='checkbox' name='...
0
голосов
0
ответов
16
показов
Как правильно обеспечить работу Z-index между страницей и iframe?
На сайте есть окно(div), оно должно быть поверх iframe блока, но внутри iframe тоже есть окна, некоторые из которых должны быть поверх этого первого окна.
Как правильно это реализовать, чтобы ...
1
голос
1
ответ
25
показов
Почему при нажатии на popup он закрывается?
Открытие popup происходит хорошо, но когда я нажимаю на содержимое popup например на один из input то он сразу закрывается, как я это могу решить?
const openButtonProduct = document....
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 ...
0
голосов
1
ответ
25
показов
Подскажите в чем проблема. Ошибка ERR_FILE_NOT_FOUND при появлении картинки в окне
При нажатии на галерею изображений, должно всплывать фото в отдельном окне , но почему то при нажатии происходит ошибка ERR_FILE_NOT_FOUND
<div class="container-gallery">
<...
0
голосов
0
ответов
15
показов
Как стилизовать яндекс карту?
Подскажите возможно ли так стилизовать яндекс карту? или какие-то стили сделать будет невозможно? api читал, но карты так некогда не стилизовал, только базово(поменять цвет, иконку и тд)
https://i....
0
голосов
1
ответ
32
показа
Как растянуть input на всю ширину родителя?
Есть у меня форма и wrapper.
Даю wrapper-у display:flex;
Даю form-е max-width: 480px;
и input-ам даю width:100% но инпуты не растягивается на всю ширину.
<div>
<form>
<input type=&...
0
голосов
1
ответ
8
показов
SASS не работает один класс
Делаю сайт, в header есть вот такой текст, разбитый на два класса main и secondary.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
&...
0
голосов
2
ответа
19
показов
Как сделать одинаковую высоту слайдов в Slick Slider
Всем привет! Я попробовал уже много способов решения этой проблемы, но так и не смог решить её.
Мне необходимо, чтобы высота слайдов в slick slider была одинаковой и соответственно зависела от высоты ...
-3
голоса
1
ответ
48
показов
Анимация плавного появления при скролле
Как сделать такую анимацию чтобы при скролле вниз она плавно появлялась, а при скролле верх она плавно исчезала.
Пример:
0
голосов
2
ответа
44
показа
Как зафиксировать объекты при масштабировании
Кусочек кода HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ...
0
голосов
1
ответ
21
показ
Как сделать рамку так чтобы одна часть была над другим элементом а другая под другим элементом?
Всем привет. Помогите пожалуйста сделать рамки как на картинке, так чтобы одна часть была над другим элементом а другая под другим элементом ?
0
голосов
0
ответов
36
показов
Как изменить код, чтобы на клике кнопки "Так" в модальном окне добавлялся товар, по которому сделан клик?
Учусь React, помогите пожалуйста
class App extends Component {
state = {
data: [],
cards: [],
carts: [],
favoriteCards: [],
isModalOpen: false,
...
0
голосов
0
ответов
28
показов
Как сделать календарь?
Подскажите пожалуйста как сделать в календаре дату по месяцам правильно? у меня сейчас до 32 числа почему-то выдает. Но число в input выводится правильно. Спасибо
const calendar = document....
0
голосов
1
ответ
30
показов
Как сделать чтобы блок скролился мышкой в overflow-hidden
Возникла проблема. Не пойму как сделать, чтобы блок скролился внутри блока с overflow:hidden. Я нашел решение на реагирование с колесиком мышки, но как сделать, чтобы реагировало на перетаскивание ...
0
голосов
1
ответ
23
показа
Как сделать, чтобы контейнер было видно только внутри карточек
Есть контейнер, внутри (или поверх) которого располагаются карточки.
Вопрос в том как сделать так, чтобы пространство между карточками было белым (или просто не отображался контейнер) а внутри самих ...
0
голосов
1
ответ
21
показ
Как сделать счетчик ввода значений?
Подскажите пожалуйста как реализовать счетчик значений как на фото https://i.stack.imgur.com/nZiNw.png . Получается что в input можно писать только 1 цифру, и инпуты как-бы открываются по очереди ...
0
голосов
0
ответов
26
показов
progress steps bar
Необходимо сделать прогресс бар по шагам. + на каждый ваш появляется блок и информацией.
Не могу ничего толком найти и не получается сделать
0
голосов
0
ответов
24
показа
Слайдер с анимацией отступа между элементами
возникла проблема с анимированием слайдера. На скриншотах принципе весь процесс виден. При скролле слайдера, должен появляться отступ между элементами, как гармошка, Используется библиотека (на данный ...
-1
голос
1
ответ
41
показ
Анимация текста как у Spotify
Подскажите, как сделать такую анимацию?
0
голосов
1
ответ
39
показов
Высота ребенка по всю высоту скролла родителя + абсолютный блок
Если внутри скролла есть элемент с абсолютной позиций (.absolute), он расширяет высоту скролла переполненного родителя (.overflow), но контент (.content) при этом не расширяется, как сделать что-бы ...
-1
голос
0
ответов
36
показов
Активный меню ul li по центру
Как сделать активный меню по центру, в мобильной версии, активный меню отображается вне экрана
можно сделать так, чтоб активный отображался по центру
.sub-categories {
display: -webkit-box;
...
0
голосов
1
ответ
8
показов
Карточки слайдера slick
Такая проблема, верстаю карусель из карточек, используя slick. Сам слайдер работает, но я хочу, чтобы карточки меняли резиново свои размеры (ширина, высота, font-size)
Подскажите, как правильно это ...
0
голосов
1
ответ
26
показов
CSS проблемы с ::before
на оригинальном сайте, при наведении на ссылку в меню, появляется зеленая полоса, индивидуальная для каждого элемента списка. Я скопировал оттуда стили, но у меня полоса сплошная на весь родительский ...
1
голос
0
ответов
51
показ
Выровнять элементы
Всё никак не могу выровнять элементы, при одних размерах внутренних элементов кажется, что все отлично, но когда добавляю больше содержимого, то некоторые псевдоэлементы перестают стыковаться и всё ...
0
голосов
0
ответов
30
показов
Как разместить или нарисовать эту линию на сайте?
В макете была эта черная линия,что на заднем плане,но я не знаю как ее разместить,буду благодарен за помощь (P.s эта линия обведена на скрине синим бордером)
0
голосов
0
ответов
18
показов
Как обратиться через один объект к другому? Кнопка крестик для закрытия формы
Верстаю сайт на 1c-umi, функционал очень ограничен. Мне доступен только css файл и то, не в полном виде. Костылями пытаюсь сделать кнопку закрытия формы обратной связи.
Проблема в том, что не ...
1
голос
0
ответов
22
показа
Как отцентровать блоки в последней строке грида, при условии, что блок динамичный и количество элементов может меняться?
Как отцентровать блоки в последней строке грида, при условии, что блок динамичный и количество элементов может меняться?
Собственно, интересует, есть ли вообще такое решение у грида, не рассматривая ...
0
голосов
1
ответ
36
показов
Как работает градиентый текст в данном случае?
Объясните, пожалуйста как работает градиентный текст?
background: var(--third-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
Что записывается в background? ...
0
голосов
1
ответ
31
показ
Почему не получается прижать грид элемент полностью к верху?
Есть вот такой блок нужно чтоб кнопки переключение слайдов прижимались к верху прописываю им align-self: start; они все ровно не становятся в самый верх когда вместо start ставлю end все роботает как ...
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
...
0
голосов
1
ответ
26
показов
Почему мой фон отображается только на одной части сайта
У меня есть часть кода в css и html:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
font-family: 'Oswald', sans-serif;
}
::selection {
...
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....
0
голосов
1
ответ
29
показов
Как изменить модульное окно, чтобы оно открывалось в этой же вкладке (css+html)
Модульное окно в той же вкладке не открывается по кнопке. Чтобы его открыть нужно нажать на правую кнопку мыши, потом выбрать "открыть в новой вкладке" перейти на эту новую вкладку и только ...
0
голосов
0
ответов
34
показа
Как вынести выпадающее меню из overflow: auto?
Есть меню, при переполнение меню, оно уходит вправо и появляется скролл(написанный на js), при клике на меню со стрелочкой выпадает список, но когда появляется скролл список не открывается. Подскажите ...
4
голоса
2
ответа
42
показа
Как убрать границы у блоков с определённых сторон?
Как убрать границу в некоторых местах? В местах скругления границы расходятся:
Также нужно продлить верхнюю границу первого элемента:
.company-items {
margin: 0 100px;
}
.company-items-...
1
голос
1
ответ
32
показа
Как выровнять кнопки CSS?
Не могу понять, как в моём случае сделать кнопки на одном уровне.
Перепробовал много вариантов, но кнопки так и не выровнялись.
.package-items {
margin-left: 40px;
margin-right: 40px;
}
....
0
голосов
1
ответ
27
показов
Navbar не растягивается всю ширину экрана
При вёрстке navbar'a столкнулся с проблемой, что он не растягивается во всю ширину экрана.
<style>
.navbar {
overflow: hidden;
background-color: #6A6666;
position: ...
0
голосов
3
ответа
37
показов
Почему появляется вертикальный скролл?
Объясните пожалуйста почему появляется вертикальный скролл и как избавиться от него ?
HTML:
* {
margin: 0px;
padding: 0px;
}
a {
text-decoration: none;
}
html {
width: 100%;
...
0
голосов
1
ответ
16
показов
Не работает SlickSlider в Chrome
Суть проблемы. Если запускаю сайт "Go Live" через VSCode, то всё отлично работает. Но если открываю сам файл index.html из папки, то слайдер перестаёт работать. В чём может быть проблема??