Рисуем рамку для страницы на CSS
Сегодняшний рабочий день выдался просто кошмарным. Целый день пришлось беседовать с удаленными пользователями и решать их проблемы. Вроде напрягаться не приходилось, но вымотался ужасно. Сначала даже ничего не хотел писать в блог, но потом передумал и решил поведать тебе о небольшом CSS трюке. С его помощью ты сможешь легко и не принужденно сделать рамку на всю страницу. Причем эта рамка будет отображаться всегда. Независимо есть какой-нибудь контент на странице или нет. Никакого JavaScript не будет, все крутится вокруг одного лишь CSS.
Рамка для body
На первый взгляд может показаться, что ничего сложного в этой задаче нет. Достаточно применить соответствующий стиль к селектору body и готово. Например:
<body style="border: 10px solid red"> <p>Мой текст ….
После переваривания этого кода любой браузер обрамит текст «Мой текст» в рамку красного цвета и все. В результате на экране отобразиться малюсенький прямоугольник с текстом. Как видишь, в действительности все не так-то и просто. Для нахождения решения придется немножко подумать.
Псевдоэлементы приходят на помощь
Теперь попробуем подойти к решению с другой стороны. Воспользуемся псевдоэлементами before и after. Опишем несколько стилей:
html:before,
html:after,
body:before {
content:"";
position:fixed;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
border:10px solid red;
}
html:after {
z-index:10;
top:auto;
border-width:0 0 10px;
}
body:before {
z-index:10;
bottom:auto;
border-width:10px 0 0;
}На первый взгляд код может показаться совсем непонятным. На самом деле это не так. Достаточно заглянуть в хелп и прочитать для чего используются псевдоэлементы before и after (первый вставляет контент до элемента, а второй после). На этом непонятки должны пропасть , т.к. в остальном коде я просто указываю координаты, толщину границы, цвет заливки и т.д. Результат кода:
Еще советую тебе обратить на свойство content, которое я использовал при описании стиля оформления к псевдоэлементам. На практике оно редко используется (во всяком случае, я им не пользуюсь), поэтому есть большая вероятность, что ты ранее ты с ним не сталкивался. С его помощью ты можешь добавлять на страницу контент. Ради интереса присвой свойству content произвольный текст и посмотри результат.
| Вложение | Размер |
|---|---|
| PageBordersInPureCSS.zip | 566 байтов |
- Spider_NET's блог
- Войдите или зарегистрируйтесь, чтобы получить возможность отправлять комментарии
- 653 просмотра
Комментарии
2 комментария(ев)Дата: СР, 08/02/2012 - 19:55
Spider_NET углубился в изучения веб-разработки настолько, насколько смог.
Молодца. Продолжай в том же духе =)
Дата: ЧТ, 09/02/2012 - 07:58
Угу, меня прям дурманит запах новых свершений. Никогда не думал, что так проникнусь CSS/JS. Раньше меня эта тема не сильно интересовала.