Новые ответы с меткой

0 голосов

Есть ли плагин для Gulp, который будет компилировать scss в css с прописанием стилей для всех браузеров(типо koala)?

Думаю, вы ищите что-то наподобие gulp-autoprefixer. Пример: 1)В package.json нужно иметь секцию browserslist, например такую "browserslist": [ "last 5 version", "...
Walstper's user avatar
  • 411
1 голос
Принятый

Почему картинка вылазит за пределы блока?

Насколько я понял, изображения должны сохранять соотношения сторон и при этом заполнять полностью блоки в которых находятся. Тогда достаточно добавить этим ячейкам (блокам) свойство overflow: hidden. ...
UModeL's user avatar
  • 33.3k
1 голос

Почему картинка вылазит за пределы блока?

Если добавить свойство overflow-y: auto; к классу .grid, это создаст вертикальную прокрутку так как содержимое внутри блоков .grid__col превышает установленную высоту блока .grid. Таким образом, часть ...
Dovgal Dima's user avatar
1 голос

Проблемы с подключение статических файлов к HTML с gorilla/mix Go

вместо: fs := http.FileServer(http.Dir("./ui/static/")) r.PathPrefix("/static/").Handler(http.StripPrefix("/static/", fs)) я вставил: s := http.StripPrefix("/static/...
Максим's user avatar
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; /* сначала ...
puffleeck's user avatar
  • 1,051
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; }...
Qwertiy's user avatar
  • 122k
1 голос

Всем привет! Есть вопросик по поводу кнопок и псевдокласса hover

Вариантов предложили много, но я предложу вариант простой, при помощи псевдокласса :nth-child() .link-item {color: black;} .link-item:nth-child(1):hover {color: red;} .link-item:nth-child(2):hover ...
De.Minov's user avatar
  • 23.6k
0 голосов

Как у текста внутри блока с position:fixed менять цвет при прохождении блока с background-color:#040404 (это черный) на белый?

Для изменения цвета текста внутри блока с position:fixed при прохождении черного блока на белый, можно использовать JavaScript. при прокрутке страницы, скрипт отслеживает положение скролла и ...
ROYS's user avatar
  • 26
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; ...
puffleeck's user avatar
  • 1,051
2 голоса

Всем привет! Есть вопросик по поводу кнопок и псевдокласса hover

Вы можете воспользоваться css переменными. Для css свойства color вы можете задать такое значение: var(--color, #62C144) - это будет значить, что возьмется значение из переменной --color, если его не ...
Oliver Patterson's user avatar
0 голосов

Некорректное отображение стиля шрифта Open Sans "Sofia Sans"

Попробуйте отключить локализованные формы: <html lang="ru"> <head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts....
UModeL's user avatar
  • 33.3k
0 голосов

Некорректное отображение стиля шрифта Open Sans "Sofia Sans"

Можете использовать font-feature-settings. Нужно корневому элементу (то-есть <html>) установить CSS свойство font-feature-settings, со значением 'ENG', вот так: html { font-language-override:...
ΝNL993's user avatar
  • 3,348
0 голосов

Перемещение видимой области на картинке с учетом всех соотношений сторон (React)

так надо чутка стили отрегулировать, я там классы убрал и оставил чисто инлайн стили для обзора. местами может что то убрал не суть. решение заключается в том что блок внутри и svg две разные веши, ...
Armen's user avatar
  • 1,624
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-...
ROYS's user avatar
  • 26
1 голос
Принятый

PWA обновление иконки

Для обновления иконки на iOS и Android, PWA приложения, необходимо следующее: Изменить иконку в файле manifest.json. Для этого откройте файл manifest.json в любом текстовом редакторе и замените ...
ROYS's user avatar
  • 26
0 голосов

Как убрать отображение ссылки

Предлагаю код, который добавляет событие "click" к элементу с id "link" и когда пользователь кликает на этот элемент, выполняется функция, переданная в addEventListener. Функция ...
Dovgal Dima's user avatar
0 голосов

объясните пожалуйста разницу между justify-content: center и margin: 0 auto

justify-content: center; работает только для flex элементов. И если у вас в нём нет необходимости, то можете выровнять за счёт margin: 0 auto; Каждый сам решает что ему нужно. И, если кому-то "...
stylok's user avatar
  • 621
1 голос

Проблема с анимацией ссылки

Помимо ошибки с 0eg, есть ещё одна, анимации transform не работают с display: inline элементами, которым является тег <a>, используйте для этого display: inline-block;. .registr-text { ...
De.Minov's user avatar
  • 23.6k
0 голосов

при работе с Bootstrap возникает ошибка Cannot GET /src/index.html/

Вместо /src/index.html/ попробуйте запросить /src/index.html. Вам ведь нужен именно HTML-файл, а не несуществующая директория/путь.
Object417's user avatar
  • 1,168
0 голосов

Переливающийся текст при наведении

Вы можете использовать Splitting.js . Посмотреть пример можно здесь: https://codepen.io/Rate12-the-sans/pen/qBgLOPd .text-block { animation: slide-in 1s both; animation-delay: calc( .25s + (80ms * ...
Rate12's user avatar
  • 1
3 голоса

Как поменять стандартный значок даты календаря на другой в input

Можно перекрыть значок: .sd-container { position: relative; float: left; } .sd { padding: 5px 10px; height: 30px; width: 150px; } .open-button { position: absolute; top: 10px; ...
Daniel Bashlak's user avatar
0 голосов

Как сделать чтоб css не применялся к какому-нибудь блоку внутри html?

Ждём поддержку браузерами. Пока только Chrome 118+. https://caniuse.com/mdn-css_at-rules_scope @scope (:root) to (.smth) { input { background: red; } } <input> <input> <...
Qwertiy's user avatar
  • 122k
0 голосов

Как сделать изображения spotify.png и soundcloud.png под надписью с классом main-hero-text?

z-index у текста сделать больше: .main-hero-text { position: relative; /*или absolute*/ z-index: 1; }
Serg Bakay's user avatar
0 голосов

Прикрепление стрелок к path дуги SVG

В этом примере я просто использую простой многоугольник в качестве стрелки. Стрелка поворачивается от центральной точки. var svg = document.getElementById('svg01'); document.forms.form01.range....
Alexandr_TT's user avatar
1 голос

Прикрепление стрелок к path дуги SVG

Основная идея такова: вы вычисляете конечную точку шкалы с помощью getPointAtLength и перемещаете стрелку в эту точку. Также вы рассчитываете угол пути в конечной точке, чтобы можно было ...
Alexandr_TT's user avatar
1 голос

Как расположить div'ы разного размера так рядом так, чтобы они заполняли все свободное пространство?

Нативное решение - использование columns. Конечно, есть один существенный недостаток - это неравномерность заполнения колонок, что хорошо заметно по нижнему краю. Из плюсов: адаптивность, минимум кода ...
UModeL's user avatar
  • 33.3k
1 голос

Как расположить div'ы разного размера так рядом так, чтобы они заполняли все свободное пространство?

вроде то что надо UPD: добавил хаоса чекбокс включил для ясности, что это именно чекбокс а не какой то квадратик...) UPD 2: добавил выключенных чекбоксов и раскидал разные спаны по ним для ...
puffleeck's user avatar
  • 1,051
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, ...
Alexandr_TT's user avatar
2 голоса
Принятый

