• Страница 1 из 1
  • 1
Сделать красивую рамку на сайте под текст
Kosten
Понедельник, 05 Июня 2017, 22:13 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Здесь разберем, как быстро сделать красивую рамку под любой цвет, который будет обводом как под текст или изображение. И все это на одном коде, где сразу прописаны стили, что если вы пишите статью и вам нужно ключевые слова как то вывести, то это рамка отлично для этого подойдет. Она также вставляется в материал и потом когда все загрузите и перезагрузка страницы будет, она появиться.



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



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

Код
<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, 02:31 | Сообщение 2
Оффлайн
Проверенные
Сообщений:22
Награды: 1
Что то знакомое. и не ошибся, вот здесь он представлен, но так пунктиром идет, что этот больше нравиться.
Страна: (RU)
Maryges
Вторник, 06 Июня 2017, 02:34 | Сообщение 3
Оффлайн
Пользователи
Сообщений:142
Награды: 0
А как ставить. что отвечает за изменение?
Страна: (RU)
Kosten
Вторник, 06 Июня 2017, 02:42 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Эта рамка пойдет под описание и можно ее еще прокачать, а что отвечает, то через браузер делал и выбирал, что больше такой вариант больше понравился.

border-style: double;

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



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



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