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

CSS3 — третья версия формального языка описания внешнего вида документа CSS.

Фильтрация
Сортировка
Метки
0 голосов
1 ответ
19 показов

Как прописать путь к файлу CSS?

Файл index.html видит CSS файл style.css, при этом когда прописываю путь к тому же CSS файлу но из другого html-файла, то он его не видит (на странице сайта ничего не применяется), перебрал уже ...
notchyZz's user avatar
1 голос
0 ответов
46 показов

CSS Возможно ли заменить стили части фразы без дополнительных тегов?

Есть довольно частая задача от дизайнеров, по разукрашиванию конкретных частей фразы заголовков в отдельные цвета. Пример. Большенство версий в верстке сводиться к добавлению сторонних тегов в фразу, ...
BlackStar1991's user avatar
0 голосов
0 ответов
35 показов

JavaScript/HTML/CSS: Затемнение фона при выборе

У меня при просмотре одного из элементов страницы должен затемняться фон и выходить модальное окно. Делаю я это так: app_view.addEventListener('click', function(evt) { evt....
Никита Климов's user avatar
1 голос
0 ответов
47 показов

Css grid Как создать

проломал голову уже часов 6, не получается сверстать блок. А именно друг под друга поставить могу, но чтобы фото занимали пустое пространство не получается( Заранее спасибо)
Tom Tom's user avatar
  • 35
0 голосов
1 ответ
32 показа

CSS Смена цвета шрифта в зависимости от фона подкладки

Есть ли возможность менять цвет на определенный в зависимости от того какой фон под текстом. Приведу пример. body { margin: 0; } b { display: block; color: #000; mix-blend-mode: multiply; ...
BlackStar1991's user avatar
0 голосов
1 ответ
27 показов

Вопрос как сделать так чтобы скроллбар опустился на определенную высоту при нажатии на кнопку

Мне нужно настроить скроллбар чтобы когда пользователь нажимал на кнопку его плавно прокручивало до того места которое я точно обозначил сам. написанный html,css,js. Прошу объясните как можно это ...
 Northern_leaf 's user avatar
1 голос
1 ответ
33 показа

Использование .focus css

У меня есть виджет, который при наведении мыши разворачивается из свернутого состояния, а при отведении мыши возвращается в исходное состояние. Нужно, если курсор на элементе, чтобы он в исходное ...
Djony Cooper's user avatar
0 голосов
1 ответ
59 показов

css 3 и html 5, Как мне сортировать карточки товаров по экрану?

Я добавил margin в основную структуру карточки, но при ее копировании, все карточки идут вниз, а мне нужно чтоб они шли по порядку влево, и если места нет, то уже внизу. Как это можно реализовать? ...
Nqweqweqwe's user avatar
0 голосов
1 ответ
36 показов

CSS Как сделать секцию на весь экран с горизонтальным скроллом?

Есть вот такой примитивный html/css body { margin: 0; } .main { display: flex; overflow-x: auto; } .main_section { background-color: #f00; width: 100%; height: 100vh; } .main_video {...
BlackStar1991's user avatar
0 голосов
1 ответ
72 показа

Верстка двух горизонтальных линий с текстом между ними

Всем привет! Учусь вёрстке. Нашел макетик для тренировки и в нём есть такой вот Title с 2-мя горизонтальными линиями слева и справа. Возможно ли средствами html + css сверстать такое? Или идти в ...
alexander's user avatar
1 голос
1 ответ
24 показа

Не работает запрос media для телефонов

Делаю медиа-запрос для телефона, а он не работает (должно быть в один столбец, при разрешении от 0 до 600): * { margin: 0; padding: 0; } .container { display: grid; grid-template-columns: ...
Артем's user avatar
0 голосов
1 ответ
41 показ

Как изменить расстояние

Доброй ночи, как изменить расстояние между этими блоками? .second_list{ width:100%; display: flex; position: absolute; top: 1200px; right: 20px; justify-content: space-...
Илья's user avatar
1 голос
0 ответов
47 показов

Адаптивные стили в CSS/SASS/SCSS

Существуют ли методы, позволяющие создавать стили, которые бы способствовали отображению контента на разных экранах одинаково отлично? Во многих источниках создание адаптивных стилей описывается через ...
Ivanov Vladislav's user avatar
0 голосов
0 ответов
60 показов

Можно ли отследить положение якорной ссылки через CSS?

Есть банальный сайтбар с якорными ссылками, которые сформированы с привязкой к заголовкам. Есть ли возможность новыми стилями СSS или HTML атрибутами как-то отслеживать область видимости, и ...
BlackStar1991's user avatar
1 голос
2 ответа
59 показов

Как разместить корректно галерею фоток с помощью grid?

Пытаюсь разместить фотки в галереи таким образом как на скрине, но не могу понять как разместить последний блок, да и вообще как корректно все их разместить. Также вопрос, в данном случае будет ...
Виталий Тимонин's user avatar
0 голосов
0 ответов
58 показов

Как адаптировать этот код под разрешения?

я не совсем понимаю как мне адаптировать свой код, когда у меня в полноэкранном режиме, то все выглядит нормально, но когда я перехожу в режим "окно" наполнение сайта не адаптируется под ...
Илья's user avatar
0 голосов
1 ответ
36 показов

Как динамически задавать бекграунд в инлайн стилях при переборе массива объектов

есть массив объектов let productsCategory = [{ id: 'pc-laptop', name: 'Ноутбуки и компьютеры', }, { id: 'phone-tv-electronics', name: 'Сматрфоны, ТВ и электроника', }, { id:...
qwothex's user avatar
  • 21
1 голос
3 ответа
38 показов

Почему нижние элементы grid по высоте меньше, чем самые верхние?

Помогите пожалуйста решить данную проблему. Нижние блоки отличаются по высоте с верхними. Все блоки должны иметь высоту 350рх, когда нижние составляют, почему то, всего 290рх. Везде искал решение ...
Никита's user avatar
2 голоса
2 ответа
81 показ

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

Пытался добавить на сайт шрифт SofiaSans regular, но заметил что некорректно отображаются некоторые символы, если в теге html установлено lang="ru", но при lang="en" все работает ...
Envoy's user avatar
  • 23
1 голос
2 ответа
73 показа

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

Работает только анимация цвета, а анимация дрожания не работает, в чем может быть причина? @keyframes link-n-move-shaking { 0% { transform: rotate(0deg); } 25% { transform: rotate(...
Кира Кира's user avatar
0 голосов
1 ответ
40 показов

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

.header-links-list__item { font-family: 'DM Sans', sans-serif; margin-right: 60px; } .header-links-list__item a { color: #FFFFFF; } .header-links-list__container { float: right; padding: ...
floydpower's user avatar
0 голосов
1 ответ
52 показа

В мобильной версии сайта есть отступ фона от header. Не могу понять из-за чего?

В мобильной версии сайта появляется какой-то просвет между фоном и header. Фон указан в самом теге header, в целом верстка через одно место, но нужна нормальная картинка. Подскажите как исправить? ...
mack.rodionov's user avatar
0 голосов
2 ответа
77 показов

Не проигрывается анимация css

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Viaoda+Libre&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&family=...
floydpower's user avatar
0 голосов
1 ответ
113 показов

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

const swiper = new Swiper('.swiper-container', { // Optional parameters loop: true, // If we need pagination pagination: { el: '.swiper-pagination', }, // ...
Aноним's user avatar
0 голосов
0 ответов
56 показов

Как анимировать тег <details> и его элементы?

Мой вопрос базируеться на вот этой статье. Разработчики применяют хак, чтобы сделать эффект скрытия содержимого тега <details> через CSS. Вот пример реализации на codepen но в мойом случаии что-...
BlackStar1991's user avatar
0 голосов
0 ответов
26 показов

Помогите помочь разобраться. При верстке макета почему-то не работает swiper slider?

const swiper = new Swiper('.swiper-container', { // Optional parameters direction: 'vertical', loop: true, // If we need pagination pagination: { el: '.swiper-pagination', }, // ...
Aноним's user avatar
0 голосов
1 ответ
72 показа

Как сделать такой эффект в html css?

у меня не получается сделать шапку как на этом фото А именно у меня не получается сделать такой эффект с картинкой. Пытался использовать radial-gradient() у меня не получилось.
GorkiiOgurec's user avatar
1 голос
1 ответ
36 показов

Как расположить блоки и картинку,как на фото?

Это делается через grid или как?
kkk kkk's user avatar
  • 13
0 голосов
0 ответов
16 показов

Ошибка в визуализации на маленьком экране Vertical Slider Slick

В браузерах Chrome/Firefox/Opera/Yandex на 1080p разрешениях норм, но если разрешение экрана 720p , то начинается веселье, в первых двух все ок, а в последних при выходе из поля формы заполнения, ...
 KILLFIND ATOM 's user avatar
0 голосов
0 ответов
51 показ

слайдер Swiper при клике на кнопки next / prew выделяеться текст заголовка

слайдер Swiper при клике на кнопки next / prew выделяться текст заголовка. Не могу понять из-за чего происходит выделение текста. Тут можно глянуть баг долистав до товаров. https://dmitry-rogg.vn.ua/...
Дмитрий's user avatar
0 голосов
1 ответ
22 показа

CSS Взаимосвязаные <div> по ширине, возможно ли?

Есть вот такая всевдо таблица выполненная на <div> элементах .se_list{ position: relative; width: 100%; max-width: 600px; font-size: 20px; } .se_item{ position: relative; ...
BlackStar1991's user avatar
0 голосов
1 ответ
93 показа

Как сделать такой двухколоночный блок?

[![ .section__product-items { column-count: 2; width: 900px; } <div class="section__product-items"> <div class="section__product-item"> <img src="" alt=""> <...
Aноним's user avatar
0 голосов
1 ответ
23 показа

нужно задать число в сессию после чего число из списка должно быть не активным

Краткое условие Компьютер должен загадать число от 1 до 10; 2. Варианты ответов выводим циклом через select 3. Даем три попытки, и каждый раз делаем не активную предыдущую попытку; ` <form ...
zarina's user avatar
  • 39
0 голосов
1 ответ
79 показов

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

.preview__items{ display: flex; } .preview__item + .preview__item{ margin-left: 30px; } .color__block{ width: 350px; height: 256px; background-color: #D48A5C; top: -14px; } <...
Aноним's user avatar
0 голосов
1 ответ
44 показа

как поставить обьект в вниз до конца

Не могу поставить изображение в конец вниз попоробовал clear получилось поставить вниз но изображение не закрепляется в display: fixed; Html <div id="lft"> <a href="#"...
Человек's user avatar
0 голосов
1 ответ
134 показа

Что такое микс в БЭМ?

Объясните пожалуйста, что такое МИКС в БЭМ, зачем и когда его использовать. Если не сложно, объясните для чего МИКС использовался в коде: <main class="page"> <section class="...
GIONRAIG's user avatar
1 голос
1 ответ
79 показов

Что такое в keyframes entry и exit?

В демо демонстрации Chrome нашёл такой код: @supports(animation-timeline: view()) { @keyframes fade-in-on-enter--fade-out-on-exit { entry 0% { opacity: ...
Михаил Камахин's user avatar
0 голосов
3 ответа
71 показ

Как сверстать сетку с «выпавшими», пустыми элементами?

Коллеги, прошу вас помочь мне с идеей как сверстать сетку, у которой есть пустые ячейки без контента. САБЖ: Вот макет секции. Секция будет заполняться из админ панели. Т.е. все ячейки по порядку. Т.е. ...
Polina's user avatar
  • 336
1 голос
1 ответ
31 показ

Глитч CSS spin coin анимации в браузере Safari

Когда анимация доходит до гурта (край монеты), в Safari анимацию потряхивает. Я пробовал включить вендорные префиксы -webkit везде, где только можно, но не помогло. Пробовал translateX заменить на ...
Alex Flow's user avatar
  • 171
2 голоса
1 ответ
101 показ

Как правильно делать такую форму регистрации? [закрыт]

<form action="" method="get"> <p> <label for="name">Имя:</label> <input type="text" name="name" id="name" required> </p> <p> <label for="...
Aноним's user avatar
0 голосов
0 ответов
35 показов

Не работает Splide при выгрузке сайта через хостинг. Локально все работает

<script src="node_modules/@splidejs/splide-extension-auto-scroll/dist/js/splide-extension-auto-scroll.min.js"></script> <script> const splide = new Splide( '.gallery', { ...
Anna's user avatar
  • 1
0 голосов
2 ответа
48 показов

Как поменять цвет со стандартного черного на белый и убрать opacity в свайпере в min.css?

const swiper = new Swiper('.swiper-container', { // Цикличность loop: true, // Пагинация pagination: { el: '.swiper-pagination', clickable: true }, a11y: { ...
Aноним's user avatar
0 голосов
1 ответ
38 показов

Улетели кнопки свайпера на самый верх макета, как это можно исправить?

const swiper = new Swiper('.swiper-container', { // Optional parameters direction: 'vertical', loop: true, // If we need pagination pagination: { el: '.swiper-pagination', }, // ...
Aноним's user avatar
1 голос
1 ответ
140 показов

Как сделать такой слайдер на чистом Html css?

[![ .slider{ width: 1366px; height: 569px; overflow: hidden; } .middle{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .navigation{ display: flex; position: ...
Aноним's user avatar
0 голосов
0 ответов
33 показа

CSS Grid Layout Resize React

Не понимаю, как можно добиться такого поведения колонки, чтобы она заполняла все возможное место, забирая место пустой колонки. При этом чтобы была полная адаптивность, при изменение размеров Я ...
Алексей's user avatar
0 голосов
2 ответа
35 показов

Как изменить цвет картинки, сделанной кнопкой в html, скаченного с макета?

.section__video{ position: relative; z-index: 1; } .link__video{ position: absolute; top: 50%; left: 50%; z-index: 2; } .link__video:hover{ color: #00B2A0; } <div class="section__video"> &...
Aноним's user avatar
1 голос
2 ответа
72 показа

Функция Animate() -- объединяет Смещение, Размеры, Непрозрачность, Вращение

BOUNCE Здесь подключена функция: function Animate(a,b,c,d,e,g,h,k) { var l="#"+a, f={}; ""!=b&&(f.left=b); ""!=c&&(f.top=c); "&...
serega da's user avatar
0 голосов
0 ответов
39 показов

Как выровнить отступы между картинок чтобы они встали ровно при display: flex;

.section__photo { display: flex; flex-wrap: wrap; padding-bottom: 73px; width: 1280px; } .section__photo-gallery{ padding-bottom: 20px; padding-right: 20px; position: relative; } ....
Aноним's user avatar
1 голос
3 ответа
55 показов

Добавлять тег <br> перед определенным словом если оно присутствует

Если в блоке price присутствует предлог "до", то необходимо добавлять перед ним тег br для переноса на новую строку. Как это можно реализовать? Контент в блоке может быть разным. .items {...
npm11's user avatar
  • 13
0 голосов
0 ответов
62 показа

Как наложить rgba фон на картинку

.section__gallery { padding-bottom: 50px; } .section__gallery-title { color: #01353E; font-family: Raleway; font-size: 48px; font-style: normal; font-weight: 600; line-height: normal; ...
Aноним's user avatar