• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Сделать красивую рамку на сайте под текст
Сделать красивую рамку на сайте под текст
Kosten
 		Понедельник, 05 Июня 2017 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
Здесь разберем, как быстро сделать красивую рамку под любой цвет, который будет обводом как под текст или изображение. И все это на одном коде, где сразу прописаны стили, что если вы пишите статью и вам нужно ключевые слова как то вывести, то это рамка отлично для этого подойдет. Она также вставляется в материал и потом когда все загрузите и перезагрузка страницы будет, она появиться.



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



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

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


Что добавляем его в текст, но для начало выставите оттенок, можете закруглить углы или сделать пунктиром обвод.
Прикрепления: 7749182.png (66.1 Kb) · 0010229.png (4.8 Kb)
Страна: (RU)
Gerat
 		Вторник, 06 Июня 2017 | Сообщение 2
Оффлайн
Проверенные
Сообщений:22
Награды: 1
« 0 »
Что то знакомое. и не ошибся, вот здесь он представлен, но так пунктиром идет, что этот больше нравиться.
Страна: (RU)
Maryges
 		Вторник, 06 Июня 2017 | Сообщение 3
Оффлайн
Пользователи
Сообщений:142
Награды: 0
« 5 »
А как ставить. что отвечает за изменение?
Страна: (RU)
Kosten
 		Вторник, 06 Июня 2017 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
Эта рамка пойдет под описание и можно ее еще прокачать, а что отвечает, то через браузер делал и выбирал, что больше такой вариант больше понравился.

border-style: double;

Прикрепления: 7678554.jpg (28.2 Kb)
Страна: (RU)
Kosten
 		Вторник, 06 Июня 2017 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
Можно темным стилем сделать и на 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 (11.4 Kb)
Страна: (RU)
Maryges
 		Вторник, 06 Июня 2017 | Сообщение 6
Оффлайн
Пользователи
Сообщений:142
Награды: 0
« 5 »
Что то предложений много, но основном все одно и тоже, только под разными углами.
Страна: (RU)
Kosten
 		Вторник, 06 Июня 2017 | Сообщение 7
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
Ранее вообще на ссылках было. 11a
Страна: (RU)
Kosten
 		Вторник, 06 Июня 2017 | Сообщение 8
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
К примеру один из нескольких обводов, которые чисто на ссылках сделаны, что можно посмотреть ЗДЕСЬ полностью материал по нему.



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



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