украшаем текст с CSS

Украшаем контент с помощью CSS (свойство border)

Рассмотрим некоторые простые и красивые CSS трюки, хаки, которые помогут украсить текст/контент на вашем сайте.

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.

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

1. Используем углы.

cssborder1

Можете перейти сюда «meyerweb.com/eric/css/edge/slantastic/demo.html» и посмотреть как эффектно выглядит страничка.

Для примера давайте сделаем аналогично у себя на wordpress!

Для этого заходим в админку wordpress, создаем новую запись/страничку, в редакторе записи/странички выбираем вкладку «Текст»:

текстовой редактор по умолчанию в вордпресс

и вставляем в неё следующий код:

<h1>слантастик</h1>
<div class="slant2" style="width: 0;"></div>
<div class="slant2" style="width: 1em;"></div>
<div class="slant2" style="width: 2em;"></div>
<div class="slant2" style="width: 3em;"></div>
<div class="slant2" style="width: 4em;"></div>
<div class="slant2" style="width: 5em;"></div>
<div class="slant2" style="width: 6em;"></div>
<div class="slant2" style="width: 7em;"></div>
<div class="slant2" style="width: 8em;"></div>
<div class="slant2" style="width: 9em;"></div>
<div class="slant2" style="width: 10em;"></div>
<div class="slant1" style="width: 10em;"></div>
<div class="slant1" style="width: 9em;"></div>
<div class="slant1" style="width: 8em;"></div>
<div class="slant1" style="width: 7em;"></div>
<div class="slant1" style="width: 6em;"></div>
<div class="slant1" style="width: 5em;"></div>
<div class="slant1" style="width: 4em;"></div>
<div class="slant1" style="width: 3em;"></div>
<div class="slant1" style="width: 2em;"></div>
<div class="slant1" style="width: 1em;"></div>
<div class="slant1" style="width: 0;"></div>
<div class="slant1" style="width: 5em;"></div>
<div class="slant1" style="width: 4em;"></div>
<div class="slant1" style="width: 3em;"></div>
<div class="slant1" style="width: 2em;"></div>
<div class="slant1" style="width: 1em;"></div>
<div class="slant1" style="width: 0;"></div>

<p>
Здесь я выбрал в левом верхнем углу пункт Most Viewed (Самые популярные), а далее вот картинку с синеньким курсором (обратите внимание, что на картинке написано маленькими буквами cursor set — то есть это набор курсоров, в моем случае курсоры разных цветов, если же на картинке такой надписи нет, то там один курсор). Анимированный или статичный курсор тоже видно сразу — анимированный на картинке будет двигаться или меняться.
</p>
<p>
Здесь можете скачать один курсор определенного цвета или же весь сет. Я скачал весь сет — для этого нажмите красную кнопку Download. У меня скачался zip архив, в котором лежат статичные курсоры формата .cur.
</p>
<p>
Также картинки для курсора можно создать самому с помощью одной из специальных программ для создания курсоров или конвертации форматов графических файлов.
</p>
<p>
Здесь можете скачать один курсор определенного цвета или же весь сет. Я скачал весь сет — для этого нажмите красную кнопку Download. У меня скачался zip архив, в котором лежат статичные курсоры формата .cur.
</p>
<p>
Здесь я выбрал в левом верхнем углу пункт Most Viewed (Самые популярные), а далее вот картинку с синеньким курсором (обратите внимание, что на картинке написано маленькими буквами cursor set — то есть это набор курсоров, в моем случае курсоры разных цветов, если же на картинке такой надписи нет, то там один курсор). Анимированный или статичный курсор тоже видно сразу — анимированный на картинке будет двигаться или меняться.
</p>
<p>
Здесь я выбрал в левом верхнем углу пункт Most Viewed (Самые популярные), а далее вот картинку с синеньким курсором (обратите внимание, что на картинке написано маленькими буквами cursor set — то есть это набор курсоров, в моем случае курсоры разных цветов, если же на картинке такой надписи нет, то там один курсор). Анимированный или статичный курсор тоже видно сразу — анимированный на картинке будет двигаться или меняться.
</p>
<p>
Здесь я выбрал в левом верхнем углу пункт Most Viewed (Самые популярные), а далее вот картинку с синеньким курсором (обратите внимание, что на картинке написано маленькими буквами cursor set — то есть это набор курсоров, в моем случае курсоры разных цветов, если же на картинке такой надписи нет, то там один курсор). Анимированный или статичный курсор тоже видно сразу — анимированный на картинке будет двигаться или меняться.
</p>

И прописываем CSS стили в файле style.css — для этого в админке wordpress, в левом меню выбираем пункт «Внешний вид» и кликаем по подпункту «Редактор» — и у вас откроется файл стилей:

div.slant1 {border-style: solid none none solid; border-color: #69C #69C #69C white; border-width: 1em; margin: 0 0 0 0.25em; padding: 0; float: right; clear: right;}
div.slant2 {height: 0; border-style: solid; border-color: #69C #69C #69C white; border-width: 0 0 3em 1em; margin: 0 0 0 0.25em; padding: 0; float: right; clear: right;}

2. Давайте окружим текст вот такой пунктирной рамкой:

cssborder2

Для этого нужно прописать следующие HTML код (для примера, можете также вставить его во вкладке «Текст» в редакторе записи/странички):

<div class="coupon">
Давайте окружим текст вот такой пунктирной рамкой
</div>

И прописать CSS стили (в файле style.css):

.coupon {
	width: 250px;
	padding: 10px;
	text-align: center;
	border: 3px dashed #ccc; }

3. Красивое оформление цитат:

cssborder3

Для этого нужно прописать следующие HTML код (для примера, можете также вставить его во вкладке «Текст» в редакторе записи/странички):

<div class="blockquote2">
Текст цитаты. Текст цитаты. Текст цитаты. Текст цитаты. Текст цитаты. Текст цитаты. Текст цитаты. Текст цитаты. Текст цитаты. Текст цитаты. Текст цитаты. 
</div>

И прописать CSS стили (в файле style.css):

.blockquote2 {
	margin: 1em 3em;
	color: #999;
	border-left: 2px solid #999;
	padding-left: 1em; }

4. В стиле почтовой марки.

cssborder4

Для этого нужно прописать следующие HTML код (для примера, можете также вставить его во вкладке «Текст» в редакторе записи/странички):

<div class="stamp">
	<p>9р.</p>
</div>

И прописать CSS стили (в файле style.css):

.stamp {
	width: 355px;
	height: 277px;
	background: #fff url(http://mnogoblog.ru/wp-content/uploads/2017/02/ai0.jpg) no-repeat;
	border: 12px dashed #1b1a19; }
.stamp p {
	color: #fff;
	margin: 10px 10px 0 0;
	font: bold 60px Georgia, "Times New Roman", Times, serif;
	text-align: right; }

5. Закругленные углы.

cssborder5

HTML код:

<div class="rounded">
Закругленные углы.Закругленные углы.Закругленные углы.Закругленные углы.
</div>

CSS код:

.rounded {
        background-color: #666;
	color: #fff;
	font-weight: bold;
	padding: 10px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px; }

В CSS коде можно прописать ещё ширину блока «width: 300px;», если нужно ограничить текст по ширине.

Вы также можете закруглить не все углы стразу, а например только два из них:

cssborder6

.rounded {
	border: 2px solid #fc0;
	padding: 8px 10px;
	font-size: 120%;
	color: #c90;
	font-weight: bold;
	background-color: #ff9;
	-moz-border-radius-topleft: 8px;
	-webkit-border-top-left-radius: 8px;	
	-moz-border-radius-bottomright: 8px;
	-webkit-border-bottom-right-radius: 8px; }

или только один угол:

cssborder7

.rounded {
	border: 1px solid #999;
	background-color: #d8d8f4;
	margin: 1em 40px;
	padding: 15px;
	-moz-border-radius-topleft: 15px;
	-webkit-border-top-left-radius: 15px;	
	-moz-border-radius-topright: 15px;
	-webkit-border-top-right-radius: 8px; 	
	-moz-border-radius-bottomleft: 15px;
	-webkit-border-bottom-left-radius: 15px; }

6. Красивая ссылка.

При наведении курсора мышки на ссылку под ней появляется подчеркивание, которое представлено в виде постепенно растягивающейся линии.

cssborder8

Для этого достаточно прописать в файле стилей — style.css — следующий код:

a{color:#00B4CC;text-decoration:none;transition:all 500ms ease-in-out;position:relative}a:before{content:'';position:absolute;bottom:-1px;left:50%;width:0;border-bottom:2px solid #00B4CC;transform:translateX(-50%);transition:all 500ms ease-in-out}a:hover,a:focus{color:#008C9E}a:hover:before,a:focus:before{width:100%;border-color:#008C9E}