• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Красивые блоки информации на HTML + CSS (Раскрывающиеся блоки для подсказок или дополнительной)
Красивые блоки информации на HTML + CSS
Kosten
Дата: Пятница, 2019-07-05, 03:14 | Сообщение 1
Оффлайн
Администраторы
Сообщений:24666
Награды: 57


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

Так получится:



HTML

Код
<div class="dan_logedas_blue kedasunag">
    <code>Заголовок ключевого слова</code>
    <p>
Здесь идет тематическое описание.
    </p>
</div>

CSS

Код
[class*="dan_logedas"]:before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  display: inline-block;
  width: 6px;
  border-radius: 3px; }

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

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

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

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

[class*="dan_logedas"] {
  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; }

.kedasunag 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;
}

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

Цветовая палитра меняется с изменением dan_logedas_blue kedasunag то что выделено меняем на (red, green, orange)_blue demo то что выделено меняем на (red, green, orange) и многие другие.
Прикрепления: 4337529.png(30.8 Kb)
Страна: (RU)
VIP36RUS
Дата: Пятница, 2019-07-05, 19:50 | Сообщение 2
Оффлайн
Проверенные
Сообщений:204
Награды: 4


Какой то очень знакомый блок )

IPSGuru.RU - Сообщество веб администраторов
GTAfiveStar.Ru - GTA V Role Play
Любая тема на uCoz не интересует!
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Красивые блоки информации на HTML + CSS (Раскрывающиеся блоки для подсказок или дополнительной)
  • Страница 1 из 1
  • 1
Поиск: