легкий текстовый оттенок с CSS 3 - PullRequest
Новая
       20

легкий текстовый оттенок с CSS 3

7 голосов
/ 28 июля 2011

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

Light shade text image preview

с использованием CSS3 и как?

Ответы [ 3 ]

7 голосов
/ 28 июля 2011

image

WebKit-only (Safari/Chrome):


    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;
    }

Hello StackOverflow

Here you can see above snippet in 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/

1 голос
/ 28 июля 2011

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

Создание этого точно такого же эффекта с помощью 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>
1 голос
/ 28 июля 2011

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

...