#css #text-styling
#css #оформление текста
Вопрос:
Меня интересуют способы рендеринга диапазона, который выглядел бы примерно так:
Вот приемы, которые я планирую использовать:
@font-face-{moz/webkit/o}-transform:rotate
Это для личного проекта, поэтому при условии, что самая современная поддержка CSS подойдет. Может быть, border-images могли бы помочь? Я бы хотел избежать повсеместного сращивания изображений — если дело действительно дойдет до этого, я просто пропущу все границы вместе и буду полагаться на шрифт для внешнего вида.
Мне просто любопытно, как к этому подошли бы здешние гуру CSS.
Обновить
Теперь для этого есть свойство CSS, mask-image . Подробнее здесь.
Комментарии:
1. Возможно, я оставляю открытой возможность того, что этого будет слишком много. Кроме того, я не планирую использовать такие кричащие цвета. Но дело в том, что проект, над которым я работаю, предназначен для эмуляции рабочего процесса на «бумажной основе», с которым пользователи уже знакомы, и где «штампы» имеют семантическое значение. Если я смогу это эмулировать, это поможет пользователям.
Ответ №1:
Вы могли бы использовать начертание шрифта для шрифта, но вам все равно понадобилось бы изображение для границ. Я бы посоветовал избавить себя от необходимости межбраузерной отладки и, по возможности, использовать transparent .png.
Ответ №2:
Конкретного css-решения для оформления в стиле гранж не существует. Для этого вам придется полагаться на шрифт или изображение (например, какой-нибудь «шероховатый» узор с пятнами, который соответствует цвету фона поверх шрифта).
Единственный другой CSS, который может быть применим, — это использовать цвет RGBA, установленный, возможно, на 80 или 90% непрозрачности, чтобы позволить немного просочиться любому фоновому рисунку, который вы могли бы использовать, как в случае с настоящим чернильным штампом.
Мне нравится делать с CSS все, что в моих силах, но для этого конкретного вида я бы предпочел изображение. Изображения все еще служат определенной цели. ; o)
Комментарии:
1. О, «гранж» — это слово, которое я не мог вспомнить, когда изучал это! Поиск «grunge text CSS» выдал это: jankoatwarpspeed.com/post/2008/08/09 / … это полезное начало…
2. Да, этот метод в основном заключается в опции «изображение поверх типа». Не совсем CSS-решение, но все равно полезное.
3. На самом деле вы можете применить эффект гранжа к тексту с помощью CSS. Это тоже довольно просто: jankoatwarpspeed.com/add-grunge-effect-to-text-using-simple-css
4. @DavidMartins это также использует метод «изображение поверх типа».
Ответ №3:
сейчас это выглядит многообещающе: http://codepen.io/c3f3l0/pen/Fwzoc
используйте шрифты goole
<link href='http://fonts.googleapis.com/css?family=Black Ops One|Luckiest Guy|Sonsie One|Shojumaruamp;effect=3d|3d-float|anaglyph|brick-sign|canvas-print|
crackle|decaying|destruction|distressed|distressed-wood|emboss|fire|fire-animation|fragile|grass|ice|mitosis|neon|outline|putting-green|
scuffed-steel|shadow-multiple|splintered|static|stonewash|vintage|wallpaper'
rel='stylesheet' type='text/css'>
Комментарии:
1. Привет, Патрик — у тебя есть начало ответа… если вы можете предоставить немного больше деталей о том, что OP может делать с Google fonts (а не просто указывать на ссылку), тогда это будет считаться «реальным» ответом для наших целей 🙂
Ответ №4:
Вы можете использовать CSS для применения эффекта гранж к тексту. Что касается поддержки, все, что я могу сказать, это то, что я тестировал ее в последних версиях Chrome, Firefox, IE, Opera, Safari, а также в различных мобильных браузерах и разных ОС, и она работает во всех, на которых я тестировал.
CSS
h1 {
position:relative;
color:#fff;
font-family: Georgia;
font-size: 50px;
}
h1 span{
position:absolute;
display:block;
top:0;
left:0;
height:100%;
width:100%;
background:url('your image url goes here');
}
HTML
<h1>YOUR TITLE GOES HERE<span>amp;nbsp;</span></h1>
Ответ №5:
Эффекта искаженного шрифта можно добиться путем импорта (http://www.font-face.com /) шрифт, похожий на http://www.fontspace.com/category/stamp.
Я не уверен, сможете ли вы создать границу с помощью обычного CSS. Вы можете добавить поверх штампа искаженное прозрачное наложение, которое придаст ему красивый вид и не потребует использования пользовательского шрифта.
CSS можно использовать для создания двойной границы штампа с помощью CSS double border outline. Вам нужно сделать внешний цвет границы белым, а внутренний и контурный цвета одинаковыми. Контур должен быть толще границы.