Раздвижные двери на css

Раздвижные двери css – данный термин характеризует возможность создать резиновый по ширине блок с закругленными краями, как правило. Отличительная особенность: нам потребуется дополнительный вложенный элемент, этот дополнительный фоновый элемент будет сдвинут на 20px вправо; для двух элементов будем использовать одно фоновое изображения, но с разным фоновым позиционированием (background-position).

Примечание: в случае значения relative, left отсчитывается от левого края исходного положения элемента.

Итак, вот наше фоновое изображение:

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

HTML

<div id="sliding_door0">
    <div id="sliding_door1">
        <div id="sliding_door2">
            Привет Медвед
        </div>
    </div>
</div>

CSS

#sliding_door0 {text-align: center; }

#sliding_door1,#sliding_door2{
    display: inline-block;
    height: 49px;
    line-height: 49px;
    background: url('images/sliding_doors_css.png');
}

#sliding_door1 {
 }

#sliding_door2 {
     padding-right: 20px;
     background-position: 100% 0;
     position: relative;
     left:20px;

     color:#555;
     font-weight: bold;
}

Раздвижные двери в CSS, пример: