Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS » Урок CSS 28. Заголовок сбоку от текста
Не нравится(-) -31 Нравится(+)
2-10-2011, 18:56 - OniX (Уроки CSS)
Урок CSS 28. Заголовок сбоку от текста

Снова здравствуйте, уважаемые посетители Российской школы CSS. Сегодня я расскажу вам о том, как создать довольно красивый, эффективный и популярный вид заголовка - боковой. Для разработки элемента нам не понадобится ничего кроме HTML и CSS 3.0.

В данном уроке не будут использоваться какие-либо изображения, так что понадобится только текстовый редактор. Рекомендую пользоваться Notepad ++. Как и в предыдущем уроке создаём в программе два чистых файла: index.html и style.css (в одной папке).
В код html страницы записываем стандартный начальный код для XHTML, содержащий ссылку на файл стилей (style.css):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Заголовок сбоку от текста</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

Далее идет содержание страницы, которое включает в себя заголовок и основное содержание
<div>
          <h1>Заголовок</h1>
          <p>Снова здравствуйте, уважаемые посетители Российской школы CSS. Сегодня я расскажу вам о том, как создать довольно красивый, эффективный и популярный вид заголовка - боковой. Для разработки элемента нам не понадобится ничего кроме HTML и  CSS 3.0...</p>
</div>
</body>
</html>


Теперь реализуем этот алгоритм на практике. Начинаем работу с файлом стилей style.css:
/*
=============================================================
© 2011 CSS-Tricks / Chris Coyier
© 2011 Российская школа CSS (Russian CSS School)

http://www.css-school.ru
Урок CSS 28. Заголовок сбоку от текста
style.css - Набор стилей для урока
=============================================================
*/
body {
   padding: 0 20px;
   font: 16px Georgia, Serif;  
    }

div {
    background:#ffc;
    display: block;
    position: relative;  
    padding: 3em 3.5em .5em .7em;
    margin: 40px;
    overflow: hidden;
    }
    div p {
        margin: 0 0 1em;
        -webkit-transform: translateX(2.5em) translateY(-2em);
        -moz-transform:    translateX(2.5em) translateY(-2em);
        -ms-transform:     translateX(2.5em) translateY(-2em);
        -o-transform:      translateX(2.5em) translateY(-2em);
        transform:         translateX(2.5em) translateY(-2em);    
        }

div h1 {
    font: 16px Georgia, Serif;
    background: #369;
    color: #fff;
    padding: .7em;
    margin: 0;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 1000%;
    -webkit-transform: rotate(90deg) translateX(20px);
    -moz-transform:    rotate(90deg) translateX(20px);
    -ms-transform:     rotate(90deg) translateX(20px);
    -o-transform:      rotate(90deg) translateX(20px);
    transform:         rotate(90deg) translateX(20px);
    -webkit-transform-origin: 1.8em .5em;
    -moz-transform-origin:    1.8em .5em;
    -ms-transform-origin:     1.8em .5em;
    -o-transform-origin:      1.8em .5em;
    transform-origin:         1.8em .5em;
    }


Вот и всё. Надеюсь урок оказался полезным и понятным для Вас. Скачать материалы урока и посмотреть демо можно на этой странице.
Спасибо за внимание!

Автор урока:CSS-Tricks / Chris Coyier (_http://css-tricks.com/13641-sideways-headers/)
Автор перевода: Илья Сальников, Российская школа CSS
Совместимость: Internet Explorer 8 - 9; Mozilla Firefox, Opera, Chrome, Safari.


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 22191 раз(а) и написали 8 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!