All Articles Dreamweaver
DreamweaverでCSS3で素晴らしいテキストを作成する
David Smith on Wed, February 29th 0 comments
Want to create great looking text in Dreamweaver, but feeling stifled by the CSS styles panel? David Smith comes to the rescue with CSS style tips which will set free your inner designer!

DreamweaverでのスタイルにあなたのWeb​​ページをCSSスタイル]パネルを使用している場合は、デザインに関してはあなたに置かれた制限に注意しています。固体の色、標準フォントなどすべて本当にやりがいの面白いではなく、CSSの機能ブロックのシェイプ。

したがって、この記事であなたに実際にいくつかの素晴らしいデザインを作成します。Dreamweaverでのスタイルに追加するいくつかのCSSを表示しようとイム。

あなたの作成方法については、この膨大なスタイルが含まれていますDivタグを作成してみましょう。


ステップ1 - 絶対位置のDivを追加します。

挿入パネルを開き、レイアウトに設定し、空白のHTMLドキュメントから始まる。レイアウトオプションから絶対位置のDivを描画]を選択します。

Div drawn

divの描画


(だけで自動的に位置とサイズパラメータを含む適用された#IDスタイルを持つdivタグである)絶対位置のDivを描画するツールを使用します。高さが絶対位置のDivのサイズにプロパティパネルを使用します。400ピクセルと幅:400ピクセル。


ステップ2 - 絶対位置のDivに名前を付けます

[APエレメント]パネルと再名MyStyleはへAPDiv1を開きます。 CSSスタイルパネルを開くと、IDスタイルMyStyleは再名も絶対位置のDivを再命名すること自体でしょう。これはあなたが編集されることがスタイルです。


ステップ3 - CSSコードを見つける

あなたが作成したイメージとコードyouveは両方を見ることができるように分割ビューに切り替えます。セクションまでスクロールして、あなたは#MyStyleは{}と言うピンクを強調したコードのセクションが表示されます。これはCSSで作成しようとしていること、それのすべての設定は2つの{}内の間に座ります。


ステップ4 - 一部のコンテンツを追加します。

デザインビューで描かれた絶対位置のDivをクリックして、本部へのテキストの段落について時間タイピング、コピー&ペーストを保存するので、カーソルを貼り付けて、アクティブおよびコマンド-Vプレスになります。

rounded corners

丸みを帯びたコーナー


TIP:再度の幅と高さ(つまりこの場合は200pxの内)とプレビューの正確に半分に半径のサイズを増やし....ちょっとあなたは完璧なサークルを入手!


ステップ6 - グラデーションの背景

グラデーションの背景を追加すると、本当に素敵なデザイン効果である、しかし、あなたは常にすべてのブラウザのすべてのバージョンがそれをサポートすることに留意する必要があります。これだけ今までのイメージを高めるためにそれを使用します。常に念頭に置いて、複数のブラウザで物事を設計し、同様に利用できるの塗りつぶしを持っています。

gradient background

グラデーションの背景


次のコードは、このグラデーションの背景を作成します。

背景色:#666666;

背景画像:の-moz-線形グラデーション(上、#666666、#333333 40.0%)。

背景画像:の-webkit-線形グラデーション(上、#666666、#333333 40.0%)。

背景画像:-O-線形グラデーション(上、#666666、#333333 40.0%)。

背景画像:(上、#666666、#333333 40.0%)MS-線形勾配;

背景画像:線形グラデーション(上、#666666、#333333 40.0%)。


可能であれば、効果を確認するには、いくつかのブラウザでテストします。最後に、テキストにいくつかのパンチを追加することができます。


ステップ7 - テキストの強化

IVEは、勾配に逆らって良い目立たせるために、テキストにホワイト追加しました。また、アイブ氏のテキストにドロップシャドウを追加しました。グラデーションドロップシャドウだけでWebブラウザの最近のバージョンで動作する場合と同様に、常にそれに依存していけない。

drop shadow

ドロップシャドウ


このコードは、カラーとドロップシャドウを追加します。

色:#FFFFFF;

のtext-shadow:2PX 2PXセ呻#000000;


ステップ8 - より良いフォント?

最後に私はテキストの周りにいくつかの領域を作成するために、より良いフォントといくつかのパディングを追加しました。

Better text

優れたテキスト


:これらの行を追加することにより、

フォント重量:ノーマル;

テキストが整列:左;

フォントファミリー:ジョージア州、セリフ。

フォントサイズ:18.0px。

行の高さ:140%;

パディング:10pxの;


ここで私はそれを達成するために追加されたコードです。再びいくつかのコードを念頭に置いて、あなたのページを設計していることをいくつかのブラウザおよび軸受では動作しません場所を確認するためにブラウザの互換性のためにその価値をチェック。

ブラウザがCSS3とHTML 5があまりにもそれらを使用することが怯えいけサポートするすべての時間を更新されている、だけに注意してください。より多くのそれはあなたがまた、また、iOSとAndroid上で完璧に動作Safariなど、ChromeとFirefoxなどのこのコードを目指すことができるしているだけで従来のWebブラウザではありませんいただきました。それは何なりしてからしばらくの価値がそれを作ることはありませんか?



Related Videos
Comments (0)

You must be logged in to comment.

EDM Production Tips
Logic Pro X 402
Dream It. Do It.
Do you want to learn EDM Production Tips?
Yes, I want to learn!
No Thanks, I just want to read the article.
Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: