Перейти к содержанию
IPSGuru.ru - Сообщество веб администраторов

Стильные блоки на CSS


Severniy

Рекомендуемые сообщения

  • Администраторы

2.png

В CSS

.message {
background-color: white;
width: 400px;
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: "‼";
}
 
.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>

 

IPSGuru.Ru - Это блок, в котором содержится сообщение об ошибке или просто важная информация.

Zone-CS.RU - Это блок, в котором содержится какое-то предупреждение или просто информация средней важности.

Zadrot.Pro - Это блок, в котором содержится сообщение об успешном выполнении чего-либо или просто любая информация.

  • Лайк 7
Ссылка на комментарий

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйтесь. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...