CSS3 を使用したテキスト折り紙効果のサンプルコード

序文

この記事では主に、CSS3 を使用してテキスト折り紙効果を実現する例を紹介します。これは、参考と学習のために共有されています。詳細な紹介を見てみましょう。

効果画像:

サンプルコード:

コードは次のとおりです。コピーして使用してください。

<!DOCTYPE html>
<html>
<ヘッド>
    <タイトル></タイトル>
    <スタイル タイプ="text/css">
        html{
  高さ: 100%;
}

体 {
  背景: -webkit-linear-gradient(45度、#e6e2df 80%、#c2c1bd 100%);
  背景: 線形グラデーション(45度、#e6e2df 80%、#c2c1bd 100%);
  高さ: 100%;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
}

.ラッパー{
  幅: 100%;
  フォントファミリ: 'Source Code Pro'、等幅フォント;
  マージン: 0 自動;
  高さ: 100%;
}
.ラッパーh1{
  テキスト変換:大文字;
  -webkit-transform: 変換(-50%, -50%) 傾斜(10度) 回転(-10度);
          変換: 平行移動(-50%, -50%) 傾斜(10度) 回転(-10度);
  フォントサイズ: 20vw;
  上位: 50%;
  左: 50%;
  マージン: 0;
  位置: 絶対;
  テキストレンダリング: 読みやすさを最適化します。
  フォントの太さ: 900;
  色: rgba(255, 158, 177, 0.5);
  テキストシャドウ: 1px 4px 6px #e6e2df, 0 0 0 #66303a, 1px 4px 6px #e6e2df;
}
.wrapper h1:before {
  コンテンツ: attr(データ見出し);
  位置: 絶対;
  左: 0;
  最高: -4.8%;
  オーバーフロー: 非表示;
  幅: 100%;
  高さ: 50%;
  色: #fbf7f4;
  -webkit-transform: translate(1.6vw, 0) skew(-13deg) scale(1, 1.2);
          変換: translate(1.6vw, 0) skew(-13deg) scale(1, 1.2);
  zインデックス: 2;
  テキストシャドウ: 2px -1px 6px rgba(0, 0, 0, 0.2);
}
.wrapper h1:after {
  コンテンツ: attr(データ見出し);
  位置: 絶対;
  左: 0;
  上: 0;
  オーバーフロー: 非表示;
  幅: 100%;
  高さ: 100%;
  zインデックス: 1;
  色: #d3cfcc;
  -webkit-transform: translate(0vw, 0) skew(13deg) scale(1, 0.8);
          変換: translate(0vw, 0) skew(13deg) scale(1, 0.8);
  -webkit-clip-path: ポリゴン(0 50%, 100% 50%, 100% 100%, 0% 100%);
          クリップパス: ポリゴン(0 50%, 100% 50%, 100% 100%, 0% 100%);
  テキストシャドウ: 2px -1px 6px rgba(0, 0, 0, 0.3);
}

    </スタイル>
</head>
<本文>
    <div class="wrapper">
        <h1 データ見出し="jQuery">jQuery</h1>
    </div>
</本文>
</html>

要約する

上記はこの記事の全内容です。この記事の内容が皆さんの勉強や仕事に一定の参考学習価値を持つことを願っています。ご質問があれば、メッセージを残してコミュニケーションしてください。123WORDPRESS.COM を応援していただきありがとうございます。

<<: MySQLで置換関数を実装するためのいくつかの実用的なシナリオ

>>: XHTML CSSを使用して正式なブログを書く