@freeman0204

Как сделать такие заголовки под любую ширину и цвет?

Код Кроме палочек по бокам на концах палочек должны быть круги. Как их можно сделать?
Возникает несколько нюансов в создании универсальности такого заголовка:
- Нужно что бы он был по центру.Когда заголовок по умолчанию блок то текст алигн центр работает. Но что бы координаты от самого заголовка надо дать ему дисплей инлайн блок но тогда он не будет по центру, если только задать родителю текст алигн центер что не совсем хорошо, так как он все выровняет по центру что может.
- Обычно такие заголовки бывают разных цветов.
- Так как текста в заголовках может быть по разному то длинна палочек разная

Задача в том что бы сделать универсальную фиговину с этих палочек в двух цветах и что бы ширина автоматически менялась в зависимости от ширина заголовка.

Как лучше это реализовать?
  • Вопрос задан
  • 219 просмотров
Решения вопроса 4
serjikz
@serjikz
web-developer
Как вариант - рисовать 2 svg, которые будут как раз с кружками и палочками (ну или png если с svg не сложилось), далее через inline-block делаем и :before и :after, им ставим vertical-align:middle; а внутри самого заголовка используем span у которого всё тоже самое. Затем у before и after прикиньте максимальную и минимальную ширины (минимальная - сам шарик можно взять) и задавайте бекграунд с вашими картинками палочки и шарика чтоб были относительно верха и низа по центру ну и у одного фон слева, у другого справа. Должно всё заработать (хотя с шириной фиг знает, надо пробовать).
Ответ написан
Комментировать
@ArturArturov
линии без кружков:
h2 {
  position: relative;
  display: inline-block;
  background: #fff;
  padding: 0 20px;
}

h2:before {
  content: '';
  position: absolute;
  width: 200%;
  height: 2px;
  background: red;
  top: 15px;
  left: -50%;
  z-index: -1;
}

для кружков надо добавить структуры. если кружки только по краям (слева и справа), то ничего сложного.
добавить 1 див
Ответ написан
Комментировать
AnnTHony
@AnnTHony
Интроверт
Ответ написан
Комментировать
politon
@politon
HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
Как вариант изватиться ;) https://jsfiddle.net/joomla/vj9Lzutj/
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
SPIKS Санкт-Петербург
от 70 000 до 90 000 ₽
PERX Нижний Новгород
До 50 000 ₽
move2usajobs.com LLC Лос-Анджелес
от 2 000 до 4 000 $