» »

Красивое оформление текста при 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.10.2016 Просмотров: 444 Комментарий: (9)

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

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

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

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

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

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

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

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

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