Заголовок сбоку от блока

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

 

Очень просто

Задача должна решаться просто. Абсолютно позиционируем заголовок в левый верхний угол ( чтобы он не занимал пространства по вертикали)  и вращаем его вокруг левого верхнего угла на 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.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/-z3Jad3OkX8/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Заголовок сбоку от блока | | 2012-06-19 12:03:53 | | Статьи Web-мастеру | | Сделаем заголовок для раздела сбоку. Причем, выравнивать его будем по левой стороне, а не по верху блока. Очень простоЗадача должна решаться просто. Абсолютно позиционируем заголовок в левый верхний | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: