【问题标题】:Is it possible to get cut out text effect like this using CSS/CSS3 only?是否可以仅使用 CSS/CSS3 获得这样的剪切文本效果?
【发布时间】:2011-04-27 10:58:57
【问题描述】:

是否可以仅使用 CSS/CSS3 获得像这样的剪切文本效果?或图像是获得此效果的唯一选项。

【问题讨论】:

  • 不投票关闭作为副本,因为我不知道它与您想要的东西有多相似(那里也没有明确的答案)但这是一个相当相似的问题:stackoverflow.com/questions/2889501/inner-text-shadow-with-css
  • @David - 是的,这两个问题都很相似,我应该结束我的问题。或者我可以将我的问题与你链接的问题合并
  • 好吧,如果你说它们相似,我会投票赞成结束,如果人们同意,这一切都会得到解决。无需您采取行动。
  • @David - 是的,这两个问题都在询问几乎相同的效果。在问我的问题之前,我会搜索“剪切文本效果”。

标签: css


【解决方案1】:

我发现了这个 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; }

【讨论】:

    【解决方案2】:

    slightly softer way 提到使用伪元素 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 伪的文本阴影并使其透明,而不是使用两个伪。在我看来,它看起来也更干净——它可以在更大的尺寸上工作。我不知道它有多快,尽管你可能会谨慎使用 text-shadow。

    【讨论】:

      【解决方案3】:

      这应该可行:
      这是我使用:before:after 伪元素发现的一个小技巧:

      http://dabblet.com/gist/1609945

      【讨论】:

        【解决方案4】:

        你真正需要的是inset

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

        Unfortunately: " 与为 ‘box-shadow’ 属性定义的相同,只是不允许使用 ‘inset’ 关键字。”

        【讨论】:

        • 对于这种疯狂先生,一个非常低级的解决方案是让 JavaScript(或语义 HTML)在文本的中心创建一个透明文本(这会很棘手),然后在其上应用阴影text ;) 这将创建伪逼真的嵌入阴影 ^_^
        【解决方案5】:

        是的,您可以使用 CSS 和文本来实现这种效果,但它有点疯狂。基本上,您创建了一堆不透明度为零的灰色零 css3 径向和线性渐变,并小心将它们放置在您的文本上。但你最好在 Photoshop 中执行此操作。

        【讨论】:

          【解决方案6】:

          text-shadow 是你的朋友。 See this page 有很多例子,你可以用它实现什么。示例 #8 看起来很有希望。

          【讨论】:

          • 这对我来说也有一天会派上用场!谢谢! +1
          • 答案应该建议代码,而不仅仅是链接。链接很快消失,链接中的链接消失得更快,留下好的答案就像一棵枯死的大树一样被掏空。
          • @jerseyboy:我不会在这里复制一个 13 页的网络博客。
          • @AaronDigulla:复制一个 13 页的网络博客是不明智的,但指向不是原始来源的页面也是如此。
          • @dinchev:试试谷歌。新网址是jotarun.posterous.com/text-embossing-technique-with-css
          【解决方案7】:

          您可以使用 text-shadow 样式为左上角设置阴影。它看起来很接近你正在寻找的东西,但据我所知,没有办法完全按照你在 CSS/CSS3 中寻找的东西

          【讨论】:

            猜你喜欢
            • 2015-04-02
            • 2011-01-28
            • 2016-03-23
            • 1970-01-01
            • 2013-08-16
            • 2013-06-15
            • 2013-08-29
            • 1970-01-01
            • 2012-01-07
            相关资源
            最近更新 更多