Страница 1 из 11
Форум про uCoz » Всё для web-мастера » Web мастеру » Делаем простую рамку под описание на HTML
Делаем простую рамку под описание на HTML
Kosten
Дата: Воскресенье, 28.02.2016, 19:34 | Сообщение # 1
Администраторы
Сообщений:12696
Награды: 39


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



Код:

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


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

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

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

color:#fff Цвет шрифта


Сопрано
Дата: Воскресенье, 28.02.2016, 19:55 | Сообщение # 2
Пользователи
Сообщений:265
Награды: 2


Под описание сайта или категорий подойдет. И не нужно не каких рамок, здесь все просто.
Maryges
Дата: Воскресенье, 28.02.2016, 23:38 | Сообщение # 3
Пользователи
Сообщений:116
Награды: 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(32Kb)
Kosten
Дата: Понедельник, 29.02.2016, 00:31 | Сообщение # 4
Администраторы
Сообщений:12696
Награды: 39


Почти одинаковы, только стили отдельно.

workman
Дата: Понедельник, 29.02.2016, 06:07 | Сообщение # 5
Vip
Сообщений:1576
Награды: 7


ну или можно такую... ))
Код
.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(6Kb)


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

Сообщение отредактировал workman - Понедельник, 29.02.2016, 06:34
Kosten
Дата: Понедельник, 29.02.2016, 11:45 | Сообщение # 6
Администраторы
Сообщений:12696
Награды: 39


workman, явно это намного лучше смотрится, здесь хоть какое то разнообразие.



Форум про uCoz » Всё для web-мастера » Web мастеру » Делаем простую рамку под описание на HTML
Страница 1 из 11
Поиск: