Один из способов сделать буквицу с контуром и тенью

[c61]

Недавно пользователи попросили "облагородить" одну мою конференцию с использованием стилизованного под старославянский шрифта. В наличии был только truetype.

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

Подключение шрифта:

Код: Выделить всё

@font-face {
	font-family: CyrillicOld;
	src: url("/forum/fonts/cyrillic_old.eot"); /* for IE */
}
@font-face {
	font-family: CyrillicOld;
	src: local("CyrillicOld"), url("/forum/fonts/cyrillic_old.eot?#iefix") format("embedded-opentype"), url("/forum/fonts/cyrillic_old.ttf") format("truetype"), url("/forum/fonts/cyrillic_old.svg") format("svg"), url("/forum/fonts/cyrillic_old.woff") format("woff");
}

Для буквицы можно использовать следующее (модификация стиля Artodia Helion):

Код: Выделить всё

.phpbb .topiclist dt a.forumtitle:first-letter,a.topictitle:first-letter {
	font-family: CyrillicOld, Verdana, 'Open Sans', sans-serif;
	font-size: 1.6em;
	margin: 0 2px 0 0;
	text-transform: uppercase;
	color: gold;
	text-shadow: #003D00 1px 1px 0, #003D00 -1px -1px 0, #003D00 -1px 1px 0, #003D00 1px -1px 0, #003D00 1px 0 0, #003D00 0 1px 0, #003D00 -1px 0 0, #003D00 0 -1px 0, #003D00 2px 2px 2px;
	float: left;
}

В результате легко получить примерно такое:

bukv.jpg

Работает в IE10+ и во всех современных браузерах.

Тема на моей тестовой площадке тынц.

[BenDeen]

А для subsilver2 такое можно реализовать?

[xaocZ]

Для subsilver2:

Код: Выделить всё

a.forumlink:first-letter, a.topictitle:first-letter {
	/* Стили */
}

И, чтобы этот фокус удался, нужно добавить display: inline-block; к a.forumlink и a.topictitle. Для prosilver к a.forumtitle и a.topictitle соответственно.

[BenDeen]

xaocZ, классно!
Только есть пару нюансов...

• Если в названии раздела есть кавычки в начале, то и первая кавычка вместе с буквой выделяется (на скрине указал стрелкой);
• Пока не понял по каким признакам, но названия разделов стали отображаться в два ряда (на скрине выделил в красные прямоугольники).

ЗЫ:оформление брал из первого поста...

[xaocZ]

Нюанс, да, и так будет с любым знаком впереди. Будь то кавычки или восклицательный знак, или любой другой если это не буква.
А вот по второму, сам по себе псевдоэлемент не может дать такой эффект.

[BenDeen]

А вот по второму, сам по себе псевдоэлемент не может дать такой эффект.

Но факт остается фактом, что названия форумов разделяются на две строчки...

Добавлено спустя 4 минуты:
Всё! Я понял! Это зависит от стиля оформления для первой буквы! Если поставить не такой замысловатый дизайн, как в первом посте, то названия не переносятся!