☰

CSSによる内側のテキストシャドウ 質問する

tag-icon • tag-icon css text shadow
CSSによる内側のテキストシャドウ 質問する

現在、CSS3 を試していて、次のようなテキスト効果 (黒いぼやけた内側の影) を実現しようとしています。

しかし、テキストの影を作成する方法が見つかりません内部テキスト。box-shadow 要素は次のように内部に影をレンダリングできるので、まだ可能かどうか疑問に思います。

box-shadow: inset 0px -5px 10px 0px rgba(0, 0, 0, 0.5);

何か案は？

ベストアンサー1

:beforeおよび疑似要素を使用して私が発見したちょっとしたトリックは次のとおりです:after。

タイトル属性はコンテンツと同じである必要があります。デモ:http://dabblet.com/gist/1609945

/**
 * A "deeper" indented text effect with the :before and :after pseudo-elements.
 */

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: #0A539C;
  background: linear-gradient(top, #4293d6 0%, #001e96 100%);
  overflow: hidden;
}

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

.depth:before,
.depth:after {
  content: attr(title);
  padding: 50px;
  color: rgba(255, 255, 255, .1);
  position: absolute;
}

.depth:before {
  top: 1px;
  left: 1px
}

.depth:after {
  top: 2px;
  left: 2px
}
<h1 class="depth" title="Lorem ipsum">Lorem ipsum</h1>

おすすめ記事