• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Делаем простую рамку под описание на HTML
Делаем простую рамку под описание на HTML
Kosten
Воскресенье, 28 Февраля 2016 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
Иногда бывает, что в статье нужно вывести описание в папку, чтоб это было заметно, но и безусловно смотрелось оригинально. И здесь на поможет простой код, который можно настроить по цветовой гамме, также оставить или убрать углы, и написать что вам нужно.



Код:

Код
<div style="padding:10px;border-radius: 5px;background: #24638E;color:#fff;margin-bottom:10px;">Здесь можно написать, что оскорбление неприемлемо и карается баном.. Матюкаться также нельзя, а то покажите себя быдлом и вообще не кто общаться не будет с вами. Это для спамеров, которые любят не по теме оставлять ссылки, также бан. Флуд не приветствуется это все таки материал, а трепаться можно в реале.</div>


Чтоб немного разобраться, нужно знать пару элементов.

border-radius: 15px -Закругление углов

background: #24638E-Цвет рамки

color:#fff Цвет шрифта
Страна: (RU)
Сопрано
Воскресенье, 28 Февраля 2016 | Сообщение 2
Оффлайн
Vip
Сообщений:462
Награды: 4
Под описание сайта или категорий подойдет. И не нужно не каких рамок, здесь все просто.
Страна: (RU)
Maryges
Воскресенье, 28 Февраля 2016 | Сообщение 3
Оффлайн
Пользователи
Сообщений:142
Награды: 0
Можно и по другому сделать, но дизайн будет почти такой, но по другому установка. Только будет под темный цвет, также углы закругленные.



Для начало в CSS ставим:

Код
/* ---------------- uMasters_tab ---------------- */
.uMasters_tab {text-shadow:1px 1px 0px #000000;border:1px solid #1d1d1d; background:#303030; padding:3px 4px; font-size:11px; font-family:tahoma; color:#b5b5b5; text-shadow:1px 1px 0px #141414; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}


Но а теперь в в сам материал файлов или блога.

<div class="uMasters_tab">
Здесь ваш текст
</div>
Прикрепления: 8708714.png (31.7 Kb)
Страна: (RU)
Kosten
Понедельник, 29 Февраля 2016 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
Почти одинаковы, только стили отдельно.
Страна: (RU)
workman
Понедельник, 29 Февраля 2016 | Сообщение 5
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
ну или можно такую... ))
Код
.quotegde31Ru{background-color:#F9F9F9;background-image:url(http://gde31.ru/icon/note.png);margin-top:2em;margin-left:auto;margin-right:auto;border-radius:11px 9px;-moz-border-radius:10px 10px;-webkit-border-radius:10px 10px;padding:14px 30px 16px 82px;margin:0;-webkit-box-shadow:2px 2px 3px #999;-moz-box-shadow:2px 2px 3px #999;min-height:37px;height:auto!important;overflow:visible;position:relative;bottom:8px;border:1px solid #999;background-position:21px 9%;background-repeat:no-repeat;text-align:justify}

Код
<div class="quotegde31Ru">
Здесь ваш текст
</div>


демо
Прикрепления: 8682040.png (5.7 Kb)


Сообщение отредактировал
workman - Понедельник, 29 Февраля 2016, 06:34
Страна: (RU)
Kosten
Понедельник, 29 Февраля 2016 | Сообщение 6
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
workman, явно это намного лучше смотрится, здесь хоть какое то разнообразие.

Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Делаем простую рамку под описание на HTML
  • Страница 1 из 1
  • 1
Поиск: