Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Добавление границ блочным элементам

.

Вы можете использовать блочные элементы для того, чтобы создать эффекты в виде границ. Границам можно придавать различную толщину, вид и стиль (сплошные, прерывистые линии и т. д.) и, конечно, различные цвета. Для этого предназначены следующие свойства CSS: border-width, border-style и border-color.

Примеры

Рассмотрим несколько примеров в действии.

Простая черная граница

На рис. 4.5 установлена самая простая граница: черная сплошная линия шириной 5 пикселов.

Рис. 4.5. Простая черная граница

Этот эффект получен при выполнении такого кода CSS:

Объемная внутренняя граница

Если вам не нравится простая сплошная линия, попробуйте границу другого вида, дающую эффект объема (рис. 4.6).

Рис. 4.6. Объемная вдавленная граница

Здесь используется светло-серый цвет; его код задан в шестнадцатеричной системе:

Цветная выпуклая граница

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

Рис. 4.7. Цветная выпуклая граница

Этот эффект обеспечивается таким кодом:

.highlight

{ border-width: 10 рх;

border-style: ridge;

 border-color: red;

}

Прерывистые границы

Вы вовсе не обязаны применять для границ только сплошные линии. Примеры на рис. 4.8 и 4.9 показывают, что можно сделать точечную или штриховую границу. Обе границы фиолетового цвета и толщиной 10 пикселов.

Рис. 4.8. Толстая граница из точек

Рис. 4.9. Толстая пунктирная граница

Обе границы очень яркие и заметные. Рассмотрим примеры, менее бросающиеся в глаза.

Простая серая граница

Пример, показанный на рис. 4.10, — простая серая граница толщиной 1 пиксел.

Рис. 4.10. Простая серая граница

Вот CSS-код, с помощью которого можно достигнуть такого эффекта:

.highlight

{ border-width: 1px:

border-style:

solid: border-color: gray;

}

Простая серая граница (еще один вариант)

На рис. 4.11 граница немного толще (2 пиксела), но так как мы сделали цвет светлее (silver вместо gray), она не кажется слишком толстой.

Рис. 4.11. Простая серая граница (еще один вариант)

И CSS-код для нее:

Красная точечная граница

Красная граница, показанная на рис. 4.12, не слишком резкая, так как толщиной она всего 1 пиксел; кроме того, она не сплошная, а состоит из точек, из-за чего становится еще невесомее.

Рис. 4.12. Точечная красная граница

Вот CSS для нее:

Штриховая серая граница

Штриховая версия границы, показанная на рис. 4.13, несколько легче, чем точечная однопиксельная граница, но вы определенно будете часто ею пользоваться.

Рис. 4.13. Серая штриховая граница

Код для нее выглядит таким образом:

.highlight

{border-width:1px;

border-style:

dashed; border-color:

gray;

}

Двойные границы

Вы можете также заключить блочные элементы в двойную границу, как показано на рис. 4.14.

Рис. 4.14. Двойная граница

Вот разметка, которая создает такой эффект:

Оформление отдельных сторон элемента

В придачу к добавлению границ для каждой стороны блочного элемента вы можете применить стиль к отдельным его краям, используя свойства border-top, border-bottom, border-left и border-right. Вот пример блока, у которого в отдельности оформлена каждая сторона:

Если честно, такая конструкция выглядит просто уродливо (рис. 4.15). Однако вы можете использовать эти свойства по-своему. Например, border-bottom часто применяется для создания разделяющей линии между секциями содержимого страницы.

Рис. 4.15. Отображение различных границ для каждой стороны элемента

.

Читайте так же:
Not found