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

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

Фильтрация
Сортировка
Метки
53 голоса
9 ответов
57k показов

Как прижать footer к низу экрана?

Есть основной блок <div class="container"></div> с контентом различной высоты, а под ним размещён футер. Если контент не достигает всей высоты экрана, нужно чтобы минимальная ...
Escobar's user avatar
  • 717
10 голосов
1 ответ
8k показов

Что делать, если не работает CSS-класс?

Я пишу css-правило .nav-users { color: red; } но на странице ничего не меняется: цвет остаётся серым.
Qwertiy's user avatar
  • 121k
13 голосов
10 ответов
5k показов

Книги и учебные материалы по HTML и CSS, а также инструменты вёрстки [дубликат]

Хочу начать изучение HTML и CSS. В интернете находил много сайтов и книг, глаза разбегаются и не знаю что выбрать. Поэтому, прошу посоветовать, с какой книги или сайта лучше всего стоит начать изучать ...
ArniLand's user avatar
  • 1,089
13 голосов
4 ответа
5k показов

Как прижать блоки друг к другу display: inline-block?

Как прижать блоки друг к другу, убрать отступы между элементами со свойством display: inline-block? ul { text-align: center; } li { list-style: none; display: inline-block; border:...
ОнотолЕ's user avatar
25 голосов
2 ответа
3k показов

Как взаимодействуют между собой viewport и viewBox

Этот вопрос вызван следующей важной темой, затронутой в хорошем вопросе почти полгода назад. Рисует ли браузер то, что находится за областью видимости SVG холста? Взаимодействие между собой viewport ...
Alexandr_TT's user avatar
8 голосов
2 ответа
2k показов

Практические примеры применения масок svg

Прочитал эти статьи по теории масок, но не уверен, что понял всё правильно https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask http://css.yoksel.ru/svg-masks/ Вот пример по маскам, ...
Alexandr_TT's user avatar
14 голосов
4 ответа
20k показов

Отступы между инлайновыми элементами [дубликат]

Откуда берутся отступы между элементами с display: inline-block; и как их убрать? Отступы нигде не фиксируются:
Philin's user avatar
  • 451
26 голосов
1 ответ
4k показов

Круговой процентный прогресс бар

Мне хотелось бы иметь круговой процентный показатель на моем сайте: В этом случае, см. рисунок, он показывает 75%. Как это может быть сделано? У меня есть желтый круг в image-file, но может быть ...
Alexandr_TT's user avatar
10 голосов
1 ответ
5k показов

Книги и учебные ресурсы по HTML и CSS

Рекомендуемая литература, документация, учебные ресурсы по HTML и CSS Формат: Имя Фамилия — «Название книги целиком и полностью», ГГГГ г.. Формат для переведенной литературы: Имя Фамилия (Name ...
user avatar
5 голосов
2 ответа
1k показов

Помогите с dasharray и dashoffset

Никак не могу понять как правильно выставить stroke-dasharray и stroke-dashoffset. у меня результат на картинке сверху, снизу показано как нужно, и различия наложения( позиция чуть не та (нужно больше ...
ПрогоЦып's user avatar
67 голосов
18 ответов
7k показов

Анимация новогодней ёлочки

Наступает Новый год! Хорошо бы поднять настроение себе и другим. Копировать и рассылать открыточки с красивыми картинками и гифками, скаченными из сети, уже как-то не интересно. Хочется чего-то ...
Alexandr_TT's user avatar
14 голосов
1 ответ
15k показов

Разделение списка на несколько колонок

Имеется список, пункты которого должны следовать друг за другом по вертикали, а по достижении нижней границы родителя с фиксированной высотой - переноситься в новую колонку. Реализация с помощью ...
Игорь's user avatar
  • 1,026
12 голосов
1 ответ
2k показов

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

Какую посоветуете программу для SVG? Желательно с "генерацией кода" HTML, если есть такое. Update Автор вопроса видимо имел ввиду программы для помощи в написании кода svg
De.Minov's user avatar
  • 22.9k
3 голоса
2 ответа
2k показов

Неправильное отображение текста в блоке div

Нужно чтобы текст, находящийся в блоке div, переносился на новую строку, а не вылезал за пределы блока (именно переносился - overflow:hidden неподойдет), и вообще, почему могла возникнуть такая ...
Диман's user avatar
12 голосов
5 ответов
75k показов

Стилизация <select> и <option>

Как стилизовать выпадающий список? .select { background: url(images/select.png) no-repeat transparent; background-position: 95% 50%; border-radius: 5px; margin-right: 2%; margin-bottom: 20px;...
dariashka's user avatar
  • 199
7 голосов
2 ответа
21k показов

Как правильно парсить с помощью AngleSharp?

Всем привет! Много тем уже перечитал похожих, но в них в основном какие-то частности спрашивались. Очень согласен вот с этими словами. Ну, честно говоря, вообще ничего непонятно. Понял, что информация ...
Alexey  Trushin's user avatar
7 голосов
3 ответа
7k показов

Как в placeholder вставить * красного цвета?

<input type="text" id="reviews_nm" class="input_field" placeholder="Ваше имя*" name="name"> Чтобы знак * был красного цвета?
mace's user avatar
  • 177
2 голоса
4 ответа
72k показов

Очистка текстового поля ввода при нажатии кнопки

Есть input type="text" и button. Нужно, чтобы при нажатии button, поле input type="text" очищалось. <input type="text" id="text1"> <button id="btn"></button>
A.Hall's user avatar
  • 843
29 голосов
10 ответов
242k показов

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

Как сделать так, чтобы при наведении на один элемент (hover) менять стили другого элемента? Можно ли это сделать только на css? К примеру: навожу на блок и хочу чтобы все заголовки в этом блоке стали ...
butteff's user avatar
  • 1,717
13 голосов
4 ответа
3k показов

Как сверстать круг, разделенный на цвета

Нужен наиболее верный способ. Можно для примера разделить круг на 3 сегмента.
stiv's user avatar
  • 1,708
40 голосов
7 ответов
2k показов

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

Подскажите, как сверстать такой бордер?
DDM's user avatar
  • 401
23 голоса
3 ответа
5k показов

Линия до и после текста над картинкой

Я хочу создать линию до и после центрированного заголовка. Линия и текст должны иметь прозрачный фон, чтобы иметь возможность позиционировать их на неодинаковом фоне. Строка не должна быть больше 100% ...
Alexandr_TT's user avatar
17 голосов
4 ответа
1k показов

Как вырезать два небольших сегмента из окружности и вращать их при наведении курсора

На многих сайтах стали появляться эффекты вращения окружностей с симметрично вырезанными небольшими участками. Смотрится хорошо. Как повторить данный эффект? У меня получилось вырезать один сегмент ...
Alexandr_TT's user avatar
15 голосов
4 ответа
14k показов

Селектор левых соседей

Столкнулся с проблемой: нужно разместить стиль для соседей, которые находится слева от элемента. В моём случае, нужно, чтобы ul элемент красил элемент a в красный. Вот мой html код: <ul> ...
Yuri's user avatar
  • 15.8k
11 голосов
3 ответа
26k показов

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

Исользую jquery. Мне нужно сделать, чтобы при наведении на любую ссылку в документе, отображалось бы - alert("ссылка"). Изначально, в документе, у меня уже есть одна ссылка - <a>Первая</a>....
shc345's user avatar
  • 835
3 голоса
3 ответа
982 показа

Прижать футер к низу страницы

Доброго времени суток, вопрос заезженный. В гугле есть информация , но во всех примерах нужно оборачивать ненужным div блоком. подскажите пожалуйста можно ли обойтись без него. Например есть вот такая ...
Дмитрий Бережной's user avatar
81 голос
14 ответов
4k показов

Новогодний конкурс 2020 года!

В прошлом году подобный конкурс неожиданно привлек большой интерес участников RUso. Было весело, люди хотели продолжение праздника вновь и вновь. К слову, было проведено 4 конкурса с ...
Alexandr_TT's user avatar
26 голосов
3 ответа
9k показов

Как сделать прозрачный текст?

Мне нужно чтобы была кнопка, в которой текст был как фон (т.е. просто "дырявил блок")
user avatar
13 голосов
1 ответ
911 показов

Поддержка лигатурных иконок браузерами

Наткнулся на интересную штуку - шрифт, в котором вместо иконки ты пишешь слово, а оно показывается как иконка. Не знаю, как сделано именно тут, но единственный известный мне способ сделать такое - это ...
Qwertiy's user avatar
  • 121k
6 голосов
2 ответа
5k показов

margin-top ребенка - сдвигает родителя - почему?

Вставляю блок, и даю ему margin-top: 50px - и он сдвигает родителя body в данном случае. Почему так происходит? Если же дать padding-top: - тогда ок все * { margin: 0; padding: 0; } ...
user190134's user avatar
  • 2,224
5 голосов
6 ответов
41k показов

Как сделать резиновый квадратный DIV css?

Как сделать резиновый квадратный DIV css?
blogaster's user avatar
  • 339
3 голоса
3 ответа
9k показов

Заполнить точками пустое пространство между словами

Необходимо реализовать оформление, которое выглядит как оглавление в книге: часть текста на строке прижата влево, часть - вправо, а расстояние между концом левого и началом правого заполняется точками....
lexxl's user avatar
  • 5,542
2 голоса
1 ответ
147 показов

Настройки игрового поля "Сапер"

не работает prompt() var game = { askStandartField: confirm("Стандартные настройки?"), width: 10, height: 10, mineCount: 9, standartField: (function() { if (!game.askStandartField) { ...
Fischer Benkovscki's user avatar
20 голосов
10 ответов
241k показов

Как убрать обводку при клике на input

При клике и фокусе на элементе input появляется обводка. Как её убрать?
makregistr's user avatar
  • 3,201
11 голосов
6 ответов
85k показов

Flexbox item — перенос на новую строку

Есть Flexbox сетка. .flex { display: flex; flex-wrap: wrap; border: 2px solid red; } .item { width: 50px; height: 50px; margin: 5px; border: 2px solid blue; } <div ...
Yuri's user avatar
  • 15.8k
8 голосов
5 ответов
18k показов

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

Имеется некий блок с текстом с фиксированной высотой и шириной, и значением overflow: hidden;, то есть если текст не влазит в область он обрезается, нужно добавить многоточие в конец последней видимо ...
russell's user avatar
  • 123
6 голосов
1 ответ
566 показов

Как сделать круговую диаграмму, зависимую от чекбоксов?

Нужно, что бы диаграмма заполнялась в зависимости от выбранных чекбоксов. Как это можно сделать?
Aleksandr Krais's user avatar
5 голосов
2 ответа
7k показов

Почему длинное слово выходит за границы блока?

Почему контент выходит за пределы div'a num-box ? .num-box { margin-top: 75px; position: relative; width: 80%; height: 20%; background-color: antiquewhite; } <div class="num-...
Sergey  Alekseev's user avatar
1 голос
2 ответа
248 показов

Как сверстать направленный вниз треугольный блок? [дубликат]

Подскажите пожалуйста как верстаются такие блоки?
Даша Новикова's user avatar
1 голос
4 ответа
40k показов

Как вставить иконку в input [дубликат]

Видела подобный вопрос, но ответ дали как вставить изображение. А что на счет иконки, например, с Font Awesome? Вот как здесь: http://bashooka.com/wp-content/uploads/2015/10/login-form-ui-designs-44....
Bipa's user avatar
  • 767
0 голосов
1 ответ
224 показа

document get element by id возвращает null

html <p id="encode-span">aaaaaaaaaaaa</p> js const encode = document.getElementById('encode-span').value; console.log(encode);
Agata's user avatar
  • 457
30 голосов
8 ответов
2k показов

Tooltip с вырезами у стрелки

Увидел интересную идею для Tooltip. Её отличие от других состоит в том, что боковые полосы стрелки заходят в тело образовывая две прозрачные полосы. Не могу понять, как осуществить эти вырезы. Мой ...
Yuri's user avatar
  • 15.8k
18 голосов
2 ответа
932 показа

Время окончательного применения свойств CSS

Я обнаружил, что некоторые свойства CSS (думаю, в первую очередь те, которые отвечают за позиционирование и отображение элементов) применяются с небольшой задержкой (часто способной поломать код). В ...
Adam Smith's user avatar
13 голосов
4 ответа
2k показов

Срезанные углы блока

Нужно срезать углы блока так, чтобы фон срезанных частей был прозрачным. Фон будет изображением, так что треугольники не подойдут. При этом нужно, чтобы у всего блока со срезанной частью была рамка, и ...
Telion's user avatar
  • 1,800
13 голосов
1 ответ
3k показов

Как сделать соединительную линию под наклоном между двумя точками?

Нужно сверстать соединительные линии для таких блоков адаптивно: Возможно ли в css прописать начало линии в одном relative блоке, а конец в другом? Есть ли такое решение на css или может быть svg? Js ...
kizoso's user avatar
  • 9,303
12 голосов
2 ответа
2k показов

Наложение background только на текст

Есть текст. На него надо наложить background так, чтобы он был только на тексте. То есть все, что не текст, было прозрачным. Думаю через svg сделать наложение картинки на текст, но не знаю, как ...
Nikolay's user avatar
  • 824
11 голосов
3 ответа
9k показов

Как нарисовать простую шахматную доску?

Как нарисовать простую шахматную доску с помощью html/css и javascript?
Karen Hovhannisyan's user avatar
10 голосов
2 ответа
235 показов

Необычные эффекты stroke-dasharray

Как добиться подобного эффекта заполнения линии, как рисунке ниже Можно предположить, что здесь использованы два атрибута линии: stroke-linecap="round" чтобы закруглить концы черточек. ...
Alexandr_TT's user avatar
9 голосов
2 ответа
25k показов

Стилизовать input type=range перед ползунком

Здравствуйте! Есть такие стили для слайдера: input[type=range] {-webkit-appearance: none; margin: 5.8px 0; background-color: transparent !important;} input[type=range]:focus {outline: none;} ...
Eugen Eray's user avatar
  • 1,196
6 голосов
5 ответов
1k показов

Какие стили лучше задавать по умолчанию?

При просмотре туториалов, связанных с версткой заметил, что часто перед началом работы, авторы задают какие-то стили по умолчанию, переопределяют дефолтные стили браузера. Собственно, возникло пару ...
Iga's user avatar
  • 1,891