Два варианта заголовков (на однородном и графическом фоне), которые перекрывают блоки с рамкой.

HTML:

Пример:

На первый взгляд блоки абсолютно одинаковые, но если фон под ними не однородный, то разница становится очевидной.

Заголовок

Описание блока

CSS:

Этот вариант первым приходит на ум, так как очень простой. В нем мы делаем рамку для блока, а на заголовок ставим фон и поднимаем его вверх.

Однако если у нас неоднородный фон, такой вариант не подойдет.

Заголовок

Описание блока

CSS:

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

Смотрите также:

Пример анимированного подчеркивания текста с использованием 2-х линий на SVG

Функция на jQuery, которая позволяет скопировать нужный текст в буфер обмена пользователя

Красивый вариант печатающегося текста на JavaScript

Добавить комментарий:

Ваш комментарий отправлен!