Помогите реализовать слайдер без испрользования JavaScript

Если использовать псевдокласс :has, то изменения будут минимальны: .slider-container { height: 200px; position: relative; width: 80%; margin: auto; overflow: hidden; } .slider-radio { ...
UModeL's user avatar
  • 33.3k
1 голос
Принятый

Как расположить форму регистрации под заголовком?

Просто поместите форму в div.reserv__content .container { max-width: 1120px; margin: 0 auto; } .reserv { background-color: #f8e7d7; } .reserv__inner { display: flex; } ....
WTFisGoingOn's user avatar
  • 1,315
0 голосов
Принятый

Не получается сделать анимацию выпадающего меню

* { margin: 0; padding: 0; box-sizing: border-box; } .cat-image { width: 10rem; height: 8rem; padding: .1rem; border: 1px solid transparent; transition: inherit; } .dropdown { ...
UserTest013's user avatar
  • 3,786
0 голосов

Не получается сделать анимацию выпадающего меню

Измените .myhover{ padding: 0; transition: all 0.2s ease-in-out; width: 200px; height: 120px; } .myhover:hover { width: 240px; height: 150px; padding: 16px; }
Valera's user avatar
  • 34
0 голосов

Блок выходит за края страницы

Думаю, вам стоит указать свойство box-sizing. Это свойство определяет, как вычисляется общая ширина и высота элемента. По дефолту значение box-sizing: content-box;. Это означает, что отступы и рамки ...
Dark Space's user avatar
0 голосов

Вращение кругового меню по часовой стрелке

В чём тут проблема и как её можно исправить? Основная проблема - это недопонимание назначения сочетаний клавиш Ctrl+C/Ctrl+V. Данная комбинация существует для мультиплицирования, в целях ускорения ...
UModeL's user avatar
  • 33.3k
0 голосов

Блок выходит за края страницы

Для того, что бы сделать округление углов с правой стороны, надо задать правильные значения свойству border-radius, в конкретно вашем случае: border-radius: 0 25px 25px 0; Документация .board{ ...
Valera's user avatar
  • 34
0 голосов

Применений стилей при наведении к элементам не имеющих общих родителей

В 99.9% случаев общий родитель существует. Необходимо только правильно "прокинуть" событие: div { padding: .5em; } body { pointer-events: none; } .video__control__info { pointer-events: ...
UModeL's user avatar
  • 33.3k
0 голосов

Блок выходит за края страницы

max-width: 100%; % берется от родителя, но у блока (возможно)есть брат который его выпихивает. это пока все что приходит в голову с вашим отрывком. нужно больше информации.
Максим's user avatar
1 голос
Принятый

Подскажите, пожалуйста, почему не хочет работать первая кнопка (все остальные работают). Не применяется курсор и анимация (ни в хроме, ни в опере)

К кнопке "Explore more" не применяются стили при наведении, потому что у вас секция "container4" и "container_footer" перекрывают всю видимую ширину и высоту экрана. Не ...
Valera's user avatar
  • 34
0 голосов
Принятый

вывод изображения из массива для div

стили для класса .картинка не заданы. у него нулевая высота const вопросыОсновнойМассив = [ {правильныйОтвет: 4, ссылка: "https://b1.m24.ru/c/1060947.730xp.jpg"}, {правильныйОтвет: 2, ссылка: "...
Meth0d's user avatar
  • 843
0 голосов

вывод изображения из массива для div

Все написано правильно, проверил у себя - все работает, у тебя скорее всего проблемы с отображением: проверь размеры и стили блока через инспектор хрома.
Пётр Георгиев's user avatar
0 голосов

как задать размер пустого textarea в списке в строках? (framework7)

Размер и прочие параметры textarea регулируются с помощью css/scss/saas Например textarea { width: 94%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; margin-...
spermobak's user avatar
0 голосов

Как изменить цвет блока слайдера bootstrap

Добавил во views где описывается plotly график: fig.update_layout(plot_bgcolor=None) fig.update_layout(paper_bgcolor='rgb(41, 79, 116)') # Цвет фона вокруг графика Проблема решилась.
shaidullin2h's user avatar
1 голос
Принятый

Соединение двух текстов через многоточие на CSS

Думаю, что решение ниже - это максимум, что можно сделать без скриптов и существенного вмешательства в разметку. Решение не лишено недостатков (сплошной непрозрачный фон и вероятность необходимости ...
UModeL's user avatar
  • 33.3k
0 голосов

GitHub Pages не прогружают стили по BEM методологии

Попробуйте создать файл .nojekyll в корне проекта. Генератор сайтов в гитхаб пейджес не поддерживает БЭМ
Александра's user avatar
0 голосов

Как создавать кольцевые диаграммы с помощью stroke-dashoffset и stroke-dasharray

Длина окружности - 2 * 3.14 * R. В данном случае длина окружности будет ~100, что очень удобно. stroke-dasharray - первое число - сколько идет dash, второе - сколько идет пропуск. stroke-dashoffset ...
Meth0d's user avatar
  • 843
1 голос

Почему применение CSS-фильтра к родительскому элементу нарушает позиционирование дочернего элемента?

Если обратиться к спецификации, то можно прочитать: Значение свойства фильтра, отличное от none, приводит к созданию содержащего блока для потомков с абсолютным и фиксированным расположением, если ...
Alexandr_TT's user avatar
0 голосов

JS HTML Хочу отследить на какой из 19 областей сейчас находится мышка и выводить её класс в консоль каждую секунду

document.addEventListener('DOMContentLoaded', function () { var imageContainer = document.querySelector('.image-container'); var areas = document.querySelectorAll('.image-container area'); ...
BlackStar1991's user avatar
2 голоса
Принятый

Как мне нарисовать серые полоски на границах секторов круга?

Бо́льшую часть оформления можно сделать используя лишь комбинацию градиентов: /* For example only --> */ body { margin: 0; display: grid; place-items: center; min-height: 100vh; background-...
UModeL's user avatar
  • 33.3k
0 голосов
Принятый

Смещение текста в таблице

text-indent в CSS — это свойство, которое призвано управлять отступом в начале строки текста внутри блока. Это отступление можно применять к разным блочным элементам, и оно оказывает влияние на первую ...
Иван Мельник's user avatar
0 голосов

надо сделать так чтобы при клике на дивы у которых id box1 box9 box35 box44 box49 box53 box67 box83 box93 box97 ниже допишу

Если проблема заключается в отображение картинки то вам нужно правильно указать путь к картинке document.getElementById("box1").style.backgroundImage = "url(*путь к картинке*)"
pyduti's user avatar
  • 397

50 лучших ответов включены