JTrim2
JTrimの2です・・・・ 前回のJTrim
アップするの忘れていました・・・・
下にJTrimで透過処理をする場合の注意 があります
モザイク？
グレースケール（白黒に加工）
セピア色に・・・古ぼけた写真みたいに
左右反転
上下反転
回転
透過（透明）処理
イメージ → 円形切抜き・角丸切抜き で切り抜いて
周りの白地をスポイトでクリックすると周りが透明になります
その後、gif または png 形式で保存します 透過時の注意
透過時の注意
加工前の画像の形式が jpg や bmp の場合上のような状態でgif、png 形式で保存しても透過しません
その場合は加工前(jpg)の画像をJTrimで開いてそのまま何もしないでgif形式で保存してから閉じて
その保存した画像(gif)を開いて加工してください
ブログに貼り付ける場合はサムネイルは透過しない場合がありますのでオリジナルで貼り付けてください
また、png形式はIEでは透過しませんので注意下さい
・・・・・ＩＥ以外では透過されます
JTrim / フォトレタッチ、画像加工リンク集
CSS タイトル画像のロールオーバー3
今回はまったくのお遊びです 役に立つかは・・・・？
メリットは・・・・ナイです！
一応・・・こんなんも出来ますよ・・・って頭の片隅にでも・・・・
・・・・あっ、最後はまじめです・・・
１枚のメニュ画像とCSSで・・・・
ホームページとか作る方には役に立ちます
と、言うことで・・・・
こんなメチャクチャな１枚の画像とCSSでロールオーバーをやってみます
div#header h1 {
margin:0 0 0 50px;
padding:0;
}
div#header h1 a {
display:block;
width:205px; /* タイトル画像の横幅 */
height:62px; /* タイトル画像の縦 */
background-image : url(http://stat.ameba.jp/user_images/4a/65/10082469625.jpg );
background-repeat : no-repeat;
background-position:-16px -35px;
text-indent: -2000px;
overflow: hidden;
outline-style:none;
}
div#header h1 a:hover {
background-position:-285px -124px;
}
/* 読者になるボタンロールオーバー */
#readerList img {
visibility : hidden ;
}
#readerList dl a{
display: block;
width:152px;/* 画像の横幅 */
height:30px;/* 画像の縦 */
background-repeat : no-repeat ;
background-image : url(http://stat.ameba.jp/user_images/4a/65/10082469625.jpg );
background-position:-5px -150px;
}
#readerList dl a:hover {
background-position:-417px -24px;
}
/* ブログを作るボタンロールオーバー */
#ameblo a#btn_blog img {
visibility : hidden ;
}
#ameblo a#btn_blog{
display: block;
width:152px;/* 画像の横幅 */
height:30px;/* 画像の縦 */
background-repeat : no-repeat ;
background-image : url(http://stat.ameba.jp/user_images/4a/65/10082469625.jpg );
background-position:-115px -110px;
}
#ameblo a#btn_blog:hover {
background-position:-236px -10px;
}
わざわざこんな無茶なことやる方はおられないと思いますのでさらっと・・・・・・
↓実際に上の画像を使ってやってみました マウスをのっけてみてください
ここからはまじめに・・・・？
上を応用すれば下のような１枚の画像とCSSでホームページのメニュが作れます・・・・
緑の文字は現在のページを、マウスをのせると紫に文字色が変ります ・・のように使います
CSS タイトル画像のロールオーバー2
前回 の続きです・・・・ 実際の見本ブログはココ
普段の画像とマウスが乗った時の画像を用意して・・・・
それをくっつけて１枚の画像にしてしまいます
縦にくっつけていますが横でもかまいません
２枚の画像はそれぞれ同じサイズにしてください
この方法のメリット・・・・
最初の時点で画像が読み込まれていますので
マウスをのせたときの反応が早くなります
↓縦にくっつけて１枚の画像になったタイトル画像
#header h1,
#header h2{/*位置の初期化*/
margin:0;
padding:0;
}
#header{
height:420px;/*画像の縦*/
}
#header h1 a{
width:760px;
height:420px;
display:block;
position:absolute;
text-indent:-9000px;
text-decoration:none;
background-image: url(画像のURL);
background-repeat:no-repeat;
}
#header h1 a:hover{
background-position: 0 -420px;
}
aタグの背景に画像を配置します
実際の画像のサイズは横760px縦840pxですが・・・
width:760px;
height:420px;
と、なっていますので上から420px分しか表示されません
つまり上半分・・・普段の画像しか表示されないわけです
マウスがのったとき・・・・
#header h1 a:hover で、background-position:0px -420px;となっています
マウスがのったら背景のポジションを横には動かさないで縦を-420px動かしなさい・・・・
縦に-420px動かすと・・・・
下にくっつけた画像が現れます
height:420px;と表示する高さは420pxですから
結果、下にくっつけた画像だけが表示されるわけです
※基準は画像の左上の角です
また画像を横につなげた場合は・・・
#header h1 a:hover{
background-position: -760px 0;
}
この方法は・・・・
「読者になるボタン」や「読者になるボタン」ボタンのロールオーバーでも利用可能です
/* 読者になるボタンロールオーバー */
#readerList img {
visibility : hidden ;
}
#readerList dl a{
width:150px;
height:80px;
display:block;
background-repeat : no-repeat;
background-image : url(画像のURL);
}
#readerList dl a:hover {
background-position: 0 -80px;
}
/* ブログを作るボタンロールオーバー */
#ameblo a#btn_blog img {
visibility : hidden ;
}
#ameblo a#btn_blog{
width:150px;
height:80px;
display:block;
background-repeat : no-repeat;
background-image : url(画像のURL);
}
#ameblo a#btn_blog:hover {
background-position: 0 -80px;
}
こんなんです↓
ちなみに・・・・何セットも作らなくても・・・・・
↓１枚の画像だけでタイトル、読者になるボタン、読者になるボタン のロールオーバーも可能です
・・・・・つづく
出来ますが・・・・ここまでしなくても・・・・するメリットもないしね・・・・・
でも一応、つづく・・・予定？