Tweet Здравствуйте уважаемые читатели с вами снова...

Tweet Здравствуйте уважаемые читатели с вами снова я постоянный ведущий блога «Профессия веб-мастер» Тригуба Сергей. (Здесь следуют аплодисменты. Шутка ) Ну а теперь к делу. Давненько я уже не продолжал сериал о новых свойствах CSS3. Пора исправить эту оплошность. Для тех, кто только, что к нам присоединился. Мы уже рассмотрели: прозрачность css, border-radius, text-shadow, box-shadow Сегодня очередь свойства под названием: outline Дословно его можно перевести как «за линией». Ничего непонятно? Ничего сейчас посмотрите, что оно делает, и сразу все поймете.

Синтаксис outline

1 outline: 2px solid #FF0000

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

1 =”kvblue”>>

Стили

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

Результат: А теперь применим наше свойство outline Html

1 =”kvblue”>>

Стили

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

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

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

Сходства:

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

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

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

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

1 2 =”kvblue”>> =”kvgreen”>>

Стили

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

Результат: Теперь применим border: 5px solid #FF0000 Html

1 2 =”kvblue”>> =”kvgreen”>>

Стили

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; }

Результат: Меняем border на outline Html

1 2 =”kvblue”>> =”kvgreen”>>

Стили

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; }

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

Tweet Здравствуйте уважаемые читатели с вами снова...

Рамка outline как будто имеет position absolute, то есть просто ложиться поверх нашего квадрата, не зацепая его. Вот такое удобное свойство и очень простое в обращении. На этом все. Удачи!!! С уважением Тригуба Сергей. Интересное — сотрудник дпс играет в cs blah Спасибо Вам, что добавили эту статью в: Добавить в Twitter Добавить в Вконтакт Добавить в Facebook Добавить в Google buzz Добавить в Мой мир Опубликовать в своем блоге livejournal. com Приглашаю присоединиться ко мне в следующих сервисах: Присоединится ко мне в twitter Присоединится ко мне в Вконктакте Присоединится ко мне в Facebook Присоединится ко мне в Google buzz Присоединится ко мне в friendfeed Мои групы: Группа webmasterprof. ru в Facebook Группа webmasterprof. ru в Вконтакте Будь в курсе! Подпишись на обновления блога через: RSS RSS Email Email

Понравилась статья? Получай обновления и будь всегда в курсе событий!
Подпишись на RSS или
blog comments powered by Disqus