5

次のいずれかのように見えるスパンをレンダリングする方法に興味があります。

スタンプのいくつかのランダムな画像

私が使用する予定のトリックは次のとおりです。

  • @font-face
  • -{moz/webkit/o}-transform:rotate

これは個人的なプロジェクトのためのものなので、最新の CSS サポートが適切であると想定しています。多分ボーダー画像が役立つでしょうか？あらゆる場所での画像のスプライシングを避けたいと思います。本当にそうなる場合は、境界線をすべてスキップして、外観をフォントに依存します。

ここにいる CSS の達人がこれにどのようにアプローチするのか、ただ興味があります。

アップデート

このための CSS プロパティが用意されましたmask-image。詳細はこちら。

4

5 に答える 5

2

フォントにフォント フェイスを使用することもできますが、境界線にはまだ画像が必要です。クロスブラウザーのデバッグの手間を省き、可能であれば透明な .png を使用することをお勧めします。

于 2011-06-02T06:02:24.263 に答える
1

グランジルックのための特定のcssソリューションはありません。そのための書体、または画像（タイプの上にある背景色と一致するある種の「汚れた」斑点パターンなど）に依存する必要があります。

適用できる他の唯一のCSSは、不透明度がおそらく80または90％に設定されたRGBAカラーを使用して、実際のインクスタンプの場合のように、使用する可能性のある背景パターンを少し浸透させることです。

私はCSSでできる限りのことをするのが大好きですが、その特定の外観のために、私は画像に固執します。画像はまだ目的を果たします。; o）

于 2011-06-02T05:58:37.820 に答える
1

これは今有望に見えます： http://codepen.io/c3f3l0/pen/Fwzoc

goole フォントを使用する

<link href='http://fonts.googleapis.com/css?family=Black+Ops+One|Luckiest+Guy|Sonsie+One|Shojumaru&effect=3d|3d-float|anaglyph|brick-sign|canvas-print|
        crackle|decaying|destruction|distressed|distressed-wood|emboss|fire|fire-animation|fragile|grass|ice|mitosis|neon|outline|putting-green|
        scuffed-steel|shadow-multiple|splintered|static|stonewash|vintage|wallpaper' 
        rel='stylesheet' type='text/css'>
于 2014-10-07T20:48:13.650 に答える
0

http://www.fontspace.com/category/stampに似たフォントをインポート (http://www.font-face.com/) することで、ディストレスト フォント効果を実現できます。

プレーンな CSS で境界線を作成できるかどうかはわかりません。スタンプの上に苦しめられた透明なオーバーレイを追加すると見栄えがよくなり、カスタム フォントは必要ありません。

CSSを使用して、CSSダブルボーダー+アウトラインでダブルスタンプボーダーを作成できます。外側の境界線の色を白にし、内側と輪郭の色を同じにする必要があります。輪郭は境界線よりも太くする必要があります。

于 2011-06-02T06:12:48.370 に答える
0

CSS を使用して、テキストにグランジ効果を適用できます。サポートに関する限り、私が言えることは、最新の Chrome、Firefox、IE、Opera、Safari、およびさまざまなモバイル ブラウザーとさまざまな OS でテストしたことであり、テストしたすべてのブラウザーで動作します。 .

CSS

h1 {
    position:relative;
    color:#fff;
    font-family: Georgia;
    font-size: 50px;
}

h1 span{
    position:absolute;
    display:block;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:url('your image url goes here');
}

HTML 

<h1>YOUR TITLE GOES HERE<span>&nbsp;</span></h1>

ここにフィドルがあります

これはhttp://www.jankoatwarpspeed.com/add-grunge-effect-to-text-using-simple-css/から入手しました

于 2016-01-25T15:35:45.133 に答える