ZorNet.Ru — сайт для вебмастера » HTML и CSS » Красивое оформление текста при CSS на сайт

Красивое оформление текста при CSS на сайт

Красивое оформление текста при CSS на сайт
Безусловно вы видели на ресурсах, что красиво оформленный текст к примеру название сайте. И здесь разберем 2 способа как можно сделать красиво шрифт. Все будет создано при помощи CSS3, где первый способ как раз подойдет под название сайта, так как обвернут будет в h1 и там будут переменятся тени. Это стало популярно так делать, все очень просто, это красиво и оригинально смотрится, если еще настроить стили как вам нужно. И не нужно забывать, что сейчас основном все браузеры отображают эти эффекты, что думаю не мало важно.

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

Как всем известно, что Гугл предоставляет бесплатные шрифты, и один их них под названием Audiowide будет использоваться здесь. Не нужно забывать, что некоторые идут на кириллицу и может получиться так, как видите на первое изображение, это также нужно учитывать. А так очень креативность решение использовать эффект на сайте, это может быть как в название статьи или как уже говорилось, в прописывание домена или самого интернет ресурса.

Красивый эффект на логотип сайта

1) Первый вариант Эффектная анимация с текстом плюс тени:

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

Это ставим где вам нужно.

Код
<h1>ZORNET.Ru: Сайт про uCoz</h1>


И под них стили, которые при нажатие на КЛИК появятся и можете скопировать.



2) Второй вариант на размытый текст:

Вариация размытый текст на сайте

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

Код
<p class="blur" style="text-align: center;">ZORNET.Ru</p>


Но и небольшие стили КЛИК и копируем в CSS сайта, также их можно заключить в style ниже. И здесь также как и на первом прикреплен шрифт.



PS - вы можете менять как гаму цвета или добавлять градиенты, также если брать первый пример, то задать движение теней как вы видите.

Источник: Dbmast.ru
20 Октября 2016 Просмотров: 5038 Комментариев: (9)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 9
tsakonter
tsakonter 20 Октября 2016 22:581
0
Интересное решение, под h1 сделано, это же можно в шапке название поставить и красиво, но оригинально точено смотреться будет.
Kosten
Kosten 20 Октября 2016 23:176
0
Но название на главной странице основном заключают под h1 - как самые главные ключевые слова.
Советник
Советник 20 Октября 2016 23:032
0
Вот это нормально, еще бы под логотип как то сделать, и вообще бы было замечательно. Или можно просто ссылку поставить и он также на эффекте будет.
Tergran
Tergran 20 Октября 2016 23:114
0
Не думаю, что ссылкой так будет, но на юкоз сайтах встречал, где как раз логотип или по немного поворачивался по сторонам, но красивый эффект, но с тенью бы думаю не хуже было бы, если можно сделать.
Сафрон
Сафрон 20 Октября 2016 23:063
0
Как то попадались они мне, не исключаю, что на самом том источнике. Там еще есть, но они уже без эффекта, но красиво сделаны на градиентах.
ucozmental
ucozmental 20 Октября 2016 23:145
0
Что темный фон выбрали, хотя в материале есть DEMO, но там как то уж не слишком много места занимает.
Kosten
Kosten 20 Октября 2016 23:187
0
Но это уже потом сделал, все на демонстраций представлено как работать будет, правда в темной гамме, но и темные тени, здесь каждый может вывести по своему и под свой сайт.
Kolinkor
Kolinkor 21 Октября 2016 02:068
0
Здесь можно центра поставить и по другому, и не убирая его. Есть же как на право или на лево выставлять и их значение. А также не забываем, что по всем краям можно поставить.

align="left" будет сделано выравнивание текста по левому краю;

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

align="right" будет сделано выравнивание текста по правому краю;

align="center" будет сделано выравнивание текста по центру;

align="justify" данный параметр выравнивает текст по обоим краям, в результате все строчки становятся выровненными, как и на этом сайте
Kosten
Kosten 21 Октября 2016 02:319
0
Здесь нужно добавить, что так нужно ставить, и тогда будет значение работать.

Код
<p align="center">Параграф №1...... </p>
<p align="right">Параграф №2...... </p>
avatar