Толщина рамки
CSS3 дает возможность веб-дизайнеру создавать рамку по границе элемента html-страницы. Для этих целей предназначены следующие атрибуты стиля:
- border-left-width — задает толщину левой стороны рамки;
- border-top-width — задает толщину верхней стороны рамки;
- border-right-width — задает толщину правой стороны рамки;
- border-bottom-width — задает толщину нижней стороны рамки.
Толщину рамки можно задавать либо абсолютным числовым значением, либо относительным, либо одним из предопределенных значений:
- thin — тонкая линия;
- medium — линия средней толщины;
- thick — толстая линия.
Атрибут стиля border-width указывает значения толщины сразу для всех сторон рамки:
border-width: <thickness 1>[<thickness 2>[<thickness 3>[<thickness 4>]]]
ПРИМЕР:
.class1 {border-width: 1px 1px 1px 1px} - первое значение задает толщину верхней линии; второе - правой линии; третье - нижней линии; четвертое - левой линии; .class2 {border-width: 1px 1px 1px} - первое значение задает толщину верхней линии; второе - левой и правой линий; третье - нижней линии; .class3 {border-width: 1px 1px} - первое значение задает толщину верхней и нижней линий; второе - левой и правой линий; .class4 {border-width: 1px} - единственное значение задает толщину всех линий границ веб-элемента.
|
Цвет рамки
Цвет линии границы веб-элемента html-страницы задается атрибутами стиля:
- border-left-color — задает цвет левой стороны рамки;
- border-top-color — задает цвет верхней стороны рамки;
- border-right-color — задает цвет правой стороны рамки;
- border-bottom-color — задает цвет нижней стороны рамки.
Цвет рамки задается «явно», иначе она может быть не нарисована. Значение transparent задает «прозрачный» цвет рамки.
Атрибут стиля border-color задает цвет всех сторон рамки:
border-color: <color 1>[<color 2>[<color 3>[<color 4>]]]
Действие атрибута стиля border-color аналогично действию border-width.
ПРИМЕР:
H2 { border-bottom-width: 3px; border-bottom-color: yellow } TD { border-width: medium; border-color: olive }
|
Вид рамки
Вид рамки задается атрибутами стиля:
- border-left-style — задает вид левой стороны рамки;
- border-top-style — задает вид верхней стороны рамки;
- border-right-style — задает вид правой стороны рамки;
- border-bottom-style — задает вид нижней стороны рамки.
Возможные значения:
- none — рамка отсутствует;
- hidden — рамка отсутствует;
- dotted — пунктирная линия;
- dashed — штриховая линия;
- solid — сплошная линия;
- double — двойная линия;
- groove — «вдавленная» трехмерная линия;
- ridge — «выпуклая» трехмерная линия;
- inset — трехмерная «выпуклость»;
- outset — трехмерное «углубление».
Атрибут стиля border-style указывает вид линии для всех сторон рамки:
border-style: <style 1>[<style 2>[<style 3>[<style 4>]]]
Действие атрибута стиля border-style аналогично действию border-width и border-color.
ПРИМЕР:
H2 { border-bottom-width: 3px; border-bottom-color: yellow; border-bottom-style: dashed } TD { border-width: medium; border-color: olive; border-style: dotted }
|
CSS3 позволяет веб-дизайнеру задавать сразу все параметры (толщину, вид, цвет) для левой, верхней, правой и нижней стороны рамки. Это делается при помощи атрибутов стиля: border-left; border-top; border-right; border-bottom.
Атрибут стиля border дает возможность задавать все параметры сразу для всех сторон рамки.
ПРИМЕР:
H2 { border-bottom: 3px dashed yellow } TD { border: medium dotted olive }
|
Веб-мастер должен помнить, что рамки, как и отступы, изменяют размеры элемента html-страницы.
soft-seo.com
Задаем стиль оформления рамки в CSS.
Первым что нужно задать вам при создании рамки на своем сайте это стиль рамки для CSS. Благодаря этому вы дадите понять браузеру какой линией выводить рамку. Давайте для примера для одного заголовка просто зададим сплошную линию, как на обычных рамках. Для этого нам конечно же нужен файл стилей который вы можете создать самостоятельно и как это сделать я рассказывал уже на других статьях своего блога.
Я не буду создавать новый файл а буду использовать старый, кроме того здесь сохранились заголовки разного уровня для которых мы будем создавать рамки.
вайте зададим разные виды рамки для заголовка первого уровня и который задается тегом h1. Для этого в файл стилей прописываем такой текст: h1 {border-style:solid;} и коротко рассмотрим что мы написали. h1 это мы определили для какого элемента мы будем задавать рамку, border-style команда которая означает что для данного элемента нужно задать рамку определенного стиля ну а solid обозначает стиль отображения рамки, в данном случае это сплошная черта.
Мы можем менять стиль отображения рамки и для этого нам просто нужно задавать новые параметры и сейчас я покажу какие имеются команды и как они отображаются на сайте.
Параметры рамки:
solid или сплошная линия.
dotted-пунктирная линия.
dashed-штрихованная линия.
double-двойная сплошная линия.
Это основные стили которые вы можете задать стиль рамки в CSS, более подробно о всех командах вы можете узнать с спецификации по CSS.
До этого мы задавали стиль полностью для всей рамки но мы можем задать также параметр конкретно для любой из сторон и таблицы стилей дает нам такую возможность. В этом нам помогут четыре команды: border-left-style (левая линия) border-top-style (верхняя линия) border-right-style (правая линия) и border-bottom-style (нижняя линия).
Давайте теперь зададим для нашего заголовка стиль для каждой стороны свой. Напишем команду для всех четырех сторон:
h1 {
border-left-style:groove;
border-top-style:solid;
border-right-style:double;
border-bottom-style:dotted;}
И на практике мы увидим вот такой результат.
Как задать толщину линий в рамке CSS.
Для задания рамки нам нужно использовать атрибут стиля border-width для которого мы можем задать несколько параметров: первый это задать размер рамки в пикселах или задать толщину командами thin (тонкая линия), medium (средняя линия) или thick (толстая линия). Толщину линии мы также можем задать для любой стороны рамки независимо от того какой стиль задан для остальных.
Давайте для начала изучим как задать толщину линии рамки непосредственно для всех сторон. Для этого нам просто нужно взять и задать команду border-width и определить для него размер линии. Для того чтобы задать толщину текст будет выглядеть так:
h1 {
border-style:solid;
border-width:thin;
}
Команду thin можно заменить на medium или thick или же задать толщину в пикселях обязательно указав единицу измерения, например размер в четыре пикселя-4px.
Теперь мы будем задавать параметры толщины для каждой стороны нашей рамки. Также как и с заданием стиля нам помогут параметры border-left-width (толщина левой линии), border-top-width (толщина верхней линии), border-right-width (толщина правой линии) и border-bottom-width (толщина нижней линии). Для этого мы в файл стилей добавим четыре строчки следующего содержания:
h1 {
border-style:solid;
border-left-width:medium;
border-top-width:thin;
border-right-width:thick;
border-bottom-width:7px;
}
И теперь все четыре стороны нашей рамки будут иметь свою толщину.
Как задать цвет рамки в CSS.
Давайте теперь зададим цвет рамки в CSS и в этом нам поможет команды border-left-color, border-top-color, border-right-color и border-bottom-color для задания цвета для левой,верхней,правой и нижней линии рамки соответственно. Для этого мы прописываем команды и к каждой команде добавляем по параметру цвета.
h1 {
border-style:solid;
border-left-color:#00CCCC;
border-top-color:#6633CC;
border-right-color:#CCCCCC;
border-bottom-color:#66CC99;
}
И теперь посмотрим результат применения данного параметра.
Задание глобальной переменной для сокращения записи.
Теперь давайте разберем как нам можно избавиться от таких громоздких конструкций и записей. Для этого нам нужно будет задать глобальный атрибут border в который мы зададим такие параметры как толщина рамки,стиль рамки и цвет и все это поместиться не в три строчки как минимум а всего лишь в одну строчку.
Для этого мы пишем строчку:
h1 {
border:5px solid #3399FF;
}
в строчке сначала мы указываем толщину линии рамки потом пробел и указываем стиль оформления рамки и снова через пробел указываем цвет рамки. Вот и все мы сократили запись до одной строчки.
Надеюсь что благодаря данной статье вы сможете задавать рамки для всех элементов в CSS. Я постарался остановить ваше внимание на самых необходимых командах и подробно вам рассказать о том как задать рамку в CSS, задать стиль рамки в CSS и задать цвет рамки в CSS.
rabota-cms.ru
Рамка текста CSS
Вот пример использования свойства border
для создания рамки шириной в один пиксел и чёрного цвета:
.example-1 { width: 90%; padding: 10px; margin: 0 auto; border: 1px solid black; } Этому абзацу присвоен класс example-1.
В этом примере мы также использовали свойство CSS padding, или внутренний отступ. Это свойство задаёт размер отступа от текста до обводки (границы элемента).
Давайте рассмотрим ещё один несложный пример, просто чтобы усвоить материал. Создадим рамку шириной три пиксела красного цвета и без внутреннего отступа (свойство CSS padding).
.example-2 { width: 90%; margin: 0 auto; border: 3px solid red; } Этому абзацу присвоен класс example-2.
Как мы видим, без внутреннего отступа padding рамка текста выглядит рогато.
Как сделать рамку картинки в CSS
Рамки для картинок задаются аналогично при помощи свойства border. Давайте сделаем рамку зелёного цвета толщиной 4 пикселя для картинки.
.example-img { border: 4px solid green; } Вот как сработает этот код:
Как закруглить углы рамки в CSS
Округление углов рамки в CSS делается при помощи свойства border-radius
. Это свойство появилось в CSS3, и работает во всех современных браузерах.
Свойство border-radius может иметь от одного до четырёх значений. Если значение одно, то оно устанавливает степень закругления для всех углов. Давайте приведём пример, как будет работать это свойство с одним значением.
.example-3 { border: 1px solid black; border-radius: 15px; padding: 10px; } Вот как он работает:
Свойство border-radius: 15px.
Если у блока нет рамки, то есть граница border-width: 0;, то закруглена будет область залитая фоновым цветом (свойство background-color). Вот пример:
.example-4 { border-width: 0; // хотя это значение равно 0 по умолчанию background-color: #DDD; border-radius: 15px; padding: 10px; } Вот как работает этот пример:
Свойство border-radius: 15px.
Как я писал ранее, для свойства border-radius можно устанавливать от одного до четырёх значений. В таблице ниже описано как будут работать все комбинации значений.
| Число значений | Результат |
|---|---|
| 1 | Округление указывается для всех углов рамки блока. |
| 2 | Первое значение задает округление верхнего левого и нижнего правого угла, второе значение — для двух оставшихся углов. |
| 3 | Первое значение задает округление для верхнего левого угла, второе — устанавливает округление верхнего правого и нижнего левого углов одновременно, а третье — округление для нижнего правого уголка. |
| 4 | По очереди устанавливает округление углов по часовой стрелке: сначала верхнего левого, потом верхнего правого, нижнего правого и нижнего левого углов. |
Для свойсва border-radius значения можно указывать в процентах.
Давайте нарисуем круг на CSS. Для этого возьмём кватратный блок 100 на 100 пикселей и округлим углы CSS правилом border-radius: 50%.
.example-5 { width: 100px; height: 100px; background-color: #F00; border-radius: 50%; } Вот как работает этот пример:
На этом тема «рамки в CSS» раскрыта полностью. Успехов в изучении CSS!
komotoz.ru
/* В данном селекторе мы задаем ширину, высоту, обводку, позиционирование, фоновый цвет, цвет и размер теней */ .box13{ margin: 50px; width: 300px; min-height: 150px; padding: 0 0 1px 0; position:relative; background:#fff; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff)); background: -moz-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3); border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-left: 1px solid #ccc; -webkit-border-top-left-radius: 60px 5px; -moz-border-radius-topleft:60px 5px; border-top-left-radius:60px 5px; -webkit-border-top-right-radius: 60px 5px; -moz-border-radius-topright:60px 5px; border-top-right-radius:60px 5px; -webkit-border-bottom-right-radius: 60px 60px; -moz-border-radius-bottomright:60px 60px; border-bottom-right-radius: 60px 60px; -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ; -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ; } /* Нижний правый загиб */ .box13:before{ content:''; width: 25px; height: 20px; position: absolute; bottom:0; right:0; -webkit-border-bottom-right-radius: 30px; -moz-border-radius-bottomright: 30px; border-bottom-right-radius: 30px; -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3); -webkit-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px); -moz-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px); -o-transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px); transform: rotate(-20deg) skew(-40deg,-3deg) translate(-13px,-13px); } /* Тень загиба */ .box13:after{ content: ''; z-index: -10; width: 100px; height: 100px; position:absolute; bottom:0; right:0; background: rgba(0, 0, 0, 0.2); display: inline-block; -webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2); -moz-box-shadow: 20px 20px 18px rgba(0, 0, 0, 0.2); box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(0deg) translate(-45px,-20px) skew(20deg); -moz-transform: rotate(0deg) translate(-45px,-20px) skew(20deg); -o-transform: rotate(0deg) translate(-45px,-20px) skew(20deg); transform: rotate(0deg) translate(-45px,-20px) skew(20deg); } /* Верхняя тень слева */ .box13_corner_lf{ width: 100px; height: 100px; top:0; left:0; position:absolute; z-index:-6; display: inline-block; -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2); box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg); -moz-transform: rotate(2deg) translate(20px,25px) skew(20deg); -o-transform: rotate(2deg) translate(20px,25px) skew(20deg); transform: rotate(2deg) translate(20px,25px) skew(20deg); } /* Верхняя тень справа */ .box13_corner_rt{ content: ''; width: 50px; height: 50px; top:0; right:0; position:absolute; display: inline-block; z-index:-6; -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); -moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); -moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); -o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg); transform: rotate(2deg) translate(-14px,20px) skew(-20deg); } /* Левая прозрачная ленточка */ .box13_tape:before{ content: ''; position:absolute; top:0; left: 0; width: 130px; height: 40px; background:rgba(0,0,0,0.2); background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2))); background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); border-left: 1px dashed rgba(0, 0, 0, 0.1); border-right: 1px dashed rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(90deg) skew(0,0) translate(100px,65px); -moz-transform: rotate(90deg) skew(0,0) translate(100px,65px); -o-transform: rotate(90deg) skew(0,0) translate(100px,65px); transform: rotate(90deg) skew(0,0) translate(100px,65px); } /* Правая прозрачная ленточка */ .box13_tape:after{ content: ''; position:absolute; top:0; right: 0; width: 130px; height: 40px; background:rgba(0, 0, 0, 0.1); background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2))); background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); border-left: 1px dashed rgba(0, 0, 0, 0.1); border-right: 1px dashed rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(90deg) skew(0,0) translate(100px,-65px); -moz-transform: rotate(90deg) skew(0,0) translate(100px,-65px); -o-transform: rotate(90deg) skew(0,0) translate(100px,-65px); transform: rotate(90deg) skew(0,0) translate(100px,-65px); }
ruseller.com