This lesson assumes that you already have a CSS layout for your myspace page and need to change the transparency of a section.このレッスンは、既にお客様のMySpaceページのCSSレイアウトをしていると、セクションの透明度を変更する必要があると仮定します。 This lesson also assumes that you have at least introductory experience with Cascading Style Sheetsこのレッスンまた、少なくともCascading Style Sheetsの導入経験があると仮定
Transparency is a popular way to decorate a page, both in myspace and with other popular services.透明のページを飾るためには、人気の高い方法は、 MySpaceの両方で、その他の人気の高いサービスとされています。 It is fairly easy to do as long as you keep a few details in mind :としていくつかの詳細を覚えておくことはかなりの長期に簡単です:
- Know what the code is!知っているのコードとは何か!
- Know exactly what you want to make transparent知っている正確に何を透明にする
- Know how transparent you want to make it知っているようにする方法を透明に
- Remember to set code for both internet explorer and mozilla type browsers Internet ExplorerやMozillaブラウザの両方のタイプのコードを設定してください
1 - Know what the code is 1 -のコードが何であるかを知っている
float:left;
filter:alpha(opacity=80);
-moz-opacity:.80;
opacity:.80;
There are 4 lines to this.これを4行している。 The first is the placement.は、最初に配置されています。 You have to set a placement for this transparency / opacity change to work.この透明性のための配置を設定する必要がある/仕事に不透明度を変更してください。
We used float:left; This works for IE and Mozilla / Firefox.私たちはフロート:左に使用される; IEとMozillaのこの作品/ Firefoxを起動します。
Because you want your code to work on multiple browsers - use all 3 versions of this codeこれは複数のブラウザ上で動作するようにコードを-このコードのすべての3バージョンを使用する
float:left;
filter:alpha(opacity=80);
-moz-opacity:.80;
opacity:.80;
You can tweak those numbers to get different effects.さまざまな効果を得るにそれらの数字を微調整することができます。 Just note that opacity =100 means it’s opaque.だけでは、不透明度= 100は不透明の意味をメモします。
2 - Knowing what to make transparent 2 -何透明に知っている
This code goes within the { } for your CSS definition.このコードになるあなたのCSSを定義( )です。 You most likely won’t want to make your entire layout transparent - although there are some cases where this might be appealing.あなたが最も可能性の高いレイアウト全体を透明にすることはできません-ただし、いくつかのケースで、この魅力的かもしれないしている。 For example :例えば:
To make a specific table content transparent place your code within the CSS definition for those tables.これらのテーブルには、 CSSの定義には、特定のテーブルの内容を透明な場所をコードしてください。
eg for your myspace tablesあなたのMySpaceのテーブルの例:
table table table {テーブルテーブルテーブル(
float:left;フロート:左;
filter:alpha(opacity=80);フィルタ:アルファ(不透明度= 80 ) ;
-moz-opacity:.80; -悪運-不透明度: 58 ;
opacity:.80;不透明度: 58 ;
} )
3 - Know how transparent to make this 3 -どのように透明性を知っている
This is entirely subjective.これは完全に主観的です。 You simply need to tinker with the numbers to figure out how transparent to make it.あなたがどのようにするだけで透明性を理解するには、数字に手を加える必要があります。 Just remember that # opacity = 100 - opacity transparency.だけでは、 #不透明度= 100 -不透明度の透明性を覚えています。 Therefore 30 % opacity = 70 % transparentしたがって30 %透過度= 70 %透明
4 - Remember to set code for both internet explorer and mozilla type browsers 4 -両方のI nternetE xplorerやM ozillaブラウザ用のコードのタイプを設定してください
The code listed above covers both IE and Mozilla Firefox.上記のコードをIEとMozilla Firefoxの両方をカバーしています。 It is somewhat redundant but it is worth keeping.やや冗長ですが、それを維持する価値がある。
Do not forget to assign the class to your element or this won’t work! お客様の要素またはこの動作しませんが、クラスを割り当てることを忘れないでください!
css code: CSSコード:
<style type=”text/css”> <style type="text/css">
.testtable { 。 testtable (
float:left;フロート:左;
filter:alpha(opacity=50);フィルタ:アルファ(不透明度= 50 ) ;
-moz-opacity:.50; -悪運-不透明度: 0.50 ;
opacity:.50;不透明度: 0.50 ;
} )
</style> < /スタイル>
HTML CODE : HTMLコード:
<table width=”50%” border=”0″ class=”testtable” > width="50%" border="0" class="testtable" <table >
<tr>
<td><strong>This is the text in this table </strong></td>の<td> <strong>このこのテーブル内のテキスト< / strong > < /のTD >です
</tr> < / Trの>
<tr>
<td><img src=”/images/scrollingimage.jpg” width=”466″ height=”206″></td> src="/images/scrollingimage.jpg"の<td> width="466" <img height="206"> < /のTD >
</tr> < / Trの>
<tr>
<td>This is at 50 % opacity </td>の<td>この50 %の不透明度< /のTD >
</tr> < / Trの>
</table> < /表>
We hope you will find this useful.私たちはこれが役に立つことを期待する。 This is another example of how versatile CSS can be for designing your page layouts.この方法の多彩なCSSの別の例をページのレイアウトを設計するためにできるということです。