• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Красиво оформить рамку для текста на CSS (Оформление текста в красивые рамочки с помощью css)
Красиво оформить рамку для текста на CSS
Kosten
 		Пятница, 22 Марта 2019, 21:11 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Если решили оформить красиво текст, а это сделать под него рамку, то в сети есть много вариаций. Но здесь подойдет простым способом, где будет присутствовать фигура, которую можно поменять в тематическом характере.

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

Все происходит под div, где находится описание, что думаю не лишним выставить класс и через него выводить полностью дизайн.

Так выглядит:



HTML

Код
<div>Описание в рамке, что идет пунктирной линией </div>

CSS

Код
div {
    position:relative;
    border: 3px dashed gray;
    padding: 1em;
    border-radius: 10px;
}

div:after {
    content: '✂';
    position:absolute;
    top:-.5em;
    left:30%;
    color:gray;
    font-size:40px;
    line-height:1;
    text-shadow:10px 0 white, -10px 0 white;
}


Как можно заметить, что сам обвод выстроен под пунктирную линию. Но главное, это фигура, она указана в CSS, что безусловно есть вариант поменять на свою оригинальную.

Демонстрация
Прикрепления: 5090218.png (21.2 Kb)
Страна: (RU)
Kosten
 		Суббота, 23 Марта 2019, 11:58 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Также простое предложение для того - чтоб создать рамку.



Код
<p style="border: 3px solid #0a86ff;
    background-color: #bfbfbd;
    padding: 10px;">ВАШЕ ПРЕДЛОЖЕНИЕ.</p>
Прикрепления: 5965628.png (2.2 Kb)
Страна: (RU)
Kosten
 		Суббота, 23 Марта 2019, 12:05 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Еще одна вариация красивого оформление рамки.



Код
<div style="height: 65px;
    width: 598px;
    margin: auto;
    background-color: #b1ecdb;
    border-left: 4px solid #d20f2c;" align="center">Я не думаю, что могу сказать это достаточно. Основная задача Google - доставлять отличный контент людям, выполняющим поиск. Если это не ваша цель, то все потеряно. </div>
Прикрепления: 0354023.png (7.5 Kb)
Страна: (RU)
Kosten
 		Суббота, 23 Марта 2019, 12:12 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Для полноты, так как такой стиль рамки многим знаком, возможно пригодится.



HTML

Код
<div class="zasetunolas">
В любом случае, никогда не повредит обновить свои знания в области SEO. Посмотрите, что наши авторы используют каждый день.
</div>

CSS

Код
.zasetunolas{
margin: 10px;
padding: 15px 17px 15px 80px;
border: 1px solid #026194;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 2px 2px 3px #bbb;
-moz-box-shadow: 2px 2px 3px #bbb;
-webkit-box-shadow: 2px 2px 3px #bbb;
background: #fff url(http://zornet.ru/.s/img/awd/positive/good.png) 15px 50% no-repeat;
text-align:justify;
color: #000
}
Прикрепления: 9476365.png (10.5 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Красиво оформить рамку для текста на CSS (Оформление текста в красивые рамочки с помощью css)
  • Страница 1 из 1
  • 1
Поиск: