Outline рамка поколения CSS3

outlineЗдравствуйте уважаемые читатели с вами снова я постоянный ведущий блога «Профессия веб-мастер» Тригуба Сергей. (Здесь следуют аплодисменты. Шутка :-))

Ну а теперь к делу.

Давненько я уже не продолжал сериал о новых свойствах CSS3. Пора исправить эту оплошность.

Для тех, кто только, что к нам присоединился. Мы уже рассмотрели: прозрачность в css, закруглённые края css, text-shadow, box-shadow

Сегодня очередь свойства под названием: outline

Дословно его можно перевести как «за линией».

Ничего непонятно? Ничего сейчас посмотрите, что оно делает, и сразу все поймете.

Синтаксис outline

1
outline: 2px solid #FF0000

Для реализации примера возьмем синий квадрат:

Html

1
<div class="kvblue"></div>

Стили

1
2
3
4
5
.kvblue{
background:blue;
height:100px;
width:100px;
}

Результат:

Outline рамка поколения CSS3

А теперь применим наше свойство outline

Html

1
<div class="kvblue"></div>

Стили

1
2
3
4
5
6
.kvblue{
background:blue;
height:100px;
width:100px;
outline: 2px solid #FF0000;
}

Результат:

Outline рамка поколения CSS3

Внимательные заметят, что свойство outline копирует функциональность свойства «border». В принципе оно так и есть, но есть отличия.

Outline и Border сходства и расхождения

Сходства:

  • Оба устанавливают границу со всех четырех сторон;
  • Принимают одни и те же параметры;

Расхождения:

  • Outline – не может задавать границу для выбранных сторон, только для всех;
  • Outline – не влияет на ширину и положение элемента на странице; (посмотрим на пример)

Для того, что бы увидеть отличия, нам нужен помощник зеленый квадрат:
Html

1
2
<div class="kvblue"></div>
<div class="kvgreen"></div>

Стили

1
2
3
4
5
6
7
8
9
10
.kvblue{
background:blue;
height:100px;
width:100px;
}
.kvgreen{
background:green;
height:100px;
width:100px;
}

Результат:

Outline рамка поколения CSS3

Теперь применим border: 5px solid #FF0000

Html

1
2
<div class="kvblue"></div>
<div class="kvgreen"></div>

Стили

1
2
3
4
5
6
7
8
9
10
11
.kvblue{
background:blue;
height:100px;
width:100px;
border: 5px solid #FF0000
}
.kvgreen{
background:green;
height:100px;
width:100px;
}

Результат:

Outline рамка поколения CSS3

Меняем border на outline

Html

1
2
<div class="kvblue"></div>
<div class="kvgreen"></div>

Стили

1
2
3
4
5
6
7
8
9
10
11
.kvblue{
background:blue;
height:100px;
width:100px;
outline: 5px solid #FF0000
}
.kvgreen{
background:green;
height:100px;
width:100px;
}

Результат:

Outline рамка поколения CSS3

Видно разницу?

В отличие от рамки border рамка outline не сдвигает рядом стоящие объекты и не смешает объект, к которому применено свойство.

Рамка outline как будто имеет position absolute, то есть просто ложиться поверх нашего квадрата, не зацепая его.

Вот такое удобное свойство и очень простое в обращении.

На этом все. Удачи!!!

С уважением Тригуба Сергей.

Интересное — сотрудник дпс играет в cs

Автор:
Приглашаю присоединиться ко мне в следующих сервисах:
Получайте новые статьи по созданию сайтов на ваш почтовый ящик.

Комментарии Вконтакте:

Комментарии Facebook:

Комментариев6 комментариев

CSS 3 сейчас вообще используют? а то что-то нигде не встречал... или плохо искал.

Интересно тебя читать, хорошо что объясняешь по пунктам и наглядно. Кое что применил и у себя. Вот только не могу понять почему отзывы и разделитель постов налазит на картинку? это уже 2 сайт где я с этим мучаюсь. Поможешь?

Вот видно на картинке i29.fastpic.ru/big/2011/1...10482d354a36.jpg

Добавил рамку, затем немного растянул сайт по горизонтали и разделитель (полоса)стала заходить на картинку. Мне надо чтоб «отзывы» были всегда слева под картинкой значит, думаю и полоса тоже будет под отзывами. Как быть? сайт в подписи.

Артём
4

Outline — это старое свойство css 2.

Написать ответ

Получай обновления блога первым!
Каталог@Mail.ru - каталог ресурсов интернет