Забытые возможности :first-letter

Иллюстрация к статье «Забытые возможности :first-letter»

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

Вроде бы все возможности для представления есть (контроль над шрифтом, размером, цветом, фоном), но ограничиваются лишь основами из учебников по CSS:

Скучные примеры использования :first-letter в CSS из сети

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

Пример использования :first-letter в CSS

Пример использования :first-letter в CSS

Пример использования :first-letter в CSS

Пример использования :first-letter в CSS

Пример использования :first-letter в 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'еров. Резиновые колонки + эмуляция высоты. Готовый шаблон для верстальщиков.

* * *

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 40

  1. 40a, 18.02.2009 в 22:37

    А если сделать анимированный фон?!

    Ответить

  2. rotor, 19.02.2009 в 11:44

    @40a, а зачем? Анимация сейчас не в моде, но об этом я подробнее напишу в одном из следующих постов.

    Будьте на расстоянии клика.

    Ответить

  3. Светлана, 22.02.2009 в 15:24

    Красивый эффект, но я пока не нашла ему применения. Вот если сделать сайтик со сказочками, или легендами...

    Ответить

  4. rotor, 24.02.2009 в 1:26

    Светлана, главное знать, какие возможности в дизайне легко доступны, а случай подвернётся, поверьте…

    Ответить

  5. @ Я в Москве — Перфектомания, 06.03.2009 в 14:44

    [...] Забытые возможности :first-letter — хорошее свойство, даже в IE6 работает, почему бы и не применять? А ведь есть еще :first-line. [...]

    Ответить

  6. @ Обзор №9, Март 2009 - Design For Masters, 19.03.2009 в 12:52

    [...] Забытые возможности :first-letter [...]

    Ответить

  7. @ Обзор №9, Март 2009 « Ресторанный бизнес, 08.07.2009 в 11:29

    [...] Забытые возможности :first-letter [...]

    Ответить

  8. @ Mastering CSS: Styling Design Elements | CSS | Smashing Magazine, 03.08.2009 в 11:51

    [...] Forgotten possibilities of :first-letter in CSS (in Russian) [...]

    Ответить

  9. @ Mastering CSS, Part 1: Styling Design Elements « Tech7.Net, 03.08.2009 в 15:04

    [...] Forgotten possibilities of :first-letter in CSS (in Russian) [...]

    Ответить

  10. @ Mastering CSS, Part 1: Styling Design Elements - Programming Blog, 04.08.2009 в 1:16

    [...] Forgotten possibilities of :first-letter in CSS (in Russian) [...]

    Ответить

  11. @ AMB Album » Mastering CSS, Part 1: Styling Design Elements, 04.08.2009 в 10:31

    [...] Forgotten possibilities of :first-letter in CSS (in Russian) [...]

    Ответить

  12. @ Shopping Mall » Mastering CSS, Part 1: Styling Design Elements, 04.08.2009 в 12:03

    [...] Forgotten possibilities of :first-letter in CSS (in Russian) [...]

    Ответить

  13. @ Ежедневные юзабилити-тренировки | rotorweb.ru | Проблемы и решения в Web-дизайне, 05.08.2009 в 1:23

    [...] блог продолжает жить своей жизнью, и один из моих старых постов даже засветился в недавней подборке от smashingmagazine. [...]

    Ответить

  14. @ Myfreepedia.com » Blog Archive » Mastering CSS, Part 1: Styling Design Elements, 06.08.2009 в 6:26

    [...] Forgotten possibilities of :first-letter in CSS (in Russian) [...]

    Ответить

  15. @ Mastering CSS, Part 1: Styling Design Elements | YABIBO.COM - YOUR WEB WORLD, 10.08.2009 в 13:51

    [...] Forgotten possibilities of :first-letter in CSS (in Russian) [...]

    Ответить

  16. @ 精通 CSS 造型设计元素, 15.08.2009 в 13:33

    [...] Forgotten possibilities of :first-letter in CSS 关于 CSS 中的 :first-letter 属性的使用,俄文网站。 [...]

    Ответить

  17. @ » Mastering CSS, Part 1: Styling Design Elements endo – luxury coding, 06.09.2009 в 11:37

    [...] Forgotten possibilities of :first-letter in CSS (in Russian) [...]

    Ответить

  18. @ 精通 CSS 造型设计元素 | 芒果, 09.01.2010 в 9:40

    [...] Forgotten possibilities of :first-letter in CSS 关于 CSS 中的 :first-letter 属性的使用,俄文网站。 [...]

    Ответить

  19. @ 精通CSS造型设计元素, 12.01.2010 в 8:05

    [...] Forgotten possibilities of :first-letter in CSS 关于 CSS 中的 :first-letter 属性的使用,俄文网站。 [...]

    Ответить

  20. @ 精通 CSS 样式设计元素 - 菠菜博, 18.01.2010 в 17:06

    [...] Forgotten possibilities of :first-letter in CSS 关于 CSS 中的 :first-letter 属性的使用,俄文网站。 [...]

    Ответить

  21. @ 精通 CSS 造型设计元素 Mastering CSS - E@生活在别处, 20.01.2010 в 4:10

    [...] @font-face 属性的基本使用教程,以及如何在网页设计中插入 Truetype 字体。 Forgotten possibilities of :first-letter in CSS 关于 CSS 中的 :first-letter 属性的使用,俄文网站。 8 Definitive Web Font Stacks [...]

    Ответить

  22. @ 精通 CSS 样式设计元素 - 木牛工作室, 23.01.2010 в 11:08

    [...] Forgotten possibilities of :first-letter in CSS 关于 CSS 中的 :first-letter 属性的使用,俄文网站。 [...]

    Ответить

  23. @ 精通 CSS 样式设计元素 « 前端设计, 28.01.2010 в 9:13

    [...] Forgotten possibilities of :first-letter in CSS 关于 CSS 中的 :first-letter 属性的使用,俄文网站。 [...]

    Ответить

  24. @ Dream step » Blog Archive » 精通 CSS 样式设计元素, 03.02.2010 в 3:53

    [...] Forgotten possibilities of :first-letter in CSS 关于 CSS 中的 :first-letter 属性的使用,俄文网站。 [...]

    Ответить

  25. @ Как сделать буквицу на CSS или Всё, что нужно знать про псевдоэлемент first-letter в CSS | ShuBlog, 26.04.2010 в 12:51

    [...] Закос под старинные книги. Указав float:left, можно сделать из первой буквы что-нибудь нестандартное. К примеру вот варианты из одной статьи. [...]

    Ответить

  26. @ 常用设计元素的高级CSS技巧, 08.06.2010 в 15:12

    [...] Forgotten possibilities of :first-letter in CSS 关于 CSS 中的 :first-letter 属性的使用,俄文网站。 [...]

    Ответить

  27. @ 精通 CSS 样式设计元素- CSS 教程 | TechTrack - 专注前端设计,分享科技资讯, 30.06.2010 в 17:27

    [...] Forgotten possibilities of :first-letter in CSS 关于 CSS 中的 :first-letter 属性的使用,俄文网站。 [...]

    Ответить

  28. @ 精通CSS造型设计元素前沿资料, 12.07.2010 в 11:45

    [...] Forgotten possibilities of :first-letter in CSS 关于 CSS 中的 :first-letter 属性的使用,俄文网站。 [...]

    Ответить

  29. @ Các kỹ thuật thiết kế CSS trong thiết kế web | VNWordPress.com, 13.07.2010 в 12:04

    [...] Forgotten possibilities of :first-letter in CSS (bằng tiếng Nga) [...]

    Ответить

  30. @ Master CSS Typography Techniques, 13.07.2010 в 20:22

    [...] Forgotten possibilities of :first-letter in CSS (in Russian) [...]

    Ответить

  31. @ Olega, 09.04.2012 в 17:25

    Здравствуйте, тоже понравилось. Спасибо. Но у меня в стилях заголовок статьи и сама статья находятся в разных классах — post и content. Когда вставляешь Ваш код h2+p:first-letter браузер его не видит. Убираешь h2+ меняется каждый абзац. Как сделать отдельно для первого? Вот задача. В нете ответа пока не нашел. Если подскажете Спасибо.

    Ответить

  32. @ Olega, 10.04.2012 в 14:59

    Извините, еще раз о своем, я понял, что если h2+p не находится прямо под p то не работает правило. о заметил в опера и хром, что ваш класс p:first-letter с background если прописан для лого сайта , рвет и скидывает сайтбары в подвал, если размер фиксированный. Не знаю с чем связано. Но интересно. Решить конечно можно, но не проверив сразу, я нарвался на пол дня кривой сайтбар. Даже не ожидал. Пришлось все снимать пока.

    Ответить

    • rotor, 12.04.2012 в 1:26

      Вместо h2 пропишите элемент, который идет перед нужным абзацем.

      Или покажите пример, так будет быстрее и проще.

      Ответить

  33. @ Olega, 12.04.2012 в 7:59

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

    Ответить

  34. @ Các Kỹ Thuật CSS trong Thiết Kế Web «, 08.06.2012 в 3:59

    [...] Forgotten possibilities of :first-letter in CSS (bằng tiếng Nga) [...]

    Ответить

  35. @ 常用设计元素的高级CSS技巧 | 夜阑小雨,飘洒在岁月的流沙。80后,爱网络,爱小说,爱研究。产品设计,编程代码,网络营销,原创文学, 系统研究。, 18.07.2012 в 11:25

    [...] Forgotten possibilities of :first-letter in CSS 关于 CSS 中的 :first-letter 属性的使用,俄文网站。 [...]

    Ответить

  36. @ 常用设计元素的高级CSS技巧 | 夜阑小雨,飘洒在岁月的流沙。80后,爱网络,爱小说,爱研究。产品设计,编程代码,网络营销,原创文学,系统研究。, 21.07.2012 в 0:38

    [...] Forgotten possibilities of :first-letter in CSS 关于 CSS 中的 :first-letter 属性的使用,俄文网站。 [...]

    Ответить

  37. @ 精通CSS-1: 常用设计元素的高级CSS技巧 | 站长站, 19.10.2012 в 2:58

    [...] Forgotten possibilities of :first-letter in CSS [...]

    Ответить

  38. @ 精通CSS-1: 常用设计元素的高级CSS技巧 | 中国私服网, 17.04.2013 в 5:32

    [...] Forgotten possibilities of :first-letter in CSS 关于 CSS 中的 :first-letter 属性的使用,俄文网站。 [...]

    Ответить

  39. @ 精通 CSS 造型設計元素 | QiHi 前端技术分享, 15.08.2013 в 4:41

    [...] Forgotten possibilities of :first-letter in CSS 關於 CSS 中的 :first-letter 屬性的使用,俄文網站。 [...]

    Ответить

Есть что сказать?