Раздвижная дверь с хвостиком

У меня есть <H2> с фоном со скругленными углами. Я ищу способ создать линию 1px, которая перемещается от коробки к концу контейнера справа. Есть у кого-нибудь идеи?

Не могли бы вы быть более конкретными? Вертикальная линия? Что движется изнутри H2 в конец?

— 09.01.2009 22:19

css

09.01.2009 22:16

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

259

Ответы 2

Включите линию в фоновое изображение

Ах да, а содержимое h2 динамично по длине, а не по высоте. Я могу сделать фоновое изображение, но мне нужно как-то отделить его от коробки.

— 09.01.2009 22:24

09.01.2009 22:22

Что ж, я наконец сдался и воткнул несколько div в свой h2. :(

CSS

#content h2 {
    background: url(../images/bg-page-title.png) -900px 0px no-repeat;
    font: 1.4em Georgia, Times, Arial bold;
    height: 40px;
    margin: 0px 20px;
    text-transform: uppercase;
}

#content h2 .head {
    background: url(../images/bg-page-title.png) no-repeat;
    float: left;
    padding: 8px 20px;
    height: 100%;
}

#content h2 .tail {
    background: url(../images/bg-page-title.png) -857px 0px no-repeat #ffffff;
    float: left;
    height: 100%;
    width: 15px;
}

HTML

<h2>
    <div class = "head">Find A Job</div>
    <div class = "tail">& nbsp;</div>
</h2>

09.01.2009 22:39

Другие вопросы по теме

Как создать div с "ограниченным фиксированием" с помощью HTML и JavaScript?

Выровнять текст в HTML / XHTML TextArea

Как выровнять основной контент по верхнему и нижнему колонтитулам

Ищете шаблон CSS с 3 столбцами, который имеет эти функции

CSS / Javascript для принудительного размещения строки таблицы html в одной строке

Зачем использовать таблицы для структурирования макета?

Как написать панель предварительного просмотра (мастер / деталь) с помощью HTML и CSS

Гиперссылки в тексте, показываемые Internet Explorer без следующего пробела. В чем может быть причина? ЮЙ?

Javascript / xhtml - определение общей ширины содержимого в div с помощью overflow: hidden

Проблема с цветом фона и Google Chrome

Раздвижная дверь с хвостиком

Ответы 2

Другие вопросы по теме

Похожие вопросы