• Авторизация
Дневник Kuma_1 Лента друзей - Дневник - Полная версия


Рамочки для выделения текста 10-11-2016 01:24 к комментариям - к полной версии - понравилось!



- Сплошная рамка толщиной 1px


- Сплошная рамка толщиной 3px


- Сплошная рамка толщиной 5px цветная


- Рамка сплошная с разноцветными сторонами


- Синий текст в красной рамке

Цвет текста и рамки можно менять.
- Текст в двойной рамке

- Цветной текст в двойной цветной рамке

Цвет текста и рамки можно менять.

- Рамка точками толщиной 1px


- Рамка точками толщиной 2px


- Рамка точками толщиной 3px цветная


- Рамка пунктирная толщиной 1px


- Рамка пунктирная толщиной 2px


- Рамка пунктирная толщиной 3px цветная


- Текст окаймленный разноцветным пунктиром


- Цветной текст с цветным фоном


- Текст с цветным фоном в цветной рамке


- Цветной текст с цветным фоном в цветной рамке


Цвет текста и фона можно менять.
Трехмерные рамки

Трехмерная рамка «бороздка»

- Ваш текст в рамке

Тег span (строчный) во всех приведенных примерах можно заменять на div (блочный элемент) и тогда получим рамку во всю ширину поста.
Ваш текст в рамке
Что бы получить рамку с определенными размерами, то используем следующие теги:
Размеры блока div задаются атрибутами:
div style=width:200px; height:50px;где:
width:200px; — ширина блока 200 пикселей,
height:50px; — высота блока 50 пикселей
Если проставить ширину и высоту, то получим рамку с нужными размерами:
Ваш текст в рамке
Трехмерная рамка «бороздка»

- Трехмерная рамка «бороздка» 8px

Трехмерная рамка «гребень»

- Трехмерная рамка «гребень» 8px

Вдавленная трехмерная рамка

- Вдавленная трехмерная рамка 8px

Выдавленная трехмерная рамка

- Выдавленная трехмерная рамка 8px

Эффект зависит от значения border-color.
Выделение цитаты в тексте.

- Рамочка для выделения текста или цитат

- Рамка с закругленными углами

Выделение цитаты с эффектом подсветки

-
Написать текст, имея фоном картинку:
Лучше брать маленькую картинку — она будет автоматом повторяться, пока продолжается текст. Атрибутами width и height в % или px (пикселах) можно задать определенный размер фоновой области.

background-image – устанавливает фоновое изображение, в качестве значения используется путь к файлу (url(путь к файлу),
атрибут background-image:url('URL картинки')
после указания адреса вашей картинки должен быть прописан вот так:
background-image:url('https://img-fotki.yandex.ru/get/4307/fot462.ef/0_3c404_342b0bb4_L.jpg')

В рамках можно располагать не только текст, но и картинки:
текст
текст
текст

Рамка вокруг текста на всю ширину поста



ТЕСТ (или картинка) в разрыве рамочки по центру



ТЕСТ (или картинка) в разрыве рамочки слева



ТЕСТ (или картинка) в разрыве рамочки справа



Рамка с рамкой с текстом в разрыве рамки
ТЕКСТ В ВЕРХНЕЙ РАМКЕ
ВАШ ТЕКСТ В НИЖНЕЙ РАМКЕ



ТЕКСТ В ВЕРХНЕЙ РАМКЕ
ВАШ ТЕКСТ В НИЖНЕЙ РАМКЕ

Тип рамки вокруг элемента определяет тег border-style
Свойство border-style задает стиль для четырех границ. Это свойство может иметь от одного до четырех значений. Эффект зависит от значения border-color.
border-style:dotted solid double dashed; - верхняя граница в-точку - правая граница обычная - нижняя граница двойная - левая граница в-тире
border-style:dotted solid double; - верхняя граница в-точку - правая и левая границы обычные - нижняя граница двойная
border-style:dotted solid; - верхняя и нижняя границы в-точку - правая и левая границы обычные
border-style:dotted; - все четыре границы в-точку
Другие переменные в кодах:
border:3px #ff0000 - толщина рамки в пикселях и её цвет
border-width: - задает толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны.
border-width:thick; - переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы.
border-width: 3px 7px 7px 4px; - изменение толщины зависит от числа значений
border-top - верхняя линия рамки
border-left - левая линия рамки
border-bottom - нижняя линия рамки
border-right - правая линия рамки
none - граница отсутствует (по умолчанию)
solid - непрерывная (сплошная) рамка
dashed - пунктирная рамка
dotted - точечная рамка
double - двойная рамка
groove - трехмерная рамка «бороздка»
ridge - трехмерная рамка «гребень»
inset - вдавленная трехмерная рамка
outset - выдавленная трехмерная рамка
padding - отступ текста от рамки внутри,
padding-right
padding-top
padding-bottom
padding-left
padding: 10px 30px 15px 20px; - и первым ставится значение top, а дальше по часовой стрелке остальные. Если поставить только одно значение, то это будет значить, что отступ со всех сторон будет одинаковый.
margin - отступ от текста снаружи (если рамка находится внутри текста)
background-color: #ffff00 - цвет фона рамки
background-image – устанавливает фоновое изображение, в качестве значения используется путь к файлу (url(путь к файлу)
fieldset - является контейнером для других элементов, при отображении в браузере по умолчанию он выделяется рамкой и имеет небольшой внутренний отступ со всех сторон. Элемент fieldset часто используется совместно с элементом legend, который определяет для него заголовок.
legend align="center" - заголовок по центру
legend align="left" - заголовок слева
legend align="right" - заголовок справа
border-radius - установление радиусов скругления углов
box-shadow: 0 0 0 3px #ff4f00, 0 0 0 7px #ffdb00, 0 0 0 10px #00ffa2; - бордюр многослойный толщина цвет
border-radius: 5px 10px 15px 20px;
1. Верхний левый – 5px
2. Верхний правый – 10px
3. Нижний правый – 15px
4. Нижний левый – 20px
Рамка для текста
border-radius: 10px 25px 40px 55px;
1. Верхний левый – 10px
2. Верхний правый – 25px
3. Нижний правый – 40px
4. Нижний левый – 55px
Рамка для текста
border-radius: 30px 40px 35px;
1. Верхний левый – 30px
2. Верхний правый и нижний левый – 40px
3. Нижний-правый – 10px
Рамка для текста
border-radius: 55px 5px;
1. Верхний левый и нижний правый – 55px
2. Верхний правый и нижний левый – 5px
Рамка для текста
border-radius: 50px;
1. Радиус для всех четырёх углов – 50px
Рамка для текста

border-radius: 50px / 50px;


Рамка для текста
border-radius: 50px / 30px;
Рамка для текста
border-radius: 65px 55px 50px / 45px 30px;
1. Верхний левый – 65px / 45px
2. Верхний правый и нижний левый – 55px / 30px
3. Нижний правый – 50px / 45px
Рамка для текста

border-radius: 50% / 50%;


Рамка для текста
border-radius: 50% / 50%;
box-shadow: 0 0 0 3px #ff4f00, 0 0 0 7px #ffdb00, 0 0 0 10px #00ffa2;
Рамка для текста

Примечание:
если у элемента нет рамки, то браузер будет скруглять углы фоновой области.


ВНИМАНИЕ!!!
Если вы цитируете этот пост
обязательно перед тем как опубликовать цитату, УБЕРИТЕ галку с
"Сохранять переводы строк в тексте."
Иначе расположение текста и таблиц
в процитированном вами посте исказиться.



вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Рамочки для выделения текста | Kuma_1 - Цитатник «Копилочка» - с миру по нитке... | Лента друзей Kuma_1 / Полная версия Добавить в друзья Страницы: раньше»