Css оформление текста красивое: 61 CSS-эффект для текста — Записки преподавателя

Логотип Shop Talk

Логотип Shop Talk воссоздан Хьюго с использованием только CSS. Логотип похож на оригинал, но с правильной текстурой.

См. логотип Pen Shop Talk, созданный в CSS Хьюго Дарби-Брауном (@hugo) на КодПене.

Slashed Effect

Эта идея от Robet Messerle дает эффект ножа, нарезанного менее чем 70 строками CSS.

См. CSS-эффект Pen Slash от Robert Messerle (@robertmesserle) на КодПене.

Элегантный эффект тени

Эффект длинной тени для текста, выполненный с помощью CSS. Создатель Хуан Брухо сделал еще 4 эффекта, но этот самый впечатляющий.

См. Текстовые тени Pen CSS3 от Хорхе Эпуньяна (@juanbrujo) на КодПене.

Текстовый эффект тумана

Андреас создает удивительный кинематографический эффект тумана. Применимо только в браузерах Webkit.

См. текстовый эффект Pen Foggy от andreas_pr (@andreas_pr) на КодПене.

Текстовая маска SVG

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

См. текстовую маску Pen SVG от Marco Barría (@fixcl) на КодПене.

Текстовая анимация

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

См. анимацию Pen Text от Yoann (@yoannhel) на КодПене.

Hit The Floor

Этот 3D-эффект от ThatGuySam представляет собой простую игру с текстовыми тенями, но с потрясающим результатом.

Посмотрите текстовый эффект Pen Hit The Floor от ThatGuySam (@ThatGuySam) на КодПене.

Текст фонового клипа

Джинтос экспериментировал с фоновым клипом Webkit, чтобы добавить фоновое изображение внутрь текста. С помощью этого метода он сделал 16 крутых творений.

См. CSS-эффект Pen -webkit-background-clip:text от Jintos (@Jintos) на КодПене.

CSS Text-FX

Moklik добавил к тексту эффект приглушенного света, дающий вам прерывистые вспышки, которые предупреждают об опасности издалека.

См. Pen CSS Text-FX от moklick (@moklick) на КодПене.

Анимация подписания подписи

Гэри Хептинг создал анимацию подписания в реальном времени. Это работает путем применения Javascript к пути SVG для анимации подписи.

См. Pen Animated подписывание подписи (пути SVG) Гэри Хептинга (@ghepting) на КодПене.

Colorful Glitchy 404

Вы слышите звук этого глюка и чувствуете вибрацию внутри своей головы? Вот насколько хорош этот эффект глюка. mistic100 сделан с помощью CSS плюс немного Javascript.

См. Pen Colorful Glitchy 404 от mistic100 (@mistic100) на КодПене.

Космос

Элегантный и вдохновляющий логотип. Он же подходит и для использования в «Космосе», ведь орбиты, понимаете?

Загрузка

Крутой эффект загрузки, который просто скрывает и отображает буквы.

See the Pen ByVYZK Яна Глуда (@igloude) на КодПене.

красивый текст – Блокнот веб-дизайнера

Это может показаться легкой задачей, но добавление стиля к вашему HTML заключается не только в добавлении красивых фонов и границ. Основой красивого сайта должен быть, помимо нескольких других вещей, способ установки текста. Итак, давайте посмотрим, как с помощью всего нескольких строк очень простого CSS мы можем быстро сделать наш шрифт немного красивее и легче для чтения.

Разметка

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

Для основного заголовка страницы мы должны использовать тег h2 (это давно обсуждалось среди веб-разработчиков, некоторые предпочитают использовать этот тег для логотипа страницы, а другие для заголовка страницы).

Подзаголовки должны быть помечены как h3 , h4 и т. д. до h6 в соответствии с их важностью и иерархией в содержании.

Абзацы текста должны быть размечены как p ; перечисляет либо ol , либо ul , в зависимости от того, является ли информация упорядоченной или неупорядоченной; а длинные цитаты должны быть хорошо размечены как blockquote (с элементом уровня блока внутри него, например, p , div , ul или ol ).

Вы можете увидеть исходный код на странице примера для более подробной информации.

Общие стили

Сначала мы начнем с определения некоторых общих стилей для страницы и элементов. Я не собираюсь применять полный сброс CSS, потому что это было бы чрезмерным для этого простого примера:

тело {
маржа: 0;
заполнение: 0;
шрифт: 62,5% "Helvetica Neue", Helvetica, Arial, без засечек;
цвет:#000;
выравнивание текста: по центру;
}

див,
h2, h3, h4, h5, h5, h6,
п,
ул, ол, ли,
цитата {
маржа: 0;
заполнение: 0;
}
 

Итак, мы:

1. Сбрасываем поля и отступы тела и других элементов на ноль
2. Установите общий размер шрифта на 62,5% — это маленькая хитрость, которая облегчит нам жизнь. Когда мы устанавливаем размер шрифта страницы на 62,5 %, мы можем преобразовать используемые нами меры em в пиксели, просто умножив их на 10 (например, 1,2 em равняется 12 пикселям) 9.0018
3. Установить цвет текста на черный
4. Выравнивание по центру текста страницы: это необходимо только для некоторых старых браузеров, чтобы расположить наш контейнер div по центру

Теперь быстро стилизуем контейнер div :

раздел. текст {
ширина: 50 см;
заполнение: 2em 0;
поля:авто;
выравнивание текста: по левому краю;
}
 

Мы сделали его достаточно длинным, чтобы строки текста было удобно читать, но не слишком широко; добавлены отступы сверху и снизу; выровняли контейнер по центру страницы ( margin:auto ) и выровнял текст внутри контейнера по левому краю (помните, что ранее мы установили текст элемента body так, чтобы он был выровнен по центру).

Заголовки

В Интернете общепринятым правилом (но не закреплённым в камне) является то, что текст легче читать, когда заголовки набраны шрифтом с засечками, а остальной текст — шрифтом без засечек. .

Здесь мы будем следовать этому правилу и установим заголовки в Georgia (общий шрифт для большинства операционных систем). У нас также будет меньше line-height для заголовков, чем для остального текста:

h2, h3, h4, h5, h5, h6 {
семейство шрифтов: Грузия, "Times New Roman", Times, с засечками;
высота строки: 1,2;
}
 

Теперь давайте определим размер шрифта каждого из заголовков, которые мы используем на странице (рекомендуется стилизовать все возможные заголовки, даже если вы не используете их на своей странице, это может понадобиться позже, но давайте сделаем этот урок коротким):

ч2 {
размер шрифта: 3. 4em;
нижняя граница:.8em;
}

h3 {
размер шрифта: 2.4em;
заполнение снизу: .2em;
нижняя граница: 1px сплошная # 333;
верхняя граница: 1em;
нижняя граница:.7em;
}

h4 {
размер шрифта: 1.8em;
нижняя граница:.7em;
}
 

Мы также добавили небольшое поле внизу заголовков, чтобы между ними и последующим текстом оставалось свободное пространство.

Чтобы сделать нашу страницу более привлекательной и динамичной, я добавил тонкую рамку (и отступ) к нижней части заголовков h3 .

Пункты

п {
размер шрифта: 1.3em;
высота строки: 1,5;
нижняя граница: 1.3em;
}
 

Абзацы должны иметь меньший размер шрифта, чем заголовки, а также некоторые пробелы вокруг них, следовательно, нижнее поле и большая высота строки: это облегчает чтение текста. Убедитесь, что вы не используете line-height настолько большой, что не позволяет тексту быть кратким блоком, а строки слишком раздвинуты.

Списки

Как и заголовки и абзацы, списки (упорядоченные или неупорядоченные) также должны иметь надлежащее пустое пространство вокруг них. Так что мы позаботимся о том, чтобы всегда было нижнее поле и небольшой левый отступ (left margin), а также сделаем шрифт такого же размера, как у абзацев:

ул, ол {
размер шрифта: 1.3em;
поле:0 0 1.3em 2em;
}

ли {
нижняя граница:.4em;
}
 

Для каждого li я также добавляю маленькое поле margin-bottom , чтобы между каждым из них было хорошее пространство, и они не теснились друг над другом.
В этом примере я сохраняю стили списка по умолчанию ( десятичный для упорядоченного и дисковый для неупорядоченного): в большинстве случаев они выглядят нормально.

Цитаты

Общим элементом, используемым в текстах, является цитата . Это правильный элемент, который следует использовать при составлении длинной цитаты.

Так как мы используем чужие слова, в этом случае неплохо было бы использовать курсив. Поскольку курсив в Helvetica не такой красивый, мы будем использовать Georgia для блок-цитатов с. Мы также добавим поля и отступы и применим красивую светло-серую рамку слева от кавычек, чтобы их было легко заметить при просмотре страницы.

цитата {
отступ слева: 1em;
граница слева: 3px сплошная #999;
поле: 2.5em 2em;
}

цитата р {
шрифт: курсив 1.2em/1.6 Georgia, "Times New Roman", Times, с засечками;
}
 

Дополнительную информацию о том, как стилизовать элемент blockquote , можно найти в ссылках «Ресурсы и дополнительная литература».

Заключение

С помощью CSS легко оформить HTML-текст и сделать его более приятным для чтения. Вам просто нужно следовать нескольким простым правилам:

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

Вы можете сделать с текстом намного больше с помощью CSS: возможности безграничны.