| Kosten | Суббота, 10 Февраля 2018 | Сообщение 1 |
| Веб сайты стали средством обмена информацией со всем миром. Это перешло на включение медиа, например, фотографий и видео. Но текст на странице по прежнему остается основным выбором для веб-публикации. Это будет означать, что то, как вы структурируете параграфы предложения и текст на странице, может сильно повлиять, если посетитель захочет придерживаться и прочитать то, что вы хотите сказать.
И вот один из многих CSS для создания креативных абзацев или текстовых проектов. Разборчивость и выбор шрифтов часто напрямую связаны с самим дизайном. Но включение текстовых эффектов, таких как кепки, блики и узнаваемые гиперссылки, будет отличаться от другого содержимого на странице. Взгляните на мою демонстрационную демонстрацию, чтобы увидеть, что мы пытаемся построить.
Знак заглушки - это первая буква абзаца или текстовый блок, который больше и обычно отличается от остальных букв. Это можно сделать несколькими способами, включая вставку тегов span в HTML, но один эффективный и быстрый способ сделать, это использовать CSS. С помощью :first-of-type - где используйте это, если вы хотите использовать кепку только для первого абзаца и псевдоселекторов :: first-letter, мы можем стилизовать первые буквы абзацев, не изменяя наш HTML.
Как пример:
Код <p>Когда разработчики игр обсудят свои самые большие влияния.</p>
CSS
Код p:first-of-type::first-letter {
color: #bf0e03;
font-size: 29px;
font-weight: bold;
margin-right: 2px;
margin-bottom: 0px;
}
Используя селектор ::first-letter, любой тип стиля, включая границы, цвета, изменения шрифта и изменения стиля шрифта, можно применить к начальному знаку.
Демонстрация:
| | Страна: (RU) |
| |
| Kosten | Суббота, 10 Февраля 2018 | Сообщение 2 |
|
| Также можете сделать еще один финт с заглавной буквой, что также идет первая, но по размеру больше. Хотя на первом стмиле можно все выставить. но здесь плюсом еще шрифт добавлен, возможно пригодится.
Код p:first-child:first-letter { float: left; color: #0078BF; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }
Демонстрация:
| | Страна: (RU) |
| |
| Kosten | Суббота, 10 Февраля 2018 | Сообщение 3 |
|
| Так можете задать расстояние между знаками.
Код <p style="letter-spacing:2px">Произвольный HTML текст и CSS расстояние между буквами в 2 пикселя</p>
Здесь автоматически выводятся большие знаки под заголовок.
Код <p><big>Здесь найдете интересные решения в создание сайтов uCoz,/big></p> <p style="text-transform:uppercase">Здесь найдете интересные решения в создание сайтов uCoz</p> | | Страна: (RU) |
| |
