Красивые рамки для информации на сайте

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Здравствуйте, друзья! Как разместить какую-либо важную информацию на сайте так, чтобы она выделялась и чтобы ваши читатели обратили на неё внимание в первую очередь? Один из многих способов решения этого вопроса мы сейчас рассмотрим. Скорее всего, Вы уже неоднократно видели такое, путешествуя в Сети, на многих сайтах. Конечно же - это применение таблиц или рамок.

В этих рамках можно разместить как важную информацию и какие-либо предупреждения безопасности, так и исходный HTML-код. Рамки для наглядности можно заполнить каким-либо цветом и добавить изображение (логотип) в соответствии с темой предлагаемой информации.

Демо-примеры:

Так выделяем важную информацию.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.

В таком блоке располагаем какую-либо информацию.

All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

Так можно оформить код.

.ienlarger a span
{
position: absolute;
display: none;
color: #FFCC00;
text-decoration: none;
font-family: Arial, Helvetica, Sans-serif;
font-size: 13px;
background-color: #000000;
font-weight: bold;
}

Исходники (36 кб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.

Для того, чтобы осуществить этот прием на своем сайте, необходимо выполнить следующее:

1. Скачать архив с материалом, распаковать в текущую папку, открыть в браузере файл demo.html и проверить всё ли работает.

2. Нижеприведенный код стилей вставить между тегами style в разделе head или в файл стилей вашего сайта:


/* Рамки для информации */

.vazhno, .kod, .info 

{

 margin: 10px 50px;

 padding: 15px 20px 15px 80px;

 border: 1px solid #999999;

 border-radius: 10px;

 -moz-border-radius: 10px 10px 10px 10px;

 box-shadow: 2px 2px 3px #999999;

 -moz-box-shadow: 2px 2px 3px #999999;

 -webkit-box-shadow: #999 2px 2px 3px;

 background-position: 10px 50%; 

 background-repeat: no-repeat;

 position: relative;

 text-align: justify;

 }

 .vazhno 

 {

 background-color: #FFFAFA;

 background-image: url("img/1.png");

 }

 .info
 
 {

 background-color: #F5F5DC;

 background-image: url("img/2.png");

 }

 .kod
 
 {
 
 background-color: #F0FFF0;

 background-image: url("img/3.png");

 }

Все параметры объяснять не буду, только основные, наиболее доступные:

Радиус закругления таблицы (в нашем случае 10px). Можно выставлять в процентах, только закругление будет происходить немного по другому сценарию.

Фоновые цвета рамок. Их можно заменить по вашему вкусу.

Пути к изображениям логотипов. Картинки нужно иметь с прозрачным фоном и загрузить в папку img вашего сайта.
Чтобы убрать фон картинки, можно воспользоваться онлайн-сервисом
//www.pixlr.com/editor/?loc=ru
А если вовсе не желаете их выводить, просто удалите полностью строку с background-image.

3. А этот код располагайте между тегами body:

<div class="vazhno">Так выделяем важную информацию</div>
<div class="info">В этом блоке даем какую-то информацию</div>
<div class="kod">А так оформляем код</div>

В результате этих нехитрых действий Вы будете иметь такие-же красивые рамки, как в моём демо-примере. Желаю Вам успехов в освоении материала и в развитии личных проектов. Ваш Л.М.

Ваше мнение по материалу, изложенному на сайте

Служба поддержки