светлый оттенок текста с помощью CSS 3

Возможно ли иметь такой же текстовый эффект (внутренняя тень, оттенок), как на этом изображении:

Предварительный просмотр изображения светлого текста

используя CSS3, и как?


text css shadow
person Neri Barakat    schedule 28.07.2011    source источник
comment
Попробуйте это или это   -  person Harry Joy    schedule 28.07.2011

Ответы (3)


arrow_upward
7
arrow_downward

Только WebKit (Safari/Chrome):

<style>
    h1 {
        background-color: rgba(0,0,0,0.8);
        -webkit-background-clip: text;
        color: transparent;
        text-shadow: rgba(255,255,255,0.5) 0 2px 2px;
    }
</style>
<h1>Hello StackOverflow</h1>

Здесь вы можете увидеть приведенный выше фрагмент в JsFiddle: http://jsfiddle.net/HkTqe/6/

Firefox и WebKit:

<style>
    .trick1 {
        color: black;
        height: 2em;
    }
    .trick2 {
        color: transparent;
        text-shadow: rgba(255,255,255,0.8) 0 5px 5px;
        margin-top: -2em;
    }
</style>
<div class="trick1">Text in Light Shade</div>
<div class="trick2">Text in Light Shade</div>

Обратите внимание, что у вас должно быть два элемента div в таком порядке с одинаковым текстовым содержимым; иначе это не сработает.

Сравнение обоих методов: http://jsfiddle.net/bABuM/.

person Pindatjuh    schedule 28.07.2011
comment
Нет.. Фиддл не изменился. Какой браузер ты вообще используешь? Хром правильно. Это здорово, но посмотрите на это из FF, а затем забудьте об этом методе, как о не очень совместимом с браузером. Тем не менее, я дам вам проголосовать, поскольку в вопросе не указана совместимость с браузером. - person Kalle H. Väravas; 28.07.2011
comment
Хорошо, первый делает. Молодец! - person Kalle H. Väravas; 28.07.2011

arrow_upward
1
arrow_downward

Не совсем, но можно попробовать разные почти. См. это сообщение для множества примеров:

person sqwk    schedule 28.07.2011
comment
Спасибо, но я не даю тот текстовый эффект, который хочу. - person Neri Barakat; 28.07.2011

arrow_upward
1
arrow_downward

Вы также можете создать его с помощью -webkit-mask-image, но он снова будет работать только в браузерах webkit. Вам нужно создать прозрачное облачное изображение в prohotshop (так, как вы хотите, чтобы оно выглядело — я только что сделал рендер/облака и трансформировал его с помощью канала aplha — немного подправив его, вы можете добиться того же эффекта, что и в вашем дизайне) а затем примените его как маску и прикрепите маску к тексту. Webkit прекрасно подходит для этого, но не работает, так как поддерживается не во всех браузерах.

Создание такого же точно такого же эффекта с помощью css3 в настоящее время невозможно.

http://jsfiddle.net/easwee/VMSD6/2/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
    h1 {
        font-size:50px;
        font-weight:bold;
        font-family:Arial Black;
        color:#666;
        -webkit-mask-image:url("mask.png");
        -webkit-mask-clip:text;
        background:black;
    }
    </style>
</head>
<body>
<h1>SAMPLE TEXT</h1>
</body>
</html>
person easwee    schedule 28.07.2011