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

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

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

Изменение ширины блоков

Имеется три колонки(блока) одинаковой ширины, как сделать, что бы при изменении размеров окна уменьшалась сперва ширина правого блока до ширины контента внутри него и после начать изменять ширину ...
helldrg's user avatar
  • 1,139
1 голос
1 ответ
36 показов

CSS эффект для текста

Подскажите пожалуйста, как реализовать такой эффект в CSS, и если можете, подскажите как такой эффект называется, я даже не до конца понимаю "как его гуглить"
Angus123's user avatar
  • 2,535
0 голосов
0 ответов
34 показа

Как плавно заполнить background у div-а?

Есть блок, который на странице выглядит так: Html выглядит так: <div class="relative rounded-full rating_border overflow-hidden h-9 bg-grey-100 mb-3"> <div class="bg-primary ...
F. Tomas's user avatar
  • 743
1 голос
1 ответ
43 показа

Подскажите пожалуйста, с чем связано не ровное увеличение картинки при наведении?

.cards { display: grid; gap: 40px; grid-template-columns: repeat(4, 245px); grid-template-rows: repeat(1, 210px); justify-content: space-between; align-items: center; } .post_card { ...
imo717's user avatar
  • 23
0 голосов
1 ответ
39 показов

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

Объясните, пожалуйста как работает градиентный текст? background: var(--third-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; Что записывается в background? ...
mindcontrol's user avatar
0 голосов
0 ответов
38 показов

при просмотре на айфоне видеофон с градиентом ведёт себя некорректно

window.addEventListener('DOMContentLoaded', () => { const menu = document.querySelector('.nav-menu'), menuItem = document.querySelectorAll('.nav-menu__button'), hamburger = document....
Abdul-Malik Ibragimov's user avatar
1 голос
0 ответов
33 показа

css: при использовании двух div блоков в контейнере с column-count = 2 блоки выводятся друг за другом вертикально, а не горизонтально

При использовании двух div блоков в контейнере с column-count = 2 блоки выводятся друг за другом вертикально, а не горизонтально .blocks { width : 100%; column-count : 2; ...
Zhihar's user avatar
  • 36.9k
0 голосов
1 ответ
31 показ

Вёрстка адаптивной формы

Нужна блочная адаптивная верстка. На фото представлено то, как это должно быть с требованиями: Не получается сделать именно верхний вариант: <!DOCTYPE html> <html> <head> <...
Марцелло's user avatar
0 голосов
2 ответа
35 показов

текст с обводкой на при просмотре на телефоне видны посторонние линии, а при просмотре на компьютере всё выглядет нормаль

div { background: #e0dddd; } .title__publication { webkit-text-fill-color:#c86acf; -webkit-text-stroke: .1rem white; color: #c86acf; font-weight: 700; font-family: 'Rubik Mono One', sans-...
Abdul-Malik Ibragimov's user avatar
0 голосов
1 ответ
25 показов

Что-то не импортируются таблицы css

Хочу объединить в style.css все другие таблицы (header,nav и тд) и подключать только его к html, однако есть какая-то ошибка которую я не вижу, а также имеется ошибка в консоли браузера. Путь к файлам ...
Chel ti's user avatar
  • 15
1 голос
1 ответ
22 показа

::before появляется неполностью

Есть , к нижней части которого нужно добавить svg картинку, однако при добавлении её на left: 0; bottom: -6px; (сама картинка высотой 6px), то она не появляется и добавляется вертикальный скрол. Вот ...
Chel ti's user avatar
  • 15
0 голосов
0 ответов
15 показов

flex-shrink не работает корректно с img в WebKit (движок Safari)

У меня есть страница где должны быть расположены элементы: картинка и тег form с полями. Задана ширина 40% для картинки и 60% для формы и соотвествующий gap для расстояния между ними. При уменьшении ...
Daniil Screpchenko's user avatar
0 голосов
0 ответов
20 показов

Проблема с отоброжением при смене языка

проблема в следующем есть выпадающее окно для выбора языка сайта, при изменении всё флаги при выборе ведут себя так как требуется, но при выборе французского он в диапазона 1021-1199 падает вниз, ...
aleks92's user avatar
1 голос
1 ответ
47 показов

Как сделать такую полоску над картинкой?

Добрый вечер! Ломаю голову над этим чудом и не пойму как сделать такую полосу над картинкой.
Andew's user avatar
  • 29
1 голос
1 ответ
41 показ

Как сделать такой изогнутый блок?

Как этот желтый прямоугольник также выгнуть в css?
Andew's user avatar
  • 29
1 голос
1 ответ
34 показа

Почему height:100% не работает в данном случае? [закрыт]

Вот у меня есть контентная часть, которую я с помощью стиля 'flex' расположил автоматически между хедером и футером(в нем пока нет контента), мне нужно расположить секцию welcome до конца экрана, я ...
Matvey Androsyuk's user avatar
0 голосов
0 ответов
6 показов

Цвета из конфига tailwind не работают при разрешение 640px

Всем привет. Решил попробовать tailwind. Суть данных кнопок показывать какой компонент надо отображать. Но когда я сжимаю разрешение до 640px в ширине, то из кнопок пропадает кастомные цвета. Именно ...
Sherbakov's user avatar
-1 голос
1 ответ
51 показ

Растянуть блок на всю высоту родителя

Как растянуть блок main__container на всю высоту родителя main, чтобы сетка grid заполнила весь main? HTML <div class="wrapper"> <header class="header"> ...
Rooter's user avatar
  • 1
0 голосов
0 ответов
15 показов

Есть ли в Angular библиотека для создания собственного редактора, такого как CodePen или StackBlitz?

Хочу в свой Angular проект внедрять редактор для кодов на разных языках, например JS, TS, PHP, Python и так далее. Чтобы была кнопка Run для старта кода и Preview/Output для просмотра результата․ ...
Gegham Harutyunyan's user avatar
0 голосов
1 ответ
23 показа

как сделать так чтобы при нажатии на поиск исчезли блоки

Добрый день или вечер проблема с JS мне надо чтобы при нажатии на input из div class=lil скрыл div class=ResContent HTML <!DOCTYPE html> <head> <link rel="stylesheet" href=&...
Sevises MOCT's user avatar
0 голосов
1 ответ
69 показов

css: плавное "выдвигание" созданного блока

подскажите, можно ли как-то реализовать плавное "выдвигание" <div /> блока (т.е. появление с 0 высоты до исходной высоты под каким-то другим блоком), если блок не присутствует ...
Zhihar's user avatar
  • 36.9k
0 голосов
0 ответов
9 показов

Не отображается элемент nav.menu:before [дубликат]

HTML: body{ width: 100%; height: 100%; background: #48a37d; } nav.menu { width: 960 px; margin: 0 auto; } nav.menu:before { content: ''; display: block; height: 50 px; width: 100%; position: ...
Benedict's user avatar
1 голос
3 ответа
67 показов

Изображение для топ бордера

введите сюда кодУ меня есть контейнер, на верх этого контейнера в виде рамки мне нужно вставить изображение не меняя его основной стиль, я пытался вставить через border-top и background-image: но не ...
Куба Брежнев's user avatar
0 голосов
2 ответа
63 показа

css: адаптивный размер текста (в зависимости от ширины блока)

Есть вот такой код в котором в одной полосе выводится 2 блока. Задача такая: левый блок занимает всё место, которое не занимает правый блок (пропусков между блоками нет) размер правого блока не ...
Zhihar's user avatar
  • 36.9k
0 голосов
0 ответов
30 показов

Странные селекторы класса

Часто встречаю странные селекторы .car.active - это что такое?
user avatar
0 голосов
1 ответ
19 показов

Как сделать контейнер имел max-width таким, чтобы левая часть была с отступом, а правая шла через весь экран

Нужно, чтобы грузовик касался правой части экрана, но при этом, чтобы левая часть с текстом имела такой же отступ как и у header а, нужно сделать это без позиционирования грузовика, контейнер имеет ...
Narek Khachikyan's user avatar
0 голосов
1 ответ
16 показов

как в css для grid-а плюсануть к fr pixel

(два блока) вот так не работает grid-template-columns: calc(2fr + 8px) 1fr; grid-template-columns: (calc(2fr + 8px)) 1fr;
Armen's user avatar
  • 1,513
-1 голос
1 ответ
38 показов

анимированное Меню бургер

Не получается создать значок в форме X, как можно исправить? .navbar__hamburger { display: flex; flex-direction: column; justify-content: center; ...
user avatar
0 голосов
0 ответов
22 показа

aos.css как разжать файлы? плагин Beautify не работает!

[data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-...
Александр Новиков's user avatar
0 голосов
2 ответа
38 показов

CSS-анимация с нажатием "Наведи на меня"

Как сделать анимацию с нажатием "Наведи на меня", чтобы вскочила "Подсказочка!" с блоком? Требуется решение БЕЗ JavaScript .block { position: absolute; width: 600px; ...
Kirill Novikov's user avatar
1 голос
1 ответ
33 показа

Углы для контейнера

Очень хочу сделать вот такую рамку для своего контейнера но уже 4 день ничего не выходит. Вот мой код что я уже смог написать border: 5px solid #FFCF6E; clip-path: polygon(20px 0, calc(100% - 20px) ...
Куба Брежнев's user avatar
0 голосов
1 ответ
38 показов

Почему при изменении позиции меняется ширина у абсолютно позиционированного элемента?

Есть такой pen: https://codepen.io/stn28/pen/ExepRrp Кому неудобно лазить на сторонние ресурсы, вот пример: * { box-sizing: border-box; } .wrapper { position: relative; border: 1px solid ...
28 Lucky's user avatar
0 голосов
1 ответ
31 показ

CSS Как поставить элемент по центру экрана, что б не влияли на другие элементы?

Есть вот такой упрощенный пример body { margin: 0; width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; background-color: #000; overflow: ...
BlackStar1991's user avatar
0 голосов
1 ответ
76 показов

По стандарту html, в ul можно вложить только списки li?

По стандарту html w3c в ul на первом уровне вложенности могут быть только списки li? Или можно вложить любой другой элемент и это не будет ошибкой? Просто случайно заметил что у меня в коде в ul ...
28 Lucky's user avatar
0 голосов
1 ответ
27 показов

Выбрать элемент селектором CSS

Имеется такая структура: <label class="agreement__label"> <span class="wpcf7-form-control-wrap" data-name="acceptance-311"> <span class="wpcf7-...
Pollux's user avatar
  • 2,270
0 голосов
1 ответ
30 показов

Ширина правого блока в приоритете

.gl { display: flex; } .right { width: 90%; } <div class='gl'> <div class='left'>sssss sss ssd sdas sss sss ssssd s dasss sssss sssd sda sssss ssss ssd sdas </div> <...
Aleks's user avatar
  • 123
2 голоса
1 ответ
36 показов

Не работают stroke-dasharray, stroke-dashoffset

Все привет! Столкнулся с проблемой работы с svg path, ранее использовал для прорисовки линий stroke-dasharray, stroke-dashoffset - и все работало, но здесь что-то пошло не так и эти свойства не ...
Serhiy Gerych's user avatar
0 голосов
1 ответ
43 показа

Липкий первый столбец, липкая шапка и горизонтальный скролл в таблице

Как сделать липкие шапку и первый столбец (полностью первые ячейки в tbody и в thead) таблицы с горизонтальным скроллом? Без ограничений в высоте таблицы <!DOCTYPE html> <html lang="en&...
Pav222's user avatar
  • 1
0 голосов
1 ответ
29 показов

Не работает :last-of-type

В htm моя сетка построена так - в footer в блоке nav, я создал список из однотипны элементов, также они еще являются ссылками <nav class="footer__links"> <ul class="...
Вячеслав's user avatar
1 голос
1 ответ
85 показов

Как обратиться к элементу внутри элемента?

Как обратиться к тегу li, который находиться в div class="group"? Надо к каждому элементу li придать одно свойство через CSS, но без придачи class к каждому элементу li На сайте есть и ...
Артём's user avatar
0 голосов
0 ответов
27 показов

Самый оптимальным вариантом создания сайдбара по прежнему является float?

Ребята, создавать сайдбары все также лучше с помощью float-ов? Flex'ы не лучшее решение для них, а грид не такой кроссбраузерный как float и гриды конечно для более сложных случаев. Я прав, или мое ...
28 Lucky's user avatar
0 голосов
0 ответов
7 показов

Как сделать header и footer с разными повторяющимися по горизонтали background картинками?

<!DOCTYPE html> <html> <head> <style type="text/css"> #title { top:0; height:20%; background-...
Ангел.exe's user avatar
0 голосов
1 ответ
16 показов

Выбрать определенный элемент селектором css

Подскажите css селектор, чтобы выбрать все ссылки, кроме первой ("Страница 1"). Html структуру менять нельзя. <div class="breadcrumbs-wrapper"> <div class="...
Pollux's user avatar
  • 2,270
0 голосов
0 ответов
20 показов

Неравномерное распределение текста при разбиении на колонки

Можно ли при разбиении текста на колонки (column-count) управлять равномерностью распределения текста по высоте? В частности, нужно чтобы текст не равномерно распределился по двум колонкам (изменив ...
nup's user avatar
  • 1,831
0 голосов
1 ответ
17 показов

Как сделать полупрозрачную внутреннюю рамку у clip-pah элемента?

САБЖ: Есть дизайн у которого есть элементы со сложной формой в виде гексогона или ячейки сот. Внутри этого элемента есть имидж и иной контент. ПРОБЛЕМА: Необходимо сделать полупрозрачный, ...
Polina's user avatar
  • 336
0 голосов
0 ответов
16 показов

как изменить курсор в scss?

Здраствуйте) как изменить курсор на сайте чтобы делал клик по центе? я делаю aimlab на react-е без canvas я хотел изменить курсор на прицел но у меня проблема со кликом для лучшего понимания я ...
Muhammadrizo's user avatar
0 голосов
0 ответов
17 показов

Не работают стили на buttjn в React Native не могу изменить его

Я просто хотел поменять размер текста у кнопки но не получается а также жирность текста. Стили не применяются сколько не пытаюсь import React from 'react'; import { View, Text, Button, StyleSheet }...
Nikemas's user avatar
0 голосов
1 ответ
24 показа

Как убрать нижнюю грань в materialize при нажатии на input

Столкунулся с такой проблемой: при нажатии на <input type="text"/> у этого инпута появляется нижняя бирюзовая грань. Я уже копался в стилях этого инпута, но ничего даже с таким цветом ...
Danoslo 255's user avatar
0 голосов
1 ответ
23 показа

Необходимо перенести выпадающее меню на передний план

Возникла проблема с выпадающем меню, его нужно перенести при нажатии на передний план, но мешает элемент с позиционированием sticky под ним, вот сам сайт - https://0398-46-172-28-69.eu.ngrok.io/, буду ...
Andrey Just's user avatar
0 голосов
1 ответ
42 показа

Почему появляется резкий переход от последнего слайда к первому в Slick Slider?

Столкнулся с проблемой, делаю простой слайдер при помощи Slick Slider и наблюдаю резкий скачек от последнего слайда к первому если ставить режим infinite: true. $('#slick-slider').slick({ ...
Вячеслав Варов's user avatar