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

Очень просто
Задача должна решаться просто. Абсолютно позиционируем заголовок в левый верхний угол ( чтобы он не занимал пространства по вертикали) и вращаем его вокруг левого верхнего угла на 90 градусов с помощью трансформаций CSS. Круто, но есть проблемка: большинство браузеров поддерживают абсолютное позиционирование, но не трансформации. В таких браузерах заголовок будет выглядеть очень коряво, перекрывая содержание блока.

Определяем способности браузера
Самый лучший способ решить задачу - использовать Modernizr для определения способности браузера поддерживать нужные опции. Вот как будет выглядеть код CSS:

aside {
    display: block;
    position: relative; 
    margin: 40px 0;
}
 
aside h3 {
    font: bold 12px Sans-Serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: #369;
    color: #fff;
    padding: 5px 10px;
    margin: 0 0 10px 0;
    line-height: 24px;
}
 
/* Имя класса для Modernizr */
.csstransforms aside {
    border-left: 34px solid #369;
/* Оставляем слева немного пространства */
    padding-left: 10px;
}
.csstransforms aside h3 {
 
    /* Абсолютное позиционирование не укорачивает вертикальное пространство */
    position: absolute;
    top: 0;
    left: 0;
     
    /* Рамка является новым фоном */
    background: none;
     
    /* Вращение от верхнего левого угла (не по умолчанию) */
    -webkit-transform-origin: 0 0;
    -moz-transform-origin:    0 0;
    -ms-transform-origin:     0 0;
    -o-transform-origin:      0 0;
     
    -webkit-transform: rotate(90deg);
    -moz-transform:    rotate(90deg);
    -ms-transform:     rotate(90deg);
    -o-transform:      rotate(90deg);
}

Недостатком такого решения остается тот факт, что если заголовок длиннее доступного пространства, он не будет размещаться по высоте блока. Для устранения придется использовать JavaScript.

Добавлено: 09 Мая 2018 10:12:12 Добавил: Андрей Ковальчук Нравится 0

Добавить