Сделать красивую рамку на сайте под текст
|
|
Kosten | Понедельник, 05 Июня 2017, 22:13 | Сообщение 1 |
| Здесь разберем, как быстро сделать красивую рамку под любой цвет, который будет обводом как под текст или изображение. И все это на одном коде, где сразу прописаны стили, что если вы пишите статью и вам нужно ключевые слова как то вывести, то это рамка отлично для этого подойдет. Она также вставляется в материал и потом когда все загрузите и перезагрузка страницы будет, она появиться.
Все очень просто, к примеру код будет выставлен на такой дизайн.
Вы начали заполнять материал, и где то вам нужно написать важно, и чтоб присутствовал красный цвет, так как на его безусловно в первую очередь обратят внимание, что в коде ставим этот оттенок.
Код <div style="background-color: #dadada;border-width:1;border-color: rgb(190,190,190);border-style: double;padding:5px;">Здесь у вас важная информация</div>
Что добавляем его в текст, но для начало выставите оттенок, можете закруглить углы или сделать пунктиром обвод.
| Страна: (RU) |
| |
Gerat | Вторник, 06 Июня 2017, 02:31 | Сообщение 2 |
| Что то знакомое. и не ошибся, вот здесь он представлен, но так пунктиром идет, что этот больше нравиться.
| Страна: (RU) |
| |
Maryges | Вторник, 06 Июня 2017, 02:34 | Сообщение 3 |
| А как ставить. что отвечает за изменение?
| Страна: (RU) |
| |
Kosten | Вторник, 06 Июня 2017, 02:42 | Сообщение 4 |
| Эта рамка пойдет под описание и можно ее еще прокачать, а что отвечает, то через браузер делал и выбирал, что больше такой вариант больше понравился.
border-style: double;
| Страна: (RU) |
| |
Kosten | Вторник, 06 Июня 2017, 02:48 | Сообщение 5 |
| Можно темным стилем сделать и на 5 пикселей закруглить углы и получиться так.
Код <div style="background-color: #000000;border-width:1;border-color: rgb(158, 158, 158);border-style: double;padding:5px;border-radius: 5px;">Под темное оформление</div>
| Страна: (RU) |
| |
Maryges | Вторник, 06 Июня 2017, 02:50 | Сообщение 6 |
| Что то предложений много, но основном все одно и тоже, только под разными углами.
| Страна: (RU) |
| |
Kosten | Вторник, 06 Июня 2017, 03:23 | Сообщение 7 |
| Ранее вообще на ссылках было.
| Страна: (RU) |
| |
Kosten | Вторник, 06 Июня 2017, 03:26 | Сообщение 8 |
| К примеру один из нескольких обводов, которые чисто на ссылках сделаны, что можно посмотреть ЗДЕСЬ полностью материал по нему.
Думал что не подойдет на адаптивность, а не чего, все отлично, если не считая, того обвода, где фоном идет изображение, а где выставляешь сам оттенок, но все корректно показывает.
Хотя, и под изображение, рамка не ломается, просто внутри сама картинка не полностью будет по размерам с мобильного аппарата если смотреть.
| Страна: (RU) |
| |