Предупредительные сообщения на CSS

Пример:

Предупредительное сообщение "SUCCESS".

<div class="n-success">...</div>

Предупредительное сообщение "WARNING".

<div class="n-warning">...</div>

Предупредительное сообщение "DANGER".

<div class="n-danger">...</div>

Предупредительное сообщение "INFO".

<div class="n-info">...</div>

В примере используются иконки шрифта Font Awesome, которые при желании можно заменить на другие

HTML:

<div class="n-success">
	<p>Предупредительное сообщение "SUCCESS".</p>
</div>
<div class="n-warning">
	<p>Предупредительное сообщение "WARNING".</p>
</div>
<div class="n-danger">
	<p>Предупредительное сообщение "DANGER".</p>
</div>
<div class="n-info">
	<p>Предупредительное сообщение "INFO".</p>
</div>

<p>Предупредительное сообщение "SUCCESS".</p>

</div>

<p>Предупредительное сообщение "WARNING".</p>

</div>

<p>Предупредительное сообщение "DANGER".</p>

</div>

<p>Предупредительное сообщение "INFO".</p>

</div>

CSS:

.n-success,
.n-warning,
.n-danger,
.n-info {
	margin: 25px;
	padding: 12px 12px 12px 37px;
	color: #333;
	border-radius: 2px;
	background: #fff;
	position: relative;
	font-weight: bold;
	font-family: Verdana, sans-serif;
    box-sizing: border-box;
}
.n-success:before,
.n-warning:before,
.n-danger:before,
.n-info:before {
	content: "";
	background: inherit;
	color: inherit;
	border: inherit;
	display: block;
	text-align: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	line-height: 48px;
	position: absolute;
	left: -25px;
    box-sizing: border-box;
	font-family: "FontAwesome";
	font-size: 22px;
}
.n-success {
	border: 2px solid #32a846;
	color: #32a846;
}
.n-success:before {
	content: "\f00c";
}
.n-warning {
	border: 2px solid #f08d3c;
	color: #f08d3c;
}
.n-warning:before  {
	content: "\f12a";
}
.n-danger {
	border: 2px solid #d9534f;
	color: #d9534f;
}
.n-danger:before  {
	content: "\f057";
}
.n-info {
	border: 2px solid #3d98e3;
	color: #3d98e3;
}
.n-info:before  {
	content: "\f129";
}

.n-success,

.n-warning,

.n-danger,

.n-info {

margin: 25px;

padding: 12px 12px 12px 37px;

color: #333;

border-radius: 2px;

background: #fff;

position: relative;

font-weight: bold;

font-family: Verdana, sans-serif;

box-sizing: border-box;

}

.n-success:before,

.n-warning:before,

.n-danger:before,

.n-info:before {

content: "";

background: inherit;

color: inherit;

border: inherit;

display: block;

text-align: center;

width: 50px;

height: 50px;

border-radius: 50%;

line-height: 48px;

position: absolute;

left: -25px;

box-sizing: border-box;

font-family: "FontAwesome";

font-size: 22px;

}

.n-success {

border: 2px solid #32a846;

color: #32a846;

}

.n-success:before {

content: "\f00c";

}

.n-warning {

border: 2px solid #f08d3c;

color: #f08d3c;

}

.n-warning:before {

content: "\f12a";

}

.n-danger {

border: 2px solid #d9534f;

color: #d9534f;

}

.n-danger:before {

content: "\f057";

}

.n-info {

border: 2px solid #3d98e3;

color: #3d98e3;

}

.n-info:before {

content: "\f129";

}

Один такой как я: 25.10.2022 в 20:39

Спасибо. Искал что то подобное. На ips4 движке сделал кнопки с данными css стилями. Все отлично работает

Ответить
Станислав: 19.07.2022 в 14:38

Здравствуйте! Пересадить свой сайт на другой шаблон решил и столкнулся с тем, что иконки не отображаются: https://disk.yandex.ru/i/9nJDhTy1XkVMTQ
Примерно, в чём копать, не подскажите?

Ответить
- Станислав: 19.07.2022 в 14:40
  
  Тут же нашёл: < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" >
  
  Ответить
- Alexander: 20.07.2022 в 09:00
  
  Тут иконки сделаны шрифтом awesome, если они не подключены на сайте, то лучше заменить символы на какие-нибудь эмодзи или СВГ графику.
  Другими словами ради этих сообщений не стоит специально подключать этот шрифт.
  
  Ответить
  - Станислав: 14.08.2022 в 22:09
    
    Здравствуйте! Спасибо большое за подсказку!
    
    Ответить

Пример:

HTML:

CSS:

Смотрите также:

Добавить комментарий:

Комментарии: