Забытые возможности :first-letter
Вторник, 17 февраля 2009
Недавно попалась в руки старая книга с отличным графическим оформлением, в том числе и геральдической росписью буквицы, которая заставила задуматься, почему такие вещи до сих пор редко реализуются дизайнерами в сети.
Вроде бы все возможности для представления есть (контроль над шрифтом, размером, цветом, фоном), но ограничиваются лишь основами из учебников по CSS:
Пробежавшись по сайтам со сканами старых книг, в поисках примеров для буквиц, накидал несколько вариантов, которые можно развить и стилизовать под дизайн различных проектов.
Размер специально сделал большим, чтобы показать возможности использования фона в буквице. Не пинайте сильно в комментариях за это :)
А если запастись временем, терпением, поэкспериментировать со шрифтами и фоновыми изображениями, то текст на страницах будет не только передавать информацию, но и создавать впечатление, что важно для любого дизайна. Список «безопасных» шрифтов можно посмотреть в приложении к этому посту.
Код можно посмотреть в исходниках живого примера. Никаких сверхъестественных приёмов там нет, просто активно используется background с изображениями.
Больше примеров для оформления буквицы, вы можете найти на сайте fromoldbooks.org (пункт Borders and Initials).
Несколько рекомендаций
- Всё должно быть к месту. По стилю, буквица должна соответствовать общему оформлению и тематике сайта.
- Фон должен быть достаточно контрастным. Иначе, может получиться шедевральное граффити, и читатели будут любоваться им часами, с вопросом «Ого, а чё это?»
- проверяйте, чтобы фон одинаково хорошо смотрелся и растягивался, как для широких символов (М), так и не очень (I).
- Не стоит стилизовать первые буквы всех параграфов, хватит самой первой буквы в статье (или первой буквы после заголовка/подзаголовка). Для этого в CSS пишем:
h2+p:first-letter { float:left; padding: 10px; margin: 4px 10px 4px 0; background: #fff url(fl_bg.jpg) center bottom no-repeat; color: #000; font-size:160px; line-height: 1em; border: 1px solid #000;}Вместо h2 нужно подставить тот тег, в котором выводится ваш заголовок страницы. Естественно, такой пример не сработает в IE6 (буква так и останется нестилизованной), частично сработает в IE7 (у меня он упорно отказывался выводить фоновое изображение), и отлично стилизуется в IE8. Разве недоработки старых версий эксплорера, это большая проблема для прогрессивного человечества?
Логика действий расписана, думаю, дальше можно самостоятельно искать практическое применение для этого подхода.
* * *
Сканер блогов:
Увлекаетесь Twitter? Выводите последние сообщения из него в свой блог, получите ещё больше follow'еров. Резиновые колонки + эмуляция высоты. Готовый шаблон для верстальщиков.
* * *
* * *
Понравилась статья?
Тогда помогите мне сделать её доступной для других, или будьте в курсе событий:
- подпишитесь на обновления по RSS
- получайте новые статьи на E-mail
- добавьте в Twitter: Забытые возможности :first-letter
- добавьте статью в закладки:
* * *
А если сделать анимированный фон?!
@40a, а зачем? Анимация сейчас не в моде, но об этом я подробнее напишу в одном из следующих постов.
Будьте на расстоянии клика.
Красивый эффект, но я пока не нашла ему применения. Вот если сделать сайтик со сказочками, или легендами...
Светлана, главное знать, какие возможности в дизайне легко доступны, а случай подвернётся, поверьте…
[...] Забытые возможности :first-letter — хорошее свойство, даже в IE6 работает, почему бы и не применять? А ведь есть еще :first-line. [...]
[...] Забытые возможности :first-letter [...]
[...] Забытые возможности :first-letter [...]
[...] Forgotten possibilities of :first-letter in CSS (in Russian) [...]
[...] Forgotten possibilities of :first-letter in CSS (in Russian) [...]
[...] Forgotten possibilities of :first-letter in CSS (in Russian) [...]
[...] Forgotten possibilities of :first-letter in CSS (in Russian) [...]
[...] Forgotten possibilities of :first-letter in CSS (in Russian) [...]
[...] блог продолжает жить своей жизнью, и один из моих старых постов даже засветился в недавней подборке от smashingmagazine. [...]
[...] Forgotten possibilities of :first-letter in CSS (in Russian) [...]
[...] Forgotten possibilities of :first-letter in CSS (in Russian) [...]
[...] Forgotten possibilities of :first-letter in CSS 关于 CSS 中的 :first-letter 属性的使用，俄文网站。 [...]
[...] Forgotten possibilities of :first-letter in CSS (in Russian) [...]
[...] Forgotten possibilities of :first-letter in CSS 关于 CSS 中的 :first-letter 属性的使用，俄文网站。 [...]
[...] Forgotten possibilities of :first-letter in CSS 关于 CSS 中的 :first-letter 属性的使用，俄文网站。 [...]
[...] Forgotten possibilities of :first-letter in CSS 关于 CSS 中的 :first-letter 属性的使用，俄文网站。 [...]
[...] @font-face 属性的基本使用教程，以及如何在网页设计中插入 Truetype 字体。 Forgotten possibilities of :first-letter in CSS 关于 CSS 中的 :first-letter 属性的使用，俄文网站。 8 Definitive Web Font Stacks [...]
[...] Forgotten possibilities of :first-letter in CSS 关于 CSS 中的 :first-letter 属性的使用，俄文网站。 [...]
[...] Forgotten possibilities of :first-letter in CSS 关于 CSS 中的 :first-letter 属性的使用，俄文网站。 [...]
[...] Forgotten possibilities of :first-letter in CSS 关于 CSS 中的 :first-letter 属性的使用，俄文网站。 [...]