Новое на форуме
  • Страница 1 из 1
  • 1
Форум геймеров » Вебмастеру. Раздел сайтостроения » Скрипты для uCoz » Блоки информации на css
Блоки информации на css
Offline VIP
Модератор
97

351 сообщение



Опубликовано: Среда, 27.09.2017 (10:47) 1

Скрин с моего ресурса так как делал у себя
В CSS
Код
[class*="v_info"]:before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  display: inline-block;
  width: 6px;
  border-radius: 3px; }

.v_info_green:before {
  background: #618414;
  background-image: linear-gradient(45deg, #82b01b 70%, #618414 71%); }

.v_info_red:before {
  background: #e8484b;
  background-image: linear-gradient(45deg, #ee7578 70%, #e8484b 71%); }

.v_info_blue:before {
  background: #427abe;
  background-image: linear-gradient(45deg, #6895cb 70%, #427abe 71%); }

.v_info_orange:before {
  background: #e26101;
  background: linear-gradient(45deg, #fe7a18 70%, #e26101 71%); }

[class*="v_info"] {
  display: inline-block;
  vertical-align: top;
  position: relative;
  padding: 5px 0px 5px 20px;
  /*margin: 30px auto;*/
  margin: 30px;
  max-width: 75%;
  line-height: 1.5; }

.demo code {
    position: relative;
    top: -14px;
    color: black;
}
code {
    font-family: courier;
    background: #e5edf6;
    border: solid 1px #b4cae5;
    border-radius: 2px;
    box-shadow: inset 0px 0px 2px white;
    margin: 3px 5px;
    padding: 3px 5px;
}

@media screen and (max-width: 480px) {
  [class*="v_info"] {
    margin: 15px auto;
    max-width: 95%; }

В нужное место вставляем
Код
<div class="v_info_blue demo">
    <code>Заголовок</code>
    <p>
  Полный текст
    </p>
</div>

Цвет меняем с помощью изменения v_info_blue demo то что выделено меняем на (red, green, orange)

Думаю кому нужно тот без проблем сделает под ББ-Код
Прикрепления: 1395492.png(90.5 Kb)
Offline DESTEQ
Руководящий проектом
Веб-мастер
178

753 сообщения



Опубликовано: Среда, 27.09.2017 (12:13) 2
VIP, полезно, но вот на счёт заголовка: он не стилизован или такой и должен быть?)
просто выглядит как-то странно на мой взгляд


Offline VIP
Модератор
97

351 сообщение



Опубликовано: Среда, 27.09.2017 (12:56) 3
Цитата DESTEQ ()
VIP, полезно, но вот на счёт заголовка: он не стилизован или такой и должен быть?)
просто выглядит как-то странно на мой взгляд

Можно изменить

Код
.demo code {
    position: relative;
    top: -14px;
    color: black;
}
code {
    font-family: courier;
    background: #e5edf6;
    border: solid 1px #b4cae5;
    border-radius: 2px;
    box-shadow: inset 0px 0px 2px white;
    margin: 3px 5px;
    padding: 3px 5px;
}


К примеру: на быструю сделал


Код
.demo code {
    position: relative;
    top: -5px;
    color: black;
}
code {
    font-family: courier;
    background: linear-gradient(#ffd21f 0%, #ff0d05 100%) !important;
    border-radius: 0px 15px 0px 0px;
    box-shadow: inset 0px 0px 2px #6310ed;
    margin: 3px 0px;
    padding: 3px 5px;
}
Прикрепления: 3210147.png(49.5 Kb)
Offline CEREBRUM
Проверенный
85

187 сообщений



Опубликовано: Среда, 27.09.2017 (13:14) 4
Offline DESTEQ
Руководящий проектом
Веб-мастер
178

753 сообщения



Опубликовано: Среда, 27.09.2017 (13:16) 5
VIP, да тут на вкус и цвет дело, кто умеет под себя переделает, а так, круто ^_^

Offline VIP
Модератор
97

351 сообщение



Опубликовано: Среда, 27.09.2017 (13:24) 6
На всякий может кому понравится

Код
code {
    font-family: courier;
    background: linear-gradient(90deg, #dd1000 0%, #f1b509 100%, #159696);
    border-radius: 0px 15px 0px 0px;
    box-shadow: inset 0px 0px 2px #6310ed;
    margin: 3px 0px;
    padding: 3px 5px;
}
Прикрепления: 8184579.png(29.4 Kb)
Offline DESTEQ
Руководящий проектом
Веб-мастер
178

753 сообщения



Опубликовано: Среда, 27.09.2017 (13:29) 7
VIP, как время будет, перепишу под bb-коды :)

Форум геймеров » Вебмастеру. Раздел сайтостроения » Скрипты для uCoz » Блоки информации на css
  • Страница 1 из 1
  • 1
Поиск: