Здравствуйте, уважаемые друзья и гости блога! Сегодня продолжаем с вами знакомится с элементами сайтостроения и давайте научимся создавать рамки css. В прошлой своей статье я вам рассказал и показал, как создаются , но рамки css смотрятся более красивее и привлекательнее. Поэтому кто научился делать рамки html, тот и осилит создание рамки css. А я вам в этом помогу! Давайте приступим...
Как самому сделать рамки css для сайта?
Как я вам уже выше сказал, что рамки css намного красивее и практичнее, чем рамки html и вам никакого труда не составит создать такие рамки css самостоятельно, если Вы уже научились делать рамки html.
Что нам потребуется, чтобы сделать рамки css? Ничего заоблачного! Ваше желание и моя статья, в которой я вам все подробно объясню.
Вот ее код:
Наши рамки css!
Вот второй пример рамки css:
Вот ее код:
Наши рамки css!
Вот третий пример рамки из точек:
Это ее код:
Наши рамки css!
Это четвертый пример рамки с двойным обводом:
Вот это ее код:
Наши рамки css!
А если применить значение «ridge», то вот какая рамка получится:
Вот ее код:
Наши рамки css!
Теперь давайте с вами сделаем закругленные края нашей рамки css с помощью вот этих вот значений «border-radius» и «box-shadow»:
Вот рамка с круглыми краями и ее код:
Наши рамки css!
Теперь давайте сделаем рамку с размытыми краями, это тоже выглядит довольно привлекательно, а сделать это легко, просто в значении «box-shadow» измените цифру на большее значение. И вот, что получится:
Вот ее код:
Наши рамки css!
Теперь делаем рамку с разноцветными контурами, просто добавим в значение "box-shadow" несколько цветовых гамм:
Вот ее код:
Наши рамки css!
А теперь апогей наших рамок на css — это круглая рамка. Делается также просто изменив значение «border-radius». Вот смотрите:
Вот и ее код здесь:
Наши рамки css!
Ну вот и все на сегодня. До новых встреч!
Если вам понравился материал пожалуйста сделайте следующее…
- Поставьте «лайк».
- Сделайте ретвит.
- Поделитесь этим постом с друзьями в социальных сетях.
Спасибо за внимание!
Рассмотрим некоторый документ. На нем сформированы (отображены на экране в браузере) html-элементы. Они формируются на основании тегов. Вы расставляете теги, их обрабатывает парсер html (есть в любом браузере) и строит html-элементы. И как будут выглядеть эти элементы, определяет CSS.
У всех html-элементов есть 4 области: область внешних отступов, рамка, внутренние отступы и содержание элемента. Для чего они нужны?
- Внешние отступы (margin) - нужны, чтобы регулировать взаимодействие этого элемента с границами других элементов.
- Внутренние отступы (padding) - это расстояние от рамки до содержания данного элемента.
- Содержание самого элемента. Тут и так понятно. Если есть вложенные элементы, то они в этой области и находятся.
- Рамка (border). Очерчивает границы элемента. Схематично 4 области можно представить так:
Следует понимать, что каждый элемент лежит внутри какой-то области. Эта область для элемента, который лежит внутри нее, называется контейнером. Т.е. контейнер - это область контента родительского элемента. Эта область и определяет пространство для построения внутреннего элемента. Значит внутренний элемент будет подстраиваться под размер этой области.
Внешние отступы
Это когда наш элемент взаимодействует с границами контейнера и с границами соседних элементов (те, которые в коде расположены рядом с ним). Основные правила:
- margin-top: auto|величина|% - отступ сверху.
- margin-right: auto|величина|% - отступ справа.
- margin-bottom: auto|величина|% - отступ снизу.
- margin-left: auto|величина|% - отступ слева.
- margin: margin-top margin-right margin-bottom margin-left – сборное правило.
Значение “auto” - значит самостоятельный разбор браузером этих величин. Размер отступа можно указать в величинах: em, ex, px. Проценты (%) считаются от ширины контейнера (от области контента родительского элемента). Если указать отрицательное значение, то границы элементов внутри родительского контейнера наедут друг на друга.
Правило “margin” - сборное, здесь указываются значения всех 4-х отступов (начиная сверху и по часовой стрелке). Примеры:
Margin: 10px 20px 20px 30px; margin: 10px 20px 30px; - отступ слева справа одинаков margin: 10px 20px; - отступ сверху- снизу и слева- справа одинаков margin: 10px; - все отступы одинаковы
Внутренние отступы
Здесь не может быть отрицательных значений, т.к. невозможно контент выдвинуть за пределы рамки элемента. Проценты считаются от ширины контейнера.
- padding-top: величина|%.
- padding-right: величина|%.
- padding-bottom: величина|%.
- padding-left: величина|%.
- padding: padding-top padding-right padding-bottom padding-left - сборное правило. По аналогии с “margin”.
Рамки в CSS
У всех рамок есть следующие характеристики:
- Толщина - border-width: величина (thin|medium|thick). По умолчанию - medium.
- Цвет - border-color: цвет. По умолчанию - цвет шрифта в этом элементе.
- Тип - border-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset. Типы: нет рамки | точками | пунктиром | сплошная | двойная | имитация рельефа.
Сами правила рамки:
- border-top- (width|color|style).
- border-right- (width|color|style).
- border-bottom- (width|color|style).
- border-left- (width|color|style).
- border: border-width border-style border-color. Сборное правило.
В этой главе:
Блочная модель - способ отображения элементов браузерами, которые обрабатывают все теги как небольшие блоки, для них любой тег - контейнер с содержимым: текстом, изображениями, другими тегами и т.д.
- Margin (внешний отступ) - пустое пространство (поле), которое отделяет один элемент от другого. Самый простой пример внешнего отступа - промежуток между абзацами, идущими друг за другом. Область внешнего отступа прозрачна и не может иметь свой цвет и других эффектов оформления.
- Border (рамка элемента) - граница с любой стороны элемента. Рамка может быть установлена как со всех сторон элемента, так и с одной стороны. Используя рамку можно просто красиво оформить элемент или визуально отделить содержимое текущего элемента от других элементов страницы.
- Padding (внутренний отступ) - пустое пространство между содержимым элемента и его рамкой. Область внутреннего отступа прозрачна и не может иметь свой цвет или другие эффекты оформления.
- У большинства элементов есть область содержимого, в которой располагается все содержимое элемента (текст, вставляемые изображения или другие элементы).
Рамка
Рамка представляет собой обычную линию, которая отображается вокруг стилизуемого элемента. Но совсем не обязательно применять рамку, окружающую элемент со всех сторон. Можно добавить ее только с требуемой строны элемента. Например, если добавить рамку только с нижней строны блочного элемента, то она будет производить тот же эффект, что и элемент
(горизонтальная линия), выступая в качестве разделителя.
Каждая рамка имеет три свойства, которыми мы можем управлять с помощью CSS: ширина, стиль и цвет, рассмотрим с помощью каких свойств можно их задавать и изменять:
Вместо указания всех трех свойств, можно указать всего одно - свойство border , которое позволяет одновременно указать ширину, стиль и цвет для рамки:
Первый абзац.
Второй абзац.
Третий абзац.
Для управления рамкой отдельно с каждой стороны элемента, используются соответствующие свойства:
- border-top - верхняя рамка
- border-left - левая рамка
- border-right - правая рамка
- border-bottom - нижняя рамка
Эти свойства работают точно так же, как и свойство border, с тем исключением, что позволяют управлять рамкой только с одной стороны стилизуемого элемента.
Внешний и внутренний отступы
Внутренний отступ - пустое пространство между содержимым элемента и его рамкой (если она установлена). Для добавления и управления шириной внутренних отступов со всех четырех сторон элемента используется свойство padding .
Внешний отступ - пустое пространство, отделяющее элемент от других элементов или краев окна браузера. Для добавления и управления шириной внешних отступов со всех четырех сторон элемента используется свойство margin .
Свойства padding и margin могут принимать от одного до четырех значений:
Где значения устанавливаются по часовой стрелке, начиная с верхнего:
Если у свойств указать всего одно значение, то отступы со всех сторон будут одинаковой ширины.
На первый взгляд видимый эффект при использовании данных свойств выглядит одинаковым, чтобы заметить визуальную разницу между ними, можно например установить рамку для элемента или задать задний фон:
Обычный абзац.
Для отступов, так же как и для рамок, есть свойства позволяющие управлять размером отступа с каждой стороны отдельно. Внутренние отступы регулируются свойствами: padding-top , padding-right , padding-bottom и padding-left . Внешние отступы регулируются свойствами: margin-top , margin-right , margin-bottom и margin-left .
Примечание: значения свойств padding и margin не наследуются дочерними элементами, поэтому нужно указывать ширину отступов отдельно для каждого элемента, которому они необходимы.
Ширина и высота элемента
По умолчанию для блочных элементов используется автоширина. Это означает, что элемент будет растянут ровно на столько, сколько есть свободного места. Высота блочных элементов по умолчанию устанавливается автоматически, т.е. браузер растягивает область содержимого в вертикальном направлении так, чтобы отобразилось все содержимое. Чтобы установить собственные размеры для области содержимого элемента, вы можете использовать свойства width и height.
Влад Мержевич
С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border , как наиболее универсальное, а также outline и, как ни удивительно, box-shadow , основная задача которого - создание тени. Далее рассмотрим эти методы и их различия между собой.
Свойство outline
Самое простое свойство для создания рамок. Имеет те же параметры, что и border , но существенно отличается от него некоторыми деталями:
- outline выводится вокруг элемента (border внутри);
- outline не влияет на размеры элемента (border добавляется к ширине и высоте элемента);
- outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах (border можно использовать для любой стороны или всех сразу);
- на outline не действует радиус скругления, заданный свойством border-radius (на border действует).
Возникает вопрос - в каких случаях нужен outline , когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border ? Ситуаций не так и много, но они встречаются:
- создание сложных разноцветных рамок;
- добавление рамки к элементу при наведении на него курсора мыши;
- сокрытие рамки, добавляемой браузером автоматически для некоторых элементов при получении фокуса;
- для outline можно задать расстояние от края элемента до рамки с помощью свойства outline-offset , для создания .
Разноцветные рамки
Надо понимать, что outline ни в коей мере не заменяет border и вполне может существовать вместе с ним, как показано в примере 1.
Пример 1. Создание рамки
В данном примере вокруг элемента добавляется чёрная рамка, которая отделена от фона белой каймой (рис. 1).
Рис. 1. Рамка вокруг элемента
Рамка при использовании:hover
При добавлении рамки через border происходит увеличение ширины элемента, что довольно заметно при сочетании border и псевдокласса :hover . Есть два способа, как это «победить». Самое простое - заменить border на outline , которое, как мы знаем, не оказывает влияния на размеры элемента (пример 2).
Пример 2. Рамка при наведении
outline не всегда годится, хотя бы потому, что на него скругление уголков не действует. Здесь подойдёт второй метод - добавляем невидимую рамку или рамку, совпадающую с цветом фона, а затем меняем её параметры при наведении (пример 3). Тогда никакого смещения элемента происходить не будет, поскольку рамка изначально уже есть. Но всегда помним, что ширина элемента при этом складывается из значений width , border слева и border справа. Аналогично обстоит и с высотой.
Пример 3. Рамка при наведении
Рамка вокруг полей формы
В некоторых браузерах (Chrome, Safari, последние версии Opera) вокруг полей формы при получении ими фокуса отображается небольшая цветная рамка (рис. 2). Чтобы её убрать, достаточно в стилях добавить к свойству outline значение none , как показано в примере 4.
Рис. 2. Рамка вокруг полей
Пример 4. Убираем рамку
Рамки через box-shadow
Хотя свойство box-shadow предназначено для добавления тени вокруг элемента, с его помощью можно и создавать рамки, причём такие, которые невозможно сделать через border или outline . Всё благодаря тому, что число теней может быть неограниченным, параметры которых перечисляются через запятую.
Чтобы получить рамку, первые три параметра следует задать нулевыми, они отвечают за положение тени и её размытие. Четвёртый параметр в данном случае отвечает за толщину границы, а пятый устанавливает цвет рамки. Для второй рамки четвёртый параметр равняется сумме толщин двух рамок.
В примере 4 показано добавление двух рамок и одной границы справа с помощью одного свойства box-shadow .
Пример 4. Использование box-shadow
Результат данного примера показан на рис. 3.
Рис. 3. Рамки, созданные свойством box-shadow
Описание
Устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.
Синтаксис
border-style: {1,4} | inherit
Значения
Для управления видом границы предоставляется несколько значений свойства border-style . Вид зависит от используемого браузера и заданной толщины границы. В табл. 1 приведены названия стилей и получаемая рамка при разных значениях толщины — 1, 3, 5 и 7 пикселов.
Кроме перечисленных в таблице значений используются следующие ключевые слова.
None Не отображает границу и ее толщина (border-width ) задается нулевой. hidden Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse . В этом случае вокруг ячейки граница не будет отображаться вообще. inherit Наследует значение родителя.
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и указан в табл. 2.
HTML5 CSS2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства border-style
Объектная модель
document.getElementById("elementID ").style.borderStyle
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .
Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit .
Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .
