Страница 1 из 11
Форум про uCoz » Все для вебмастера » Начинающий Вебмастер » Сделать красивую рамку на сайте под текст
Сделать красивую рамку на сайте под текст
Kosten
Дата: Понедельник, 05.06.2017, 22:13 | Сообщение # 1
Администраторы
Сообщений:15037
Награды: 49


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



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



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

Код
<div style="background-color: #dadada;border-width:1;border-color: rgb(190,190,190);border-style: double;padding:5px;">Здесь у вас важная информация</div>


Что добавляем его в текст, но для начало выставите оттенок, можете закруглить углы или сделать пунктиром обвод.
Прикрепления: 7749182.png(66Kb) · 0010229.png(5Kb)
Страна: (RU)
Gerat
Дата: Вторник, 06.06.2017, 02:31 | Сообщение # 2
Пользователи
Сообщений:21
Награды: 1


Что то знакомое. и не ошибся, вот здесь он представлен, но так пунктиром идет, что этот больше нравиться.
Страна: (RU)
Maryges
Дата: Вторник, 06.06.2017, 02:34 | Сообщение # 3
Пользователи
Сообщений:142
Награды: 0


А как ставить. что отвечает за изменение?
Страна: (RU)
Kosten
Дата: Вторник, 06.06.2017, 02:42 | Сообщение # 4
Администраторы
Сообщений:15037
Награды: 49


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

border-style: double;

Прикрепления: 7678554.jpg(28Kb)
Страна: (RU)
Kosten
Дата: Вторник, 06.06.2017, 02:48 | Сообщение # 5
Администраторы
Сообщений:15037
Награды: 49


Можно темным стилем сделать и на 5 пикселей закруглить углы и получиться так.



Код
<div style="background-color: #000000;border-width:1;border-color: rgb(158, 158, 158);border-style: double;padding:5px;border-radius: 5px;">Под темное оформление</div>
Прикрепления: 9443637.png(11Kb)
Страна: (RU)
Maryges
Дата: Вторник, 06.06.2017, 02:50 | Сообщение # 6
Пользователи
Сообщений:142
Награды: 0


Что то предложений много, но основном все одно и тоже, только под разными углами.
Страна: (RU)
Kosten
Дата: Вторник, 06.06.2017, 03:23 | Сообщение # 7
Администраторы
Сообщений:15037
Награды: 49


Ранее вообще на ссылках было. 11a
Страна: (RU)
Kosten
Дата: Вторник, 06.06.2017, 03:26 | Сообщение # 8
Администраторы
Сообщений:15037
Награды: 49


К примеру один из нескольких обводов, которые чисто на ссылках сделаны, что можно посмотреть ЗДЕСЬ полностью материал по нему.



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



Хотя, и под изображение, рамка не ломается, просто внутри сама картинка не полностью будет по размерам с мобильного аппарата если смотреть.
Прикрепления: 2294451.jpg(89Kb) · 7175426.png(116Kb)
Страна: (RU)
Форум про uCoz » Все для вебмастера » Начинающий Вебмастер » Сделать красивую рамку на сайте под текст
Страница 1 из 11
Поиск: