css3で影付き3Dフォントの効果を実現-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

css3で影付き3Dフォントの効果を実現

不言

Jun 28, 2018 pm 03:06 PM

css3 フォント影

この記事では、影付きの 3D フォントを実現するための CSS3 の効果を主に紹介します。これを必要とする友人に共有します。

3D フォントにも影があります。皆さん、CSS3 の登場により、この一見不可能なことが実現できると考えた場合にのみ実現できます。興味がある方は、次の手順を紹介します。見逃してしまいました

レンダリングは次のとおりです:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> CSSReX | Drop Shadow with CSS3 </title> 
<link rel="stylesheet" type="text/css" href="style.css" media="screen" /> 
</head> 
<body> 
<p id="wrapper"> 
<h1>CSSReX</h1> 
<p>任何的异常都是Throwable类，并且在它之下包含两个字类Error / Exception，而Error仅在当在Java虚拟机中发生动态连接失败或其它的定位失败的时候，Java虚拟机抛出一个Error对象。典型的简易程序不捕捉或抛出Errors对象，你可能永远不会碰到需要实例化Error的应用，那就让我们关心一下Exception。 
Unchecked Exception.：包括 Error与RuntimeException. 这类异常都是RuntimeException的子类。 
Checked Exception:除了Error与RuntimeException，其他剩下的异常. 这类异常都是Exception的子类 。在编译时在语法上必须处理的异常，因此必须在语法上以try..catch加以处理；</p> 
</p><!-- /wrapper --> 
</body> 
</html>

ログイン後にコピー

style.css:

body{ 
background:#d5d5d5; 
} 
#wrapper{ 
width:960px; 
min-height:500px; 
padding:50px 10px 0 10px; 
margin:0 auto; 
text-align:center; 
} 
#wrapper h1{ 
font:normal 60pt Arial; 
color:#FFFFFF; 
text-shadow: 0 1px 0 #ccc, 
0 2px 0 #c9c9c9, 
0 3px 0 #bbb, 
0 4px 0 #b9b9b9, 
0 5px 0 #aaa, 
0 6px 1px rgba(0,0,0,.1), 
0 0 5px rgba(0,0,0,.1), 
0 1px 3px rgba(0,0,0,.3), 
0 3px 5px rgba(0,0,0,.2), 
0 5px 10px rgba(0,0,0,.25), 
0 10px 10px rgba(0,0,0,.2), 
0 20px 20px rgba(0,0,0,.15); 
} 
#wrapper p{ 
font:normal 40pt Arial; 
color:#FFFFFF; 
text-shadow: 0 1px 0 #ccc, 
0 2px 0 #c9c9c9, 
0 3px 0 #bbb, 
0 4px 0 #b9b9b9, 
0 5px 0 #aaa, 
0 6px 1px rgba(0,0,0,.1), 
0 0 5px rgba(0,0,0,.1), 
0 1px 3px rgba(0,0,0,.3), 
0 3px 5px rgba(0,0,0,.2), 
0 5px 10px rgba(0,0,0,.25), 
0 10px 10px rgba(0,0,0,.2), 
0 20px 20px rgba(0,0,0,.15); 
}

ログイン後にコピー

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語ネットにご注目ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7696

Java チュートリアル

1640

CakePHP チュートリアル

1393

Laravel チュートリアル

1287

PHP チュートリアル

1229

Related knowledge

win10フォントフォルダーパスの詳細 Jan 03, 2024 pm 08:37 PM

テキストを入力するとき、多くの友人がお気に入りの個人用フォントを追加したいと思っていますが、Win10 システムのフォントフォルダーパスがどこにあるのか分からず、フォントを追加できません。以下に具体的なフォルダーパスを紹介します。 Win10 フォントフォルダーのパス: 1. デスクトップの「この PC」をクリックします。 2. システムディスクの C ドライブに移動します。 3. 「windows」フォルダをクリックします。 4. プルダウンして「Fonts」フォルダーを見つけます。 5. フォントライブラリに入ることができます。他の質問がある友人は、win10 フォントに関する一般的な問題について詳しく知ることができます~

Apple 携帯電話の Outlook でフォントを変更する方法 Mar 08, 2024 pm 04:46 PM

Apple 携帯電話の Outlook でフォントを変更するにはどうすればよいですか? まず、Outlook ソフトウェアを開き、インターフェイスの左上隅にあるファイルをクリックします。フォントはお好みに合わせて設定できますので、設定が完了したら「OK」ボタンをクリックしてください。見てみましょう！ Apple 携帯電話の Outlook でフォントを変更する方法 1. Outlook ソフトウェアを開き、インターフェイスの左上隅にある [ファイル] オプションをクリックします。 2. 表示されるリストで「オプション」を見つけ、クリックして入力します。 3. オプションリストの左側にある「メール」をクリックします。 4. 次に「文字とフォント」を選択します。 5. 新規メール、返信メール、または作成用のフォントを設定する場合は、対応するオプションをクリックして設定を入力します。 6. 好みに応じてフォントを設定し、設定が完了したら「OK」をクリックします

