Рассмотрим некоторые простые и красивые CSS трюки, хаки, которые помогут украсить текст/контент на вашем сайте.
Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.
Ваш компьютер, ноутбук чувствует себя очень плохо – тормозит, выключается – а вам нужно работать и создавать красивые сайты – то советую вызвать мастера, который в считанные минуты починит ваше устройство.
1. Используем углы.
Можете перейти сюда “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. Давайте окружим текст вот такой пунктирной рамкой:
Для этого нужно прописать следующие HTML код (для примера, можете также вставить его во вкладке “Текст” в редакторе записи/странички):
<div class="coupon"> Давайте окружим текст вот такой пунктирной рамкой </div>
И прописать CSS стили (в файле style.css):
.coupon {
width: 250px;
padding: 10px;
text-align: center;
border: 3px dashed #ccc; }
3. Красивое оформление цитат:
Для этого нужно прописать следующие HTML код (для примера, можете также вставить его во вкладке “Текст” в редакторе записи/странички):
<div class="blockquote2"> Текст цитаты. Текст цитаты. Текст цитаты. Текст цитаты. Текст цитаты. Текст цитаты. Текст цитаты. Текст цитаты. Текст цитаты. Текст цитаты. Текст цитаты. </div>
И прописать CSS стили (в файле style.css):
.blockquote2 {
margin: 1em 3em;
color: #999;
border-left: 2px solid #999;
padding-left: 1em; }
4. В стиле почтовой марки.
Для этого нужно прописать следующие HTML код (для примера, можете также вставить его во вкладке “Текст” в редакторе записи/странички):
<div class="stamp"> <p>9р.</p> </div>
И прописать CSS стили (в файле style.css):
.stamp {
width: 355px;
height: 277px;
background: #fff url(/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. Закругленные углы.
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;”, если нужно ограничить текст по ширине.
Вы также можете закруглить не все углы стразу, а например только два из них:
.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; }
или только один угол:
.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. Красивая ссылка.
При наведении курсора мышки на ссылку под ней появляется подчеркивание, которое представлено в виде постепенно растягивающейся линии.
Для этого достаточно прописать в файле стилей – 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}