Новые ответы с меткой css3
1
голос
Принятый
css: адаптивный размер текста (в зависимости от ширины блока)
это максимум, а так он может и 20 и 12 в зависимости от ширины блока в зависимости от ширины блока конечно не получилось (получилось от ширины viewport'а, но т.к. сам блок 100%, считайте что это одно ...
- 2,716
0
голосов
Как сделать контейнер имел max-width таким, чтобы левая часть была с отступом, а правая шла через весь экран
Надеюсь в цветах блоков разберётесь и ширину я уменьшил, что бы здесь отображалось корректно.
body {
margin: 0;
}
div {
display: block;
}
.wrapper {
background-color: gray;
display: grid;
}...
- 545
1
голос
Принятый
как в css для grid-а плюсануть к fr pixel
Переведу для Вас этот ответ на англоязычной версии SO:
Единица fr не является стандартной длиной, как проценты или пиксели.
Онa представляет собой только остаточное пространство.
Следовательно, fr ...
- 3,820
1
голос
Реализовать поиск по скрытому списку ul -> li
Если следовать логике работы поиска по приведённой в вопросе ссылке, то желательно немного поправить разметку и переписать скрипт:
let categoriesAll = [...categories.children];
/* Развернуть/...
- 31k
1
голос
анимированное Меню бургер
Типа этого?
.navbar__hamburger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2px;
height: 32px;
width: 32px;
...
- 545
0
голосов
CSS-анимация с нажатием "Наведи на меня"
Можно воспользоваться "смежными селекторами" (+), комбинаторами если угодно.
.block {
position: absolute;
width: 600px;
height: 50px;
background: rgb(199, 199, 199);
top: 100px;...
- 2,716
1
голос
CSS-анимация с нажатием "Наведи на меня"
.block {
position: absolute;
width: 600px;
height: 50px;
background: rgb(199, 199, 199);
top: 100px;
left: 600px;
}
a {
display: flex;
justify-content: space-around;
}
a::after {
...
- 19
0
голосов
Принятый
Углы для контейнера
Используйте псевдоэлементы, как фон, применив к ним clip-path (Вы можете изменить размер, ухватив блок за правый нижний угол):
/* For example only --> */ body{margin:0;min-height:100vh;display:...
- 31k
1
голос
Почему при изменении позиции меняется ширина у абсолютно позиционированного элемента?
Когда вы изменяете позицию элемента с абсолютным позиционированием, вы также изменяете его начальную точку (или точку отсчета), относительно которой рассчитываются его размеры и позиционирование. В ...
- 116
1
голос
CSS Как поставить элемент по центру экрана, что б не влияли на другие элементы?
Ну вот так получилось через grid
body {
margin: 0;
width: 100vw;
height: 100vh;
display: grid;
align-items: center;
background-color: #000;
overflow: hidden;
color: #fff;
font-...
- 545
0
голосов
По стандарту html, в ul можно вложить только списки li?
Только li.
А чтобы проверить, будет что-то ошибкой или нет, надо вставить разметку в w3c validator.
- 120k
2
голоса
Принятый
Выбрать элемент селектором CSS
Возможно ли при такой структуре обратиться к .agreement__rect, если чекбокс активен?
Как вариант - использовать такой селектор. У меня в Опере 96.0.4693.50 - работает.
.agreement__label:has(:...
- 3,294
1
голос
Принятый
Ширина правого блока в приоритете
Запретить блоку сжиматься при помощи flex-shink: 0 (или как в примере ниже через flex).
.gl {
display: flex;
}
.left {
background: lavender;
}
.right {
background: navajowhite;
flex: 90% ...
- 5,301
3
голоса
Принятый
Не работают stroke-dasharray, stroke-dashoffset
Учитывая то, что у Вас в анимации есть значение infinite, код должен быть примерно таким:
.animation-pigeon {
fill: none;
stroke: red;
stroke-width: 16px;
stroke-dasharray: 3600;
stroke-...
- 31k
0
голосов
Липкий первый столбец, липкая шапка и горизонтальный скролл в таблице
Думаю, что просто задать "липкость" всем первым потомкам в строках будет достаточно:
.table-container {
width: 500px;
overflow-x: auto;
}
.table {
border-spacing: 0;
}
tr > * {
...
- 31k
0
голосов
Не работает :last-of-type
Просто обращайтесь не к a:last-child, а к li:last-child
a {
color: black;
text-decoration: none;
}
.footer__link-list li:last-child .footer__link {
color: orange;
font-weight: bold;
}
&...
- 1,439
0
голосов
Как обратиться к элементу внутри элемента?
Для применения стилей к каждому n-ному элементу li внутри ul, можно использовать псевдокласс :nth-child().
Например, чтобы применить стили только к четным элементам li, можно использовать следующий ...
1
голос
Принятый
Выбрать определенный элемент селектором css
Выбор элементов a, для которых родительским элементом (>) является span, которому предшествует (~) элемент a
a~span>a {
color: red
}
<div class="breadcrumbs-wrapper">
<div ...
- 6,534
1
голос
Принятый
Как сделать полупрозрачную внутреннюю рамку у clip-pah элемента?
Как вариант, можно использовать еще один элемент (или псевдоэлемент) с полупрозрачным фоном и clip-path, дающим обратную фигуру.
Примерно так (с пикселями поиграйте сами):
П.С. правильно "hexagon&...
- 5,892
1
голос
Принятый
Как убрать нижнюю грань в materialize при нажатии на input
Скорее всего, это свойство border-bottom. Чтобы убрать достаточно установить его значение на none
- 36
1
голос
Принятый
Необходимо перенести выпадающее меню на передний план
Вам нужно указать для .main-head z-index:1 или больше.
- 982
0
голосов
Почему появляется резкий переход от последнего слайда к первому в Slick Slider?
Решил путем добавления следующих стилей:
/* slide when not active/center*/ .slick-slide[aria-hidden="true"]:not(.slick-cloned) ~ .slick-cloned[aria-hidden="true"] {
transform: ...
- 439
50 лучших ответов включены
Связанные метки
css3 × 4395css × 2951
html × 2195
html5 × 1872
javascript × 934
вёрстка × 388
jquery × 366
svg × 366
css-animation × 296
анимация × 201
flexbox × 166
bootstrap × 133
адаптивная-верстка × 71
веб-программирование × 63
css-grid × 60
scss × 50
media-queries × 41
svg-animation × 39
sass × 36
background × 32
internet-explorer × 31
php × 27
reactjs × 27
hover × 27
transform × 27