純粋な CSS3 で波の効果を実現するにはどうすればよいですか? (コード例) Jun 28, 2022 pm 01:39 PM

純粋な CSS3 で波の効果を実現するにはどうすればよいですか?この記事ではSVGとCSSアニメーションを使って波のエフェクトを作成する方法をご紹介しますので、お役に立てれば幸いです。

win11のフォントぼやけの問題を解決する方法 Jan 13, 2024 pm 09:00 PM

win11 システムを更新した後、一部の友人は、win11 のフォントがぼやけて非常に使いにくいことに気づきました。これは、システムバージョンのバグが原因である可能性があります。または、特殊効果をオンにしている可能性があります。エディターをフォローしましょう。解決方法を見てみましょう。 Win11 フォントがぼやける: 方法 1: 1. まず、このコンピューターを右クリックして「プロパティ」を開きます。 2. 次に、関連リンクに「システムの詳細設定」と入力します。 3. 次に、パフォーマンスの「設定」をクリックして開きます。 4. [視覚効果] で [最高のパフォーマンスを実現するように調整] をチェックし、[OK] をクリックして保存します。方法 2: 1. デスクトップの空白部分を右クリックし、「ディスプレイ設定」を開きます。 2. ズームとレイアウトの「ズーム」をクリックします。 3. 次に、関連する設定で「テキストサイズ」をクリックします。

Windows 11 でメモ帳のフォント、スタイル、サイズを調整する方法 Sep 23, 2023 pm 11:25 PM

デフォルトのフォントが小さすぎる、または読みにくいため、多くのユーザーが Windows 11 のメモ帳のフォントを変更したいと考えています。フォントの変更はすばやく簡単です。このガイドでは、メモ帳をカスタマイズし、ニーズに合わせてフォントを変更する方法を説明します。 Windows 11 のメモ帳はデフォルトでどのフォントを使用しますか?デフォルトのフォントオプションに関しては、メモ帳は Consolas フォントを使用し、デフォルトのフォントサイズは 11 ピクセルに設定されています。 Windows 11でメモ帳のフォントサイズとスタイルを変更するにはどうすればよいですか?メモ帳の編集メニューを使用して検索ボタンをクリックし、メモ帳と入力します。結果のリストからメモ帳を選択します。メモ帳で、「編集」メニューをクリックし、「フォント」を選択します。左側のペインに設定が表示されます。

Xiaomi 11のフォントを変更する方法_Xiaomi 11のフォントを変更する方法 Mar 25, 2024 pm 07:26 PM

1. 電話機の設定を開き、[表示]をクリックします。 2. ［フォント］をクリックします。 3. 好みのフォントを選択するか、[その他のフォント] をクリックしてアプリケーションをダウンロードします。

Vivo 携帯電話のフォントを大きくする方法とその設定場所 Feb 24, 2024 pm 06:16 PM

vivo 携帯電話のフォントサイズを大きくするにはどうすればよいですか? どこで設定できますか? vivo 携帯電話では、フォントサイズを大きくすることができますが、ほとんどのユーザーは、vivo 携帯電話のフォントサイズを設定する方法を知りません。 , エディターは、vivo 携帯電話のフォントサイズを大きくする方法の設定を提供します. メソッドグラフィックチュートリアル, 興味のあるユーザーは、見に来てください! Vivo 携帯電話の使い方チュートリアル vivo 携帯電話のフォントサイズを大きくする方法設定場所 1. まず、vivo 携帯電話で [設定] 機能を開いてクリックします; 2. 次に、設定インターフェイスにジャンプし、 [表示と明るさ] 機能; 3. 次に、下の図のページに移動し、[フォントサイズと太さ] サービスをクリックします; 4. 最後に、下の図の水平線をスライドしてフォントサイズを調整します。

Win11フォントのインストール方法を詳しく解説 Dec 27, 2023 pm 05:16 PM

win11 フォントをインストールした後、自分のフォントがインストールされている場所が見つからない友人がいます。そのため、彼らは win11 フォントのインストール場所の問題を提起しています。実際、個人設定でフォント管理を入力して、フォントがインストールされている場所を見つけることができます。以下をご覧ください。 Win11 フォントのインストール場所: 1. まず、デスクトップの空白スペースを右クリックし、「個人用設定」を開きます。 2. 次に、「フォント」のインストール管理設定を入力します。 3. 必要なフォントを見つけて入力します。 4. 見つからない場合は、直接上から検索することもできます。 5. フォントを入力すると、メタデータの「フォントファイル」に win11 フォントのインストール場所が表示されます。 6. フォントをアンインストールする場合は、「ここでアンインストール」をクリックします。

See all articles

css3で影付き3Dフォントの効果を実現

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック