Линии и рамки
Кнопки в форме создаются с помощью тега или , к этим селекторам и добавляется свойство border, оно одновременно устанавливает толщину рамки, её стиль и цвет. Кнопки могут по разному отображаться в браузерах, но добавление цвета фона или рамки отменяет исходный стиль кнопки и превращают её в прямоугольный «брусок». Далее к нему уже можно применить градиент, скругление углов и другие оформительские вещи.
Как сделать горизонтальную пунктирную линию с рисунком?
В квитанциях, купонах или газетах порой можно встретить пунктирную линию с изображением ножниц и надписью «линия отреза». Такая фраза говорит, что надо отрезать этот кусок по приведённой линии, чтобы в дальнейшем использовать по назначению. На сайтах подобные инструкции не имеют никакого смысла, никто тыкать в монитор ножницами в здравом уме не станет. Но можно использовать горизонтальную линию в качестве элемента дизайна страницы, к примеру, для визуального отделения одного материала от другого.
Как сделать цветную горизонтальную линию?
Горизонтальные линии хорошо использовать для отделения одного блока текста от другого. Небольшой по размеру текст, сверху и снизу которого располагаются горизонтальные линии, привлекает больше внимания читателя, чем обычный текст.
С помощью тега
можно нарисовать горизонтальную линию, вид которой зависит от используемых атрибутов, а также браузера. Тег относится к блочным элементам, поэтому линия всегда начинается с новой строки, а после неё все элементы отображаются на следующей строке. Благодаря множеству атрибутов тега
линией, созданной через этот тег, легко управлять. Если ещё подключить мощь стилей, то добавление линии в документ превращается в простое занятие.
Как добавить линию возле текста?
Можно по-разному привлечь внимание читателя к тексту. Например, сделать текст жирного начертания, изменить его цвет, использовать фон, нарисовать рамку. Но что если требуется не просто выделить текст, сколько отделить один текстовый блок от другого, разделить их на разные смысловые части? Вот тут использование линий и отступов просто неоценимо.
CSS — как сделать линию короче бокса
При верстке макета сайта, кстати, совсем несложного, возник вопрос.
Заключается он в том, имеется информационная часть, разбитая на две колонки. Каждая из колонок также разделена на отдельные секции — посты. Для колонок и постов на макете задуманы дизайнером декоративные линии-разделители.
border-bottom
border-right
border-right
border
Как же поступить в данном случае? Скажем так, обычными способами CSS решить такой вопрос невозможно. Но решение было найдено с помощью форума htmlbook.
:after
Создаем слой с контентом:
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text textИ пропишем для него стилевые правила:
:after
div:after content: ""; position: absolute; top: 30px; right: -10px; bottom: 30px; border-left: 1px solid #000; >Немного распишем, что да как в этом коде.
Прямая линия HTML
Прямая линия очень интересный элемент html. .
Несмотря на свою простоту, расположенная в нужном месте, она придаёт контенту неповторимый вид, а так же её саму можно сделать очень красивой
Для создания прямой линии в HTML применяется тег
. Он является блочным элементом и, значит, всегда начинается с новой строки.
Это одиночный тег и не имеет закрывающей части, что можно использовать при веб программировании, так как одиночных тегов в html раз-два и обчёлся.
Изменять внешний вид линии, мы будем при помощи стилевых свойств, так как почти все теги и атрибуты HTML, создающие внешний вид элемента, на данный момент уже являются устаревшими.
В представленных ниже вариантах кода, я использую атрибут style , значения которого являются по сути свойствами css.
< hr style color: #008080;">width:90% «> — длина относительно блока контента, по умолчанию прямая линия занимает 100%
Чтоб увеличить толщину линии в код вводится свойство height с цифровым значением, которое задаётся в любых доступных в веб размерах.
< hr style color: #008080;">width:90%; height:5px; » >
Цвет линии задаётся свойством background , в значении которого указывается код цвета.
< hr style color: #008080;">width:90%; height:10px; background:#037FFC; «>
Можно взять линию в рамку. Для этого в код вводится свойство border .
Причём рамка может быть любого вида доступного для рамок html.
< hr style color: #008080;">width:90%; height:10px; background:#037FFC; border:2px solid #FC0307; «>
< hr style color: #008080;">width:50%; height:10px; background:#037FFC; border:dashed 2px #FC0307; «>
< hr style color: #008080;">width:90%; height:10px; background:#037FFC; border:dotted 2px #FC0307; «>
Можно убрать боковые грани рамки и сделать линию как-бы трёхцветную.
Для этого в код линии, вместо свойства border , вводятся свойства border-top и border-bottom
< hr style color: #008080;">width:90%; height:10px; background:#037FFC; border-top:solid 2px #FC0307; border-bottom:solid 2px #FC0307; «>
Причём все три линии можно сделать разной толщины, цвета и формы.
< hr style color: #008080;">width:90%; height:10px; background:blue; border-top:dashed 5px red; border-bottom:solid 10px green; «>
Можно закруглить и даже заострить торцы линии.
Для этого в код вводится свойство border-radius с цифровым значением, которое задаётся в любых доступных в веб единицах.
< hr style color: #008080;">width:90%; height:10px; background:#037FFC; border-radius:5px; «>
< hr style color: #008080;">width:90%; height:10px; background:#037FFC; border-radius:50%; «>
< hr style color: #008080;">width:90%; height:7px; background:#037FFC; border-radius:50% 50% 0 0; «>
Если добавить в код свойство теней box-shadow , то можно сделать прямую линию такого вида
< hr style color: #008080;">width:90%; height:10px; background:#037FFC; border-radius:50%; box-shadow:0 0 0 5px #FC0307; «>
< hr style color: #008080;">width:90%; height:7px; background:#037FFC; border-radius:5px; box-shadow:0 0 0 3px #FC0307; «>
Изменяя третье значение box-shadow , можно размыть края рамки.
< hr style color: #008080;">width:90%; height:7px; background:#037FFC; border-radius:5px; box-shadow:0 0 3px 5px #FC0307; «>
А если к комплекту значений box-shadow , через запятую добавить ещё несколько, то можно сделать разноцветную рамку.
< hr style color: #008080;">width:90%; height:7px; background:#037FFC; border-radius:5px; box-shadow:0 0 0 2px #FC0307, 0 0 0 6px #00CC00, 0 0 5px 9px #FC0307; «>
Если в код добавить свойство transform , то можно сделать её наклонной, или вертикальной.
Правда свойство transform всё ещё не работает без префиксов, что очень увеличивает код.
< hr style color: #008080;">width:50%; height:10px; background:#037FFC; border-radius:5px; box-shadow:0 0 0 2px #FC0307, 0 0 0 6px #00CC00, 0 0 5px 9px #FC0307; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); «>
Изменяя цифры в значениях, можно всячески изменить внешний вид линии.
Более подробно о свойствах CSS box-shadow и transform , можно узнать в статье Как сделать тень для текста, картинки, блока.
Желаю творческих успехов.
Неужели не осталось вопросов? Спросить
Перемена
Стоит Ежик на пеньке и хвалит сам себя:
— Я сильный, я сильный, сильный я…
Тут порывом ветра унесло его в кучу дерьма. Ежик вылезает из кучи, отряхивается:
— Но легкий!