Создание div с необычными рамками: HTML, CSS и jQuery

Быстрый ответ

Для того чтобы поместить некий текст в рамку с использованием CSS, вполне возможно использовать псевдоэлементы ::before или ::after, сочетая их с свойством content. Задайте текст над границей элемента следующим образом:

.bordered-text::before {
  content: "Ваш текст";
  position: absolute;
  top: -1em; left: 10px;
  background: inherit;
}

Приложите данный стиль к элементу, на который вы планируете добавить рамку:

<div class="bordered-text">Содержимое</div>

При необходимости произведите корректировку позиционирования (top) и фона (background) так, чтобы они совпадали с общим дизайном.

<fieldset> и <legend>: Семантика и организация

Основы HTML

Рекомендую использовать теги <fieldset> и <legend> для создания структурированного и вместе с тем доступного дизайна. Это становится особенно актуальным в тех случаях, когда вам необходимо интегрировать текст с рамками, сохраняя при этом семантику HTML в неизменном виде:

<fieldset>
  <legend>Ваш заголовок</legend>
  <!-- Здесь размещается ваше содержимое -->
</fieldset>

Произведя настройку <fieldset> с помощью CSS, вы сможете управлять визуализацией рамки, тогда как <legend> позволит вам контролировать заголовок.

Подробнее об этом расскажет наш спикер на видео

Улучшение читаемости: отступы, отрицательные отступы и другое

Присвоение свойству display: inline-block для текста поможет нормализовать его ширину. Заголовкам, с отступом margin-top, выраженным в единицах em и соответствующим размеру шрифта, это добавит визуальное соответствие. Всё это вместе с небольшим CSS отступом создаёт иллюзию рамки.

Для предотвращения "столкновений" на веб-странице можно ещё добавить фоновые изображения для div или использовать относительное и абсолютное позиционирование для элементов, помещённых внутри div.

Анимация <fieldset> в jQuery

Анимация рамки при клике

Дополнительную анимацию можно использовать для украшения вашего дизайна. jQuery предлагает вам возможность анимации <fieldset>:

$("fieldset").on("click", function() {
  $(this).hide().fadeIn("slow").css("border-color", "red"); // Теперь рамка стала красной...
});

При клике на элемент будет меняться цвет его рамки на красный, что сделает дизайн страницы более интерактивным.

Визуализация

Воспринимайте взаимодействие HTML-содержимого, рамки и текста через следующую аналогию:

📑 Документ (HTML-элемент)
📋 Поднос (Рамка)
🏷️ Бирка (Текст, создающий впечатление части рамки)

Используя CSS, создайте эффект помещения текста в рамку, как если бы бирка выглядывала из-под подноса:

.clipboard {
  border: solid 2px black; /* 📋 Рамка */
  position: relative;
}
.clipboard::before {
  content: 'Важная заметка'; /* 🏷️ Текст */
  position: absolute;
  top: -10px; /* Бирка находится за рамкой */
  left: 10px;
  background: white; /* Чистый белый фон */
  padding: 2px;
}

Визуальный результат создаёт иллюзию текста, интегрированного в рамку, и в итоге выглядит как заметка на подносе.

Разнообразие возможностей

Отрицательные отступы

Используйте отрицательные отступы, чтобы добавить разнообразия в оформление границ:

h1 {
  margin-top: -10px; /* Заголовок поднимается вверх */
  background: #FFFFFF; /* Поддержание чистоты и порядка */
}

Формирование внешнего вида с помощью flex-direction

Создайте аккуратный современный дизайн, используя свойство flex-direction в flexbox для вертикального размещения элементов.

Интеракция с псевдоэлементами

Усилите дизайн, используя псевдоэлементы ::before и ::after:

.bordered-text::after {
  content: '';
  position: absolute;
  height: 3px;
  background-color: black;
  width: 100%;
  top: 10px;  /* Стабильность */
}

Тонкая черная линия под текстом сделает его более выразительным.

Сохранение видимости текста, даже в случае скрытия родительского элемента

Для сохранения видимости важных элементов, например, тега h1, даже когда родительский элемент скрыт, есть следующий приём:

$('h1').on('click', function() {
  $(this).detach().prependTo('body').show(); // Перемещаем в начало документа
});

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

Полезные материалы

1. Разнообразие форм CSS | CSS-Tricks — изучите разные способы работы с формами в CSS для создания уникального дизайна.
2. ::after – CSS: Каскадные таблицы стилей | MDN — подробный обзор псевдоэлемента ::after.
3. Границы в CSS | W3Schools — базовые принципы работы с границами в CSS для начинающих.
4. Мгновение... | Codepen.io — коллекция новаторских и креативных эффектов границ и текста на CSS с примерами на Codepen.