Можно ли получить вырезанный текстовый эффект таким образом, используя только CSS / CSS3?

Question

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

Answer 1

Это должно работать:
Вот небольшой трюк, который я обнаружил, используя псевдоэлементы :before и :after:

http://dabblet.com/gist/1609945

Answer 2

text-shadow твой друг. На этой странице приведено множество примеров того, чего вы можете достичь с его помощью.Пример № 8 выглядит многообещающе.

Answer 3

Я нашел это http://jsfiddle.net/NeqCC/

Поддерживает белый фон и темный текст

Весь кредит отдается создателю

HTML

<!--
CSS3 inset text-shadow trick
Written down by Jyri Tuulos
http://about.me/jyrituulos

Effect originally found at http://timharford.com/
All credits for originality go to Finalised Design (http://finalisedesign.com/)

Note that this trick only works for darker text on solid light background.
-->
<h1 class="inset-text">Inset text-shadow trick</h1>

CSS

body {
    /* This has to be same as the text-shadows below */
    background: #def;
}
h1 {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 6em;
    line-height: 1em;
}
.inset-text {
    /* Shadows are visible under slightly transparent text color */
    color: rgba(10,60,150, 0.8);
    text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
}
/* Don't show shadows when selecting text */
::-moz-selection { background: #5af; color: #fff; text-shadow: none; }
::selection { background: #5af; color: #fff; text-shadow: none; }

Answer 4

Что вам действительно нужно для этого конкретного эффекта: inset:

    text-shadow: inset #000 0 0 0.10em; /* THIS DOESN'T WORK */

К сожалению : " такое же, как определено дляСвойство box-shadow, за исключением того, что ключевое слово inset недопустимо. "

Answer 5

A немного более мягкий способ использования псевдоэлементов, упомянутых в Web_Designer:

.depth {
    display: block;
    padding: 50px;
    color: black;
    font: bold 7em Arial, sans-serif;
    position: relative;
}

.depth:after {
    text-shadow: rgba(255,255,255,0.2) 0px 0px 1.5px;
    content: attr(title);
    padding: 50px;
    color: transparent;
    position: absolute;
    top: 1px; 
    left: 1px;
}

Это немного проще - чтобы получить мягкий ободок депрессии, вы используете текстовую тень от: after и сделайте ее прозрачной, а не с помощью двух псевдо. На мой взгляд, он выглядит намного чище - он может работать в гораздо больших размерах. Я понятия не имею, насколько это быстро, хотя вы, вероятно, все равно будете экономно использовать тени для текста.

Answer 6

Да, вы можете добиться этого эффекта с помощью CSS и текста, но это немного безумно. По сути, вы создаете несколько градиентов с нулевым серым радиальным и линейным градиентами css3 с нулевой непрозрачностью и осторожно размещаете их над текстом. Но тебе лучше сделать это в фотошопе.

Answer 7

Вы можете использовать стиль тени текста, чтобы установить тень для верхнего левого угла.Это будет выглядеть близко к тому, что вы ищете, но, насколько я знаю, нет способа сделать именно то, что вы ищете в CSS / CSS3