ФОРУМ ROOTGAMES.RU – сообщество геймеров нашего портала
Форум на нашем сайте имеет особое место. Где если не здесь вы можете обсудить последние игровые новинки, почитать полезные гайды и получить помощь по какой-либо игре в специализированных темах. Мы гарантируем Вам отличное времяпровождение на нашем форуме. Общайтесь с пользователями, находите новых друзей как для общения так и для совместной игры.
Страница 1 из 11
Форум геймеров » uCoz вебмастеру » Скрипты для uCoz » Стильные блоки информации
Стильные блоки информации
Offline VIP
Модератор
36

172 сообщения

Опубликовано: Среда, 27.09.2017 (18:27) 1
Очередные блоки на css
Скрин с моего веб форума



В CSS
Код
.message {
background-color: #e6e1e1;
width: 95%;
padding: 1em 1em 1em 1.5em;
border-left-width: 6px;
border-left-style: solid;
border-radius: 3px;
position: relative;
line-height: 1.5;
margin: 50px;
}

.message + .message {
margin-top: 2em;
}

.message:before {
color: white;
width: 1.5em;
height: 1.5em;
position: absolute;
top: 1em;
left: -3px;
border-radius: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
font-weight: bold;
line-height: 1.5;
text-align: center;
}

.message p {
margin: 0 0 1em;
}

.message p:last-child {
margin-bottom: 0;
}

.message--error {
border-left-color: firebrick;
}

.message--error:before {
background-color: firebrick;
content: "X";
}

.message--warning {
border-left-color: darkorange;
}

.message--warning:before {
background-color: darkorange;
content: "!";
}

.message--success {
border-left-color: darkolivegreen;
}

.message--success:before {
background-color: darkolivegreen;
content: "✔";
}

В нужное место вставляем
Код
<div class="message  message--error">
<p>Это блок, в котором содержится сообщение об ошибке или просто важная информация.</p>
</div>

<div class="message  message--warning">
<p>Это блок, в котором содержится какое-то предупреждение или просто информация средней важности.</p>
</div>

<div class="message  message--success">
<p>Это блок, в котором содержится сообщение об успешном выполнении чего-либо или просто любая информация.</p>
</div>
Прикрепления: 2403516.png(21Kb)
Offline DESTEQ
Руководящий проектом
Веб-мастер
142

591 сообщение

Опубликовано: Среда, 27.09.2017 (19:33) 2
VIP, о, вот это стильненько, даже себе возьму, пожалуй, спасибо :)

Offline DESTEQ
Руководящий проектом
Веб-мастер
142

591 сообщение

Опубликовано: Среда, 27.09.2017 (20:05) 3
VIP, адаптировал под uCoz :)

Прикрепления: 6694143.jpg(32Kb)


Offline Бармен
Пользователь
0

2 сообщения

Опубликовано: Среда, 27.09.2017 (20:34) 4
А что не плохо смотрится.
Offline VIP
Модератор
36

172 сообщения

Опубликовано: Среда, 27.09.2017 (20:37) 5
Пригодились )
Offline Fenomen
Пользователь
0

8 сообщений

Опубликовано: Четверг, 28.09.2017 (22:42) 6
Нормальный скрипт)
Форум геймеров » uCoz вебмастеру » Скрипты для uCoz » Стильные блоки информации
Страница 1 из 11
Поиск: