Новые ответы с меткой css
0
голосов
Есть ли плагин для Gulp, который будет компилировать scss в css с прописанием стилей для всех браузеров(типо koala)?
Думаю, вы ищите что-то наподобие gulp-autoprefixer.
Пример:
1)В package.json нужно иметь секцию browserslist, например такую
"browserslist": [
"last 5 version",
"...
1
голос
Принятый
Почему картинка вылазит за пределы блока?
Насколько я понял, изображения должны сохранять соотношения сторон и при этом заполнять полностью блоки в которых находятся. Тогда достаточно добавить этим ячейкам (блокам) свойство overflow: hidden. ...
1
голос
Почему картинка вылазит за пределы блока?
Если добавить свойство overflow-y: auto; к классу .grid, это создаст вертикальную прокрутку так как содержимое внутри блоков .grid__col превышает установленную высоту блока .grid. Таким образом, часть ...
1
голос
Проблемы с подключение статических файлов к HTML с gorilla/mix Go
вместо:
fs := http.FileServer(http.Dir("./ui/static/"))
r.PathPrefix("/static/").Handler(http.StripPrefix("/static/", fs))
я вставил:
s := http.StripPrefix("/static/...
0
голосов
Как в этом случае прижать grid элементы?
.item {
padding: 10px;
display: list-item;
list-style: number inside;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.grid {
display: grid;
grid-auto-rows: 1px; /* сначала ...
2
голоса
Принятый
Всем здравствуйте!
div {
width: 14em;
margin: auto;
display: flex;
flex-wrap: wrap;
gap: .5em;
text-align: center;
}
span {
flex: 1 0 auto;
padding: .5em;
border: 1px solid;
border-radius: 100vmax;
}...
1
голос
Всем привет! Есть вопросик по поводу кнопок и псевдокласса hover
Вариантов предложили много, но я предложу вариант простой, при помощи псевдокласса :nth-child()
.link-item {color: black;}
.link-item:nth-child(1):hover {color: red;}
.link-item:nth-child(2):hover ...
0
голосов
Как у текста внутри блока с position:fixed менять цвет при прохождении блока с background-color:#040404 (это черный) на белый?
Для изменения цвета текста внутри блока с position:fixed при прохождении черного блока на белый, можно использовать JavaScript.
при прокрутке страницы, скрипт отслеживает положение скролла и ...
2
голоса
Всем привет! Есть вопросик по поводу кнопок и псевдокласса hover
#x{
background: linear-gradient(to top, red 1.2em, green 2.4em, skyblue 3.6em, orange 4.8em, pink 6em);
-webkit-background-clip: text;
background-clip: text;
}
#x > *{
display: list-item;
...
2
голоса
Всем привет! Есть вопросик по поводу кнопок и псевдокласса hover
Вы можете воспользоваться css переменными. Для css свойства color вы можете задать такое значение: var(--color, #62C144) - это будет значить, что возьмется значение из переменной --color, если его не ...
0
голосов
Некорректное отображение стиля шрифта Open Sans "Sofia Sans"
Попробуйте отключить локализованные формы:
<html lang="ru">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts....
0
голосов
Некорректное отображение стиля шрифта Open Sans "Sofia Sans"
Можете использовать font-feature-settings. Нужно корневому элементу (то-есть <html>) установить CSS свойство font-feature-settings, со значением 'ENG', вот так:
html {
font-language-override:...
0
голосов
Перемещение видимой области на картинке с учетом всех соотношений сторон (React)
так надо чутка стили отрегулировать, я там классы убрал и оставил чисто инлайн стили для обзора. местами может что то убрал не суть.
решение заключается в том что блок внутри и svg две разные веши, ...
0
голосов
Проблема с анимацией ссылки
body { font-family: sans-serif; }
div {
text-align: center;
}
span {
background: #48abe0;
color: white;
padding: 1.5rem;
font-size: 1rem;
display: inline-block;
}
span.strong-hover-...
1
голос
Принятый
PWA обновление иконки
Для обновления иконки на iOS и Android, PWA приложения, необходимо следующее:
Изменить иконку в файле manifest.json. Для этого откройте файл manifest.json в любом текстовом редакторе и замените ...
0
голосов
Как убрать отображение ссылки
Предлагаю код, который добавляет событие "click" к элементу с id "link" и когда пользователь кликает на этот элемент, выполняется функция, переданная в addEventListener.
Функция ...
0
голосов
объясните пожалуйста разницу между justify-content: center и margin: 0 auto
justify-content: center; работает только для flex элементов. И если у вас в нём нет необходимости, то можете выровнять за счёт margin: 0 auto; Каждый сам решает что ему нужно. И, если кому-то "...
1
голос
Проблема с анимацией ссылки
Помимо ошибки с 0eg, есть ещё одна, анимации transform не работают с display: inline элементами, которым является тег <a>, используйте для этого display: inline-block;.
.registr-text {
...
0
голосов
при работе с Bootstrap возникает ошибка Cannot GET /src/index.html/
Вместо /src/index.html/ попробуйте запросить /src/index.html. Вам ведь нужен именно HTML-файл, а не несуществующая директория/путь.
0
голосов
Переливающийся текст при наведении
Вы можете использовать Splitting.js .
Посмотреть пример можно здесь: https://codepen.io/Rate12-the-sans/pen/qBgLOPd
.text-block {
animation: slide-in 1s both;
animation-delay: calc( .25s + (80ms * ...
3
голоса
Как поменять стандартный значок даты календаря на другой в input
Можно перекрыть значок:
.sd-container {
position: relative;
float: left;
}
.sd {
padding: 5px 10px;
height: 30px;
width: 150px;
}
.open-button {
position: absolute;
top: 10px;
...
0
голосов
Как сделать чтоб css не применялся к какому-нибудь блоку внутри html?
Ждём поддержку браузерами. Пока только Chrome 118+. https://caniuse.com/mdn-css_at-rules_scope
@scope (:root) to (.smth) {
input {
background: red;
}
}
<input> <input> <...
0
голосов
Как сделать изображения spotify.png и soundcloud.png под надписью с классом main-hero-text?
z-index у текста сделать больше:
.main-hero-text {
position: relative; /*или absolute*/
z-index: 1;
}
0
голосов
Прикрепление стрелок к path дуги SVG
В этом примере я просто использую простой многоугольник в качестве стрелки. Стрелка поворачивается от центральной точки.
var svg = document.getElementById('svg01');
document.forms.form01.range....
1
голос
Прикрепление стрелок к path дуги SVG
Основная идея такова: вы вычисляете конечную точку шкалы с помощью getPointAtLength и перемещаете стрелку в эту точку.
Также вы рассчитываете угол пути в конечной точке, чтобы можно было ...
1
голос
Как расположить div'ы разного размера так рядом так, чтобы они заполняли все свободное пространство?
Нативное решение - использование columns. Конечно, есть один существенный недостаток - это неравномерность заполнения колонок, что хорошо заметно по нижнему краю. Из плюсов: адаптивность, минимум кода ...
1
голос
Как расположить div'ы разного размера так рядом так, чтобы они заполняли все свободное пространство?
вроде то что надо
UPD:
добавил хаоса
чекбокс включил для ясности, что это именно чекбокс а не какой то квадратик...)
UPD 2:
добавил выключенных чекбоксов и раскидал разные спаны по ним для ...
0
голосов
Как создавать кольцевые диаграммы с помощью stroke-dashoffset и stroke-dasharray
Окружность радиусом r="15,91 равна 2 * 3,1415 * 15,91 = 99,96 =~ 100.
stroke-dasharray="60 40", где
60 - dash (тире)
40 - gap (пробел)
Поскольку по умолчанию — Stroke-dashoffset = 0, ...
2
голоса
Принятый
Помогите реализовать слайдер без испрользования JavaScript
Если использовать псевдокласс :has, то изменения будут минимальны:
.slider-container {
height: 200px;
position: relative;
width: 80%;
margin: auto;
overflow: hidden;
}
.slider-radio {
...
1
голос
Принятый
Как расположить форму регистрации под заголовком?
Просто поместите форму в div.reserv__content
.container {
max-width: 1120px;
margin: 0 auto;
}
.reserv {
background-color: #f8e7d7;
}
.reserv__inner {
display: flex;
}
....
0
голосов
Принятый
Не получается сделать анимацию выпадающего меню
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.cat-image {
width: 10rem;
height: 8rem;
padding: .1rem;
border: 1px solid transparent;
transition: inherit;
}
.dropdown {
...
0
голосов
Не получается сделать анимацию выпадающего меню
Измените
.myhover{
padding: 0;
transition: all 0.2s ease-in-out;
width: 200px;
height: 120px;
}
.myhover:hover {
width: 240px;
height: 150px;
padding: 16px;
}
0
голосов
Блок выходит за края страницы
Думаю, вам стоит указать свойство box-sizing. Это свойство определяет, как вычисляется общая ширина и высота элемента.
По дефолту значение box-sizing: content-box;. Это означает, что отступы и рамки ...
0
голосов
Вращение кругового меню по часовой стрелке
В чём тут проблема и как её можно исправить?
Основная проблема - это недопонимание назначения сочетаний клавиш Ctrl+C/Ctrl+V. Данная комбинация существует для мультиплицирования, в целях ускорения ...
0
голосов
Блок выходит за края страницы
Для того, что бы сделать округление углов с правой стороны, надо задать правильные значения свойству border-radius, в конкретно вашем случае: border-radius: 0 25px 25px 0;
Документация
.board{
...
0
голосов
Применений стилей при наведении к элементам не имеющих общих родителей
В 99.9% случаев общий родитель существует. Необходимо только правильно "прокинуть" событие:
div { padding: .5em; }
body { pointer-events: none; }
.video__control__info { pointer-events: ...
0
голосов
Блок выходит за края страницы
max-width: 100%; % берется от родителя, но у блока (возможно)есть брат который его выпихивает.
это пока все что приходит в голову с вашим отрывком. нужно больше информации.
1
голос
Принятый
Подскажите, пожалуйста, почему не хочет работать первая кнопка (все остальные работают). Не применяется курсор и анимация (ни в хроме, ни в опере)
К кнопке "Explore more" не применяются стили при наведении, потому что у вас секция "container4" и "container_footer" перекрывают всю видимую ширину и высоту экрана. Не ...
0
голосов
Принятый
вывод изображения из массива для div
стили для класса .картинка не заданы. у него нулевая высота
const вопросыОсновнойМассив = [
{правильныйОтвет: 4,
ссылка: "https://b1.m24.ru/c/1060947.730xp.jpg"},
{правильныйОтвет: 2,
ссылка: "...
0
голосов
вывод изображения из массива для div
Все написано правильно, проверил у себя - все работает, у тебя скорее всего проблемы с отображением: проверь размеры и стили блока через инспектор хрома.
0
голосов
как задать размер пустого textarea в списке в строках? (framework7)
Размер и прочие параметры textarea регулируются с помощью css/scss/saas
Например
textarea {
width: 94%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
margin-...
0
голосов
Как изменить цвет блока слайдера bootstrap
Добавил во views где описывается plotly график:
fig.update_layout(plot_bgcolor=None)
fig.update_layout(paper_bgcolor='rgb(41, 79, 116)') # Цвет фона вокруг графика
Проблема решилась.
1
голос
Принятый
Соединение двух текстов через многоточие на CSS
Думаю, что решение ниже - это максимум, что можно сделать без скриптов и существенного вмешательства в разметку.
Решение не лишено недостатков (сплошной непрозрачный фон и вероятность необходимости ...
0
голосов
GitHub Pages не прогружают стили по BEM методологии
Попробуйте создать файл .nojekyll в корне проекта. Генератор сайтов в гитхаб пейджес не поддерживает БЭМ
0
голосов
Как создавать кольцевые диаграммы с помощью stroke-dashoffset и stroke-dasharray
Длина окружности - 2 * 3.14 * R. В данном случае длина окружности будет ~100, что очень удобно. stroke-dasharray - первое число - сколько идет dash, второе - сколько идет пропуск. stroke-dashoffset ...
1
голос
Почему применение CSS-фильтра к родительскому элементу нарушает позиционирование дочернего элемента?
Если обратиться к спецификации, то можно прочитать:
Значение свойства фильтра, отличное от none, приводит к созданию
содержащего блока для потомков с абсолютным и фиксированным расположением, если ...
0
голосов
JS HTML Хочу отследить на какой из 19 областей сейчас находится мышка и выводить её класс в консоль каждую секунду
document.addEventListener('DOMContentLoaded', function () {
var imageContainer = document.querySelector('.image-container');
var areas = document.querySelectorAll('.image-container area');
...
2
голоса
Принятый
Как мне нарисовать серые полоски на границах секторов круга?
Бо́льшую часть оформления можно сделать используя лишь комбинацию градиентов:
/* For example only --> */ body { margin: 0; display: grid; place-items: center; min-height: 100vh; background-...
0
голосов
Принятый
Смещение текста в таблице
text-indent в CSS — это свойство, которое призвано управлять отступом в начале строки текста внутри блока. Это отступление можно применять к разным блочным элементам, и оно оказывает влияние на первую ...
0
голосов
надо сделать так чтобы при клике на дивы у которых id box1 box9 box35 box44 box49 box53 box67 box83 box93 box97 ниже допишу
Если проблема заключается в отображение картинки то вам нужно правильно указать путь к картинке
document.getElementById("box1").style.backgroundImage = "url(*путь к картинке*)"
50 лучших ответов включены
Связанные метки
css × 28865html × 20553
javascript × 8544
jquery × 3272
css3 × 2982
вёрстка × 2707
html5 × 1923
bootstrap × 1354
svg × 1353
php × 824
flexbox × 763
веб-программирование × 658
css-animation × 653
анимация × 471
адаптивная-верстка × 409
wordpress × 388
scss × 384
reactjs × 343
sass × 295
frontend × 289
шрифты × 236
hover × 214
svg-animation × 189
slider × 170
vue.js × 161