Вопросы с меткой [css]
CSS, или каскадные таблицы стилей, — формальный язык описания внешнего вида документа, язык стилей, определяющий отображение HTML-документов.
1,257
вопросов
53
голоса
9
ответов
57k
показов
Как прижать footer к низу экрана?
Есть основной блок <div class="container"></div> с контентом различной высоты, а под ним размещён футер.
Если контент не достигает всей высоты экрана, нужно чтобы минимальная ...
10
голосов
1
ответ
8k
показов
Что делать, если не работает CSS-класс?
Я пишу css-правило
.nav-users {
color: red;
}
но на странице ничего не меняется: цвет остаётся серым.
13
голосов
10
ответов
5k
показов
Книги и учебные материалы по HTML и CSS, а также инструменты вёрстки [дубликат]
Хочу начать изучение HTML и CSS. В интернете находил много сайтов и книг, глаза разбегаются и не знаю что выбрать. Поэтому, прошу посоветовать, с какой книги или сайта лучше всего стоит начать изучать ...
13
голосов
4
ответа
5k
показов
Как прижать блоки друг к другу display: inline-block?
Как прижать блоки друг к другу, убрать отступы между элементами со свойством display: inline-block?
ul {
text-align: center;
}
li {
list-style: none;
display: inline-block;
border:...
25
голосов
2
ответа
3k
показов
Как взаимодействуют между собой viewport и viewBox
Этот вопрос вызван следующей важной темой, затронутой в хорошем вопросе почти полгода назад.
Рисует ли браузер то, что находится за областью видимости SVG холста?
Взаимодействие между собой viewport ...
8
голосов
2
ответа
2k
показов
Практические примеры применения масок svg
Прочитал эти статьи по теории масок, но не уверен, что понял всё правильно
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask
http://css.yoksel.ru/svg-masks/
Вот пример по маскам, ...
14
голосов
4
ответа
20k
показов
Отступы между инлайновыми элементами [дубликат]
Откуда берутся отступы между элементами с display: inline-block; и как их убрать? Отступы нигде не фиксируются:
26
голосов
1
ответ
4k
показов
Круговой процентный прогресс бар
Мне хотелось бы иметь круговой процентный показатель на моем сайте:
В этом случае, см. рисунок, он показывает 75%. Как это может быть сделано?
У меня есть желтый круг в image-file, но может быть ...
10
голосов
1
ответ
5k
показов
Книги и учебные ресурсы по HTML и CSS
Рекомендуемая литература, документация, учебные ресурсы по HTML и CSS
Формат:
Имя Фамилия — «Название книги целиком и полностью», ГГГГ г..
Формат для переведенной литературы:
Имя Фамилия (Name ...
5
голосов
2
ответа
1k
показов
Помогите с dasharray и dashoffset
Никак не могу понять как правильно выставить stroke-dasharray и stroke-dashoffset.
у меня результат на картинке сверху, снизу показано как нужно, и различия наложения( позиция чуть не та (нужно больше ...
67
голосов
18
ответов
7k
показов
Анимация новогодней ёлочки
Наступает Новый год!
Хорошо бы поднять настроение себе и другим.
Копировать и рассылать открыточки с красивыми картинками и гифками, скаченными из сети, уже как-то не интересно.
Хочется чего-то ...
14
голосов
1
ответ
15k
показов
Разделение списка на несколько колонок
Имеется список, пункты которого должны следовать друг за другом по вертикали, а по достижении нижней границы родителя с фиксированной высотой - переноситься в новую колонку.
Реализация с помощью ...
12
голосов
1
ответ
2k
показов
Какие программы и генераторы можно применять для облегчения написания кода svg
Какую посоветуете программу для SVG?
Желательно с "генерацией кода" HTML, если есть такое.
Update
Автор вопроса видимо имел ввиду программы для помощи в написании кода svg
3
голоса
2
ответа
2k
показов
Неправильное отображение текста в блоке div
Нужно чтобы текст, находящийся в блоке div, переносился на новую строку, а не вылезал за пределы блока (именно переносился - overflow:hidden неподойдет), и вообще, почему могла возникнуть такая ...
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;...
7
голосов
2
ответа
21k
показов
Как правильно парсить с помощью AngleSharp?
Всем привет! Много тем уже перечитал похожих, но в них в основном какие-то частности спрашивались. Очень согласен вот с этими словами. Ну, честно говоря, вообще ничего непонятно. Понял, что информация ...
7
голосов
3
ответа
7k
показов
Как в placeholder вставить * красного цвета?
<input type="text" id="reviews_nm" class="input_field" placeholder="Ваше имя*" name="name">
Чтобы знак * был красного цвета?
2
голоса
4
ответа
72k
показов
Очистка текстового поля ввода при нажатии кнопки
Есть input type="text" и button. Нужно, чтобы при нажатии button, поле input type="text" очищалось.
<input type="text" id="text1">
<button id="btn"></button>
29
голосов
10
ответов
242k
показов
Как при наведении на один элемент менять стили другого элемента?
Как сделать так, чтобы при наведении на один элемент (hover) менять стили другого элемента?
Можно ли это сделать только на css?
К примеру: навожу на блок и хочу чтобы все заголовки в этом блоке стали ...
13
голосов
4
ответа
3k
показов
Как сверстать круг, разделенный на цвета
Нужен наиболее верный способ. Можно для примера разделить круг на 3 сегмента.
40
голосов
7
ответов
2k
показов
Как сверстать границу в виде уголков?
Подскажите, как сверстать такой бордер?
23
голоса
3
ответа
5k
показов
Линия до и после текста над картинкой
Я хочу создать линию до и после центрированного заголовка. Линия и текст должны иметь прозрачный фон, чтобы иметь возможность позиционировать их на неодинаковом фоне. Строка не должна быть больше 100% ...
17
голосов
4
ответа
1k
показов
Как вырезать два небольших сегмента из окружности и вращать их при наведении курсора
На многих сайтах стали появляться эффекты вращения окружностей с симметрично вырезанными небольшими участками. Смотрится хорошо. Как повторить данный эффект?
У меня получилось вырезать один сегмент ...
15
голосов
4
ответа
14k
показов
Селектор левых соседей
Столкнулся с проблемой: нужно разместить стиль для соседей, которые находится слева от элемента. В моём случае, нужно, чтобы ul элемент красил элемент a в красный.
Вот мой html код:
<ul>
...
11
голосов
3
ответа
26k
показов
Как правильно добавить события к динамически создаваемым элементам? [дубликат]
Исользую jquery. Мне нужно сделать, чтобы при наведении на любую ссылку в документе, отображалось бы - alert("ссылка").
Изначально, в документе, у меня уже есть одна ссылка - <a>Первая</a>....
3
голоса
3
ответа
982
показа
Прижать футер к низу страницы
Доброго времени суток, вопрос заезженный. В гугле есть информация , но во всех примерах нужно оборачивать ненужным div блоком. подскажите пожалуйста можно ли обойтись без него. Например есть вот такая ...
81
голос
14
ответов
4k
показов
Новогодний конкурс 2020 года!
В прошлом году подобный конкурс неожиданно привлек большой интерес участников RUso.
Было весело, люди хотели продолжение праздника вновь и вновь.
К слову, было проведено 4 конкурса с ...
26
голосов
3
ответа
9k
показов
Как сделать прозрачный текст?
Мне нужно чтобы была кнопка, в которой текст был как фон (т.е. просто "дырявил блок")
13
голосов
1
ответ
911
показов
Поддержка лигатурных иконок браузерами
Наткнулся на интересную штуку - шрифт, в котором вместо иконки ты пишешь слово, а оно показывается как иконка. Не знаю, как сделано именно тут, но единственный известный мне способ сделать такое - это ...
6
голосов
2
ответа
5k
показов
margin-top ребенка - сдвигает родителя - почему?
Вставляю блок, и даю ему margin-top: 50px - и он сдвигает родителя body в данном случае. Почему так происходит?
Если же дать padding-top: - тогда ок все
* {
margin: 0;
padding: 0;
}
...
5
голосов
6
ответов
41k
показов
Как сделать резиновый квадратный DIV css?
Как сделать резиновый квадратный DIV css?
3
голоса
3
ответа
9k
показов
Заполнить точками пустое пространство между словами
Необходимо реализовать оформление, которое выглядит как оглавление в книге:
часть текста на строке прижата влево, часть - вправо, а расстояние между концом левого и началом правого заполняется точками....
2
голоса
1
ответ
147
показов
Настройки игрового поля "Сапер"
не работает prompt()
var game = {
askStandartField: confirm("Стандартные настройки?"),
width: 10,
height: 10,
mineCount: 9,
standartField: (function() {
if (!game.askStandartField) {
...
20
голосов
10
ответов
241k
показов
Как убрать обводку при клике на input
При клике и фокусе на элементе input появляется обводка. Как её убрать?
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 ...
8
голосов
5
ответов
18k
показов
Как добавить многоточие после последнего слова в многострочном тексте?
Имеется некий блок с текстом с фиксированной высотой и шириной, и значением overflow: hidden;, то есть если текст не влазит в область он обрезается, нужно добавить многоточие в конец последней видимо ...
6
голосов
1
ответ
566
показов
Как сделать круговую диаграмму, зависимую от чекбоксов?
Нужно, что бы диаграмма заполнялась в зависимости от выбранных чекбоксов. Как это можно сделать?
5
голосов
2
ответа
7k
показов
Почему длинное слово выходит за границы блока?
Почему контент выходит за пределы div'a num-box ?
.num-box {
margin-top: 75px;
position: relative;
width: 80%;
height: 20%;
background-color: antiquewhite;
}
<div class="num-...
1
голос
2
ответа
248
показов
Как сверстать направленный вниз треугольный блок? [дубликат]
Подскажите пожалуйста как верстаются такие блоки?
1
голос
4
ответа
40k
показов
Как вставить иконку в input [дубликат]
Видела подобный вопрос, но ответ дали как вставить изображение. А что на счет иконки, например, с Font Awesome?
Вот как здесь:
http://bashooka.com/wp-content/uploads/2015/10/login-form-ui-designs-44....
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);
30
голосов
8
ответов
2k
показов
Tooltip с вырезами у стрелки
Увидел интересную идею для Tooltip. Её отличие от других состоит в том, что боковые полосы стрелки заходят в тело образовывая две прозрачные полосы. Не могу понять, как осуществить эти вырезы.
Мой ...
18
голосов
2
ответа
932
показа
Время окончательного применения свойств CSS
Я обнаружил, что некоторые свойства CSS (думаю, в первую очередь те, которые отвечают за позиционирование и отображение элементов) применяются с небольшой задержкой (часто способной поломать код).
В ...
13
голосов
4
ответа
2k
показов
Срезанные углы блока
Нужно срезать углы блока так, чтобы фон срезанных частей был прозрачным. Фон будет изображением, так что треугольники не подойдут. При этом нужно, чтобы у всего блока со срезанной частью была рамка, и ...
13
голосов
1
ответ
3k
показов
Как сделать соединительную линию под наклоном между двумя точками?
Нужно сверстать соединительные линии для таких блоков адаптивно:
Возможно ли в css прописать начало линии в одном relative блоке, а конец в другом? Есть ли такое решение на css или может быть svg? Js ...
12
голосов
2
ответа
2k
показов
Наложение background только на текст
Есть текст. На него надо наложить background так, чтобы он был только на тексте. То есть все, что не текст, было прозрачным. Думаю через svg сделать наложение картинки на текст, но не знаю, как ...
11
голосов
3
ответа
9k
показов
Как нарисовать простую шахматную доску?
Как нарисовать простую шахматную доску с помощью html/css и javascript?
10
голосов
2
ответа
235
показов
Необычные эффекты stroke-dasharray
Как добиться подобного эффекта заполнения линии, как рисунке ниже
Можно предположить, что здесь использованы два атрибута линии:
stroke-linecap="round" чтобы закруглить концы черточек.
...
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;}
...
6
голосов
5
ответов
1k
показов
Какие стили лучше задавать по умолчанию?
При просмотре туториалов, связанных с версткой заметил, что часто перед началом работы, авторы задают какие-то стили по умолчанию, переопределяют дефолтные стили браузера. Собственно, возникло пару ...