Вертикальный заголовок
Создать вертикальный заголовок через CSS – считаете невозможным и прибегните к графике? Не стоит, ведь это реально!
В этом примере я хочу показать, как создать оригинальный и необычный заголовок, который будет находиться слева от статьи, вертикально. Раньше, что бы сделать это, приходилось создавать изображение, ведь сделать текст вертикальным было невозможно. После появления свойства transform, такая вещь стала возможной. Давайте рассмотрим, как это сделать.
vavik96.com
HTML
<h1>Charlie Gooch</h1> <div id="info"> Charles Furman Gooch (June 5, 1902 – May 30, 1982) was a professional baseball player. He was a first baseman and third baseman for one season (1929) with the Washington Senators. For his career, he compiled a .281 batting average in 57 at-bats, with five runs batted in. He was born in Smyrna, Tennessee and died in Lanham, Maryland at the age of 79. </div>
CSS
#info {
padding-left:5px; /* Внутренний отступ слева */
background: #E4E4E4; /* Фон */
height:100%; /* Высота */
color: #7F7F7F; /* Цвет */
}
h1 {
margin:0; /* Внешний оступ 0 */
text-transform: uppercase; /* Все буквы заглавные */
-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);
position: absolute; /* Абсолютное позиционирование */
padding:3px; /* Внутренний отступ */
background: #DBDBDB; /* Фон */
color: #969799; /* Цвет */
font: 15pt Verdana; /* Размер, семейство шрфита */
}
Вот и все. Давайте разберем CSS код. Для тега мы добавили свойство transform, с параметрами в 90 градусов, что переворачивает тег на 90 градусов. Добавили параметры для трансформации по умолчанию – 0 0. Добавили абсолютное позиционирование, от чего блок занял столько место, сколько было написано текста. Если убрать его, то высота будет 100%. Остальные свойства по вкусу, то есть их можно изменить.
Источник
