検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >純粋な css3 アーティスティック テキスト スタイル効果 code_html/css_WEB-ITnose

純粋な css3 アーティスティック テキスト スタイル効果 code_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:28:181428ブラウズ

効果: http://hovertree.com/texiao/css3/1/


この効果は主に text-shadow を使用して実装されます。
参考: http://hovertree.com/h/bjaf/css3_text_effect。 htm

コードは次のとおりです: 

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>超炫CSS3文字特效集锦DEMO演示 - 何问起</title><link rel="stylesheet" href="http://hovertree.com/texiao/css3/1/css/style.css" media="screen" type="text/css" /></head><body><!--For Firefox--><style>a{color:blue}.test:after {filter: url(#light-top);}.dilate:before {filter: url(#dilate10);}.dilate:after {filter: url(#dilate6);}.erode:after {filter: url(#erode2);}.distant1:after {filter: url(#distant1);}.distant-top:after {filter: url(#distant-top);}.distant-front:after {filter: url(#distant-front);}.diff1 {filter: url(#diff1);}.bevel, .bevel:after {filter: url(#light2);}</style><h1 class='outlinedA'>OutlinedA</h1><h1 class='outlinedA mid'>OutlinedA</h1><div><a href="http://hovertree.com/h/bjaf/yishuzi.htm">原文</a> <a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/texiao/keleyi/">向上弹出菜单</a></div><h1 class='outlinedB'>OutlinedB</h1><h1 class='hsl'>Hsl Colors</h1><h1 class='test'>Test</h1><h1 class='bottom'>Bottom Light</h1><h1 class='dilate'>Dilate</h1><h1 class='erode'>Erode</h1><h1 class='distant1'>Distant Light</h1><h1 class='distant-top'>Distant Top</h1><h1 class='distant-front'>Distant Front</h1><h1 class='diff1'>Diffused Light</h1><h1 class='bevel'>Bevel</h1><h1 style="font-family:cursive;text-shadow:6px 2px 2px #333;color:deeppink">何问起</h1><h1 style="font-family:cursive;text-shadow:6px 2px 2px #666666;">hovertree.com</h1></body></html>

参考:

  • 知っておくべき3つのCSSスキル
  • Pure CSS3 mail, flag, music, file and eye...
  • 人気のCSS知識ポイントのまとめ
  • ハッシュタグの後に色を表す 3 つの数字または文字が続きます
  • css3 は選択したテキストの背景色を変更します
  • CSS3 は背景色のグラデーションを実装します
  • 事前強制改行コード
  • 純粋な CSS3 美しい家、いい天気
  • CSS3 放射状グラデーション回転Circle Ball
  • 3Dアニメーション効果を実現するcss3のtransition属性
  • css3の3D表示におけるrotate()の紹介と簡単な実装…
  • CSS学習メモposition属性
  • CSSセレクターの色々な応用
  • 8種類詳しく解説CSSセレクターの
  • CSS3テキストオーバーフロー
  • CSS3女神画像カルーセル
  • CSSを使用してテキストをdivの下部に配置します
  • CSS変換の回転の回転中心
  • css3はdivに影を追加します
  • css強制改行
  • WEBフロントエンドインタビュー 質問
  • CSS3で円を描く
  • CSSで2つのブロック要素間の隙間を消す方法
  • CSSを使用して画像のすりガラス効果を実現する
  • CSSを使用して長い文字列を無効にするモバイル側で押してテキストを選択します
  • a:link、a:visited、a:hover、a:active
  • CSS を使用する複数の方法 - 要素の垂直方向の中央揃えを実現します
  • CSS3 マウスホバー 360 度回転効果
  • CSSインポート、使用、参照の2つの方法
  • DIV+CSSを使用したシンプルで美しいログインページの開発...
  • CSSホバーマウスホバー画像表示注釈
  • CSS3立体3Dテキストスタイル
  • CSS3背景-サイズ: カバー;
  • css3 マウスホバー (ホバー) してライター コードを開きます

    • その他 詳細:

    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：ドラッグソート html ドラッグ sort_html/css_WEB-ITnose次の記事：ドラッグソート html ドラッグ sort_html/css_WEB-ITnose

    関連記事

    続きを見る