Войти / Регистрация

Войти в свою учетную запись

Запомнить меня

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

Поля, отмеченные звездочкой (*), обязательны для заполнения.
Reload Captcha

Блоки выделения текста с повышенным вниманием на CSS.

Оцените материал
(1 Голосовать)

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

Первый способ

Давайте рассмотрим самый простой способ. Ниже вы можете увидеть что у нас должно получится.

простой способ

Наш блок будет состоять из одного элемента с классами и необходимым текстом внутри.

	<div class="note note-important">
		Текст текст текст
	</div>

Теперь добавим основные стили к классу note

	.note{
	  display: block;
	  margin: 10px;
	  padding: 10px;
	  border: 2px dotted #ccc;
	}
	
	.note:before{
	  content: "";
	  display: block;
	  margin: 0;
	  padding: 10px;
	 
	}

Для добавления шапки с заголовком мы воспользуемся отдельным классом. Это даст нам возможность использовать разные заголовки и фоновый цвет.

	.note-important:before{
	  content: "ВАЖНО!";
	  background: #ff0;
	}

Теперь все что вам нужно, добавить свои дополнительные классы для разных потребностей.

	.note-notice:before{
	  content: "ВНИМАНИЕ!";
	  background: #ff5722;
	  color: #fff;
	}
	
	.note-remember:before{
	  content: "ЗАПОМНИ!";
	  background: #3f51b5;
	  color: #fff;
	}
простой способ 2

Весь код:

HTML

	<div class="note note-important">
		Текст текст текст
	</div>
	
	<div class="note note-notice">
		Текст текст текст
	</div>
	
	<div class="note note-remember">
		Текст текст текст
	</div>

CSS

	.note{
	  display: block;
	  margin:10px;
	  padding: 10px;
	  border: 2px dotted #ccc;
	}
	
	.note:before{
	  content: "";
	  display: block;
	  margin: 0;
	  padding: 10px;
	 
	}
	
	.note-important:before{
	  content: "ВАЖНО!";
	  background: #ff0;
	}
	
	.note-notice:before{
	  content: "ВНИМАНИЕ!";
	  background: #ff5722;
	  color: #fff;
	}
	
	.note-remember:before{
	  content: "ЗАПОМНИ!";
	  background: #3f51b5;
	  color: #fff;
	}

Второй способ

Второй способ похож на первый, но шапка будет вынесена за пределы текстового поля, а сам текст прядётся обернуть в дополнительный div.

второй способ

Весь код:

HTML

	<div class="note note-important">
	  <div>Текст текст текст</div>
	</div>
	
	<div class="note note-notice">
	  <div>Текст текст текст</div>
	</div>
	
	<div class="note note-remember">
	  <div>Текст текст текст</div>
	</div>

CSS

	.note{
	  display: block;
	  margin:10px;
	  
	}
	
	.note div{
	  padding: 10px;
	  border: 1px solid #ccc;
	  border-top: none;
	}
	
	.note:before{
	  content: "";
	  display: block;
	  margin: 0;
	  padding: 10px;
	 
	}
	
	.note-important:before{
	  content: "ВАЖНО!";
	  background: #ff0;
	}
	
	.note-notice:before{
	  content: "ВНИМАНИЕ!";
	  background: #ff5722;
	  color: #fff;
	}
	
	.note-remember:before{
	  content: "ЗАПОМНИ!";
	  background: #3f51b5;
	  color: #fff;
	}
второй способ 2

Если этот материал вам хоть как-то помог, пожалуйста поставьте оценку в начале статьи!!!! Text.ru - 100.00%

Оставить комментарий