CSS текст вырезанный или сжатый эффект - PullRequest
2 голосов
/ 11 декабря 2010

Если вы идете сюда - http://djangocon.us/. В самом верху логотип djangocon.Этот логотип весь текст, а текст как будто нажата внутри.Такое ощущение, что оно было вырезано.

Я изучил CSS и не понял, какое свойство может вызвать этот эффект.Кто-нибудь знает?

alt text

ОБНОВЛЕНИЕ: Похоже, я ошибся.Логотип сверху - это изображение.Но текст ниже это не так.Дает тот же нажатый текст.Прямоугольный прямоугольник темно-зеленого цвета (под панелью навигации).

Ответы [ 6 ]

5 голосов
/ 11 декабря 2010

Используйте text-shadow: 0 1px 0 color;, и вы получите тот же эффект.

Если вам нужна дополнительная информация, посмотрите http://www.css3.info/preview/text-shadow/

2 голосов
/ 12 декабря 2010

Текст-тень верна. Я использую его регулярно, и это может привести к некоторым интересным эффектам (хотя на него нельзя полагаться ни в чем критическом, поскольку поддержка браузера еще не завершена).

Однако, как утверждают и другие авторы, изображение, на которое вы ссылаетесь, это хорошо ... изображение. Вы можете легко добиться этого эффекта в Photoshop, используя параметры наложения на слое и играя с не размытыми тенями или настройками скоса / тиснения. Это более надежный способ решения этой задачи, поскольку поддержка изображений в браузерах явно шире, чем поддержка CSS 3.

Я обычно ошибаюсь на стороне изображения для чего-то важного, например, логотипа или крупного объявления. Кроме того, вы можете управлять сглаживанием с помощью изображения, чего у вас нет полного контроля над использованием CSS 3 (хотя большая часть сглаживания в браузере чертовски хороша).

Лучший пример использования текста-тени на нижнем колонтитуле. Вот расчетный стиль от Chrome:

alt text

1 голос
/ 07 января 2015

Используя свойство text-shadow, вы можете добиться эффекта Text Pressed. Обратитесь к этому образцу http://line25.com/wp-content/uploads/2009/letterpress/demo/demo.html

1 голос
/ 11 декабря 2010

Быстрый просмотр с помощью firebug, и это свойство text-shadow.Я никогда не использовал это сам.

1 голос
/ 11 декабря 2010

Вы хотите text-shadow свойство. http://www.quirksmode.org/css/textshadow.html

Редактировать: но очевидно, что страница, на которую вы ссылались, на самом деле использует изображения для достижения этой цели. http://djangocon.us/site_media/static/img/header.png

0 голосов
/ 12 декабря 2010

http://css3please.com это самый простой способ запомнить это, я считаю.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...