Эффект Letterpress с CSS

Question

Я хочу сделать эффект нажатия следующим образом: в CSS. но я не могу найти подходящую текстовую тень для этого.

Цвет слова: # 2f4050 Цвет фона: # 4f6478

я пробовал с:

.letterpress { 
    color:#2f4050; 
    font-family:Tahoma, Helvetica, Arial, sans-serif; 
    font-size:70px; 
    font-style:normal; 
    font-variant:normal; 
    font-weight:normal; 
    line-height:normal; 
    text-align:center; 
    text-shadow:#4f6478 0 1px 5px; 
} 

, но это не похоже, чтобы сделать трюк.

Answer 1

.letterpress { 
    color:#2f4050; 
    font-family:Tahoma, Helvetica, Arial, sans-serif; 
    font-size:70px; 
    text-align:center; 
    text-shadow: 0 1px 1px #fff; 
} 

Это должно сделать это. Btw. вам не нужно объявлять пары «нормальных» значений

Answer 2

Используйте более светлый цвет для тени и меньше размытия. Что-то вроде:

text-shadow: 1px 1px 2px #6ab; 

Answer 3

Ваша тень текста того же цвета, что и фон. Вы должны использовать более светлый цвет, например #809bb5. Или вы можете использовать значение rgba, например, text-shadow: 0 1px 5px rgba(255,255,255,0.4);. Последнее число - альфа-прозрачность (непрозрачность).

Я подправил тень слегка ... http://jsfiddle.net/qmqF5/

Answer 4

Есть две тени. Попробуйте что-то вроде

text-shadow: 1px 1px rgba(255,255,255,0.2), -1px -1px rgba(0,0,0,0.5); 

Это должно дать прозрачную белую тень в правом нижнем углу и прозрачной черной внутренней тени в верхнем левом углу.

Answer 5

Проблема здесь проста.

Вы задаете тот же цвет для фонового цвета и тени текста.

Придание более светлого цвета теневой текстуре по сравнению с фоном, а цвет текста решает проблему.

спасибо.

Answer 6

Чтобы создать эффект нажатия, нам нужно добавить тень, которая светлее, чем цвет текста, чтобы гарантировать, что эффект работает правильно.