Design

CSSによる画像ロールオーバーのちらつきを防ぐ方法

Sep 23, 2009

AD:

最近、久しぶりデザインをすることが増えたので、CSSを触っているんですが
CSSを使って画像ロールオーバー使うことがあるのですが、それが画面を開いた段階では、a:hoverに指定した画像を読み込みに行ってくれなくて
困っておりました。そこで下記方法を思いつき対応しました。

サンプル

画像を一枚にまとめます

使用した画像

htmlのソース

&lt;p class="rollover"&gt;&lt;a href="#"&gt;&#12522;&#12531;&#12463;&lt;/a&gt;&lt;/p&gt;

1	<p class="rollover"><a href="#">リンク</a></p>

CSS

p.rollover a{
	display:block;
	width:150px;
	height:50px;
	text-indent:-9999px;
	overflow:hidden;
}
p.rollover a{
	background:url(rollover.jpg) top left no-repeat;
}
p.rollover a:hover{
	background:url(rollover.jpg) top right no-repeat;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

p.rollover a{

display:block;

width:150px;

height:50px;

text-indent:-9999px;

overflow:hidden;

}

p.rollover a{

background:url(rollover.jpg) top left no-repeat;

}

p.rollover a:hover{

background:url(rollover.jpg) top right no-repeat;

}

Twitter:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 0

Robert Slimbachのfonts

Aug 17, 2009

AD:

robertslimbach

Adobeのユーザ登録特典はSanvito Pro

AdobeのCS4を導入しているんですが、先日Adobeのユーザ登録をおこなったところ、ユーザ登録特典としてフォントをいただけました。
そのフォントは、Robert Slimbachが作者のSanvito Proです。

Robert Slimbachとは

Robert Slimbachという名前は今回はじめて知ったのですが、検索してみるとフォントデザイナーとして有名なかたなようで、
作品をしらべてみると、ぼくがよく利用する「Myriad Pro」の作者だったとは、これは驚きました。
そこで、ぼくのPCの中にはいっているfontを調べてみると、4つも彼の作品が入ってました。これもまた驚きました。

Gramond
Myriad Pro
Minion Pro
SanvitoPro

Robert Slimbachの経歴

http://www.identifont.com/show?17Z
Adobeで働いていたんですね。

Twitter:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 0

Fonts list for Mac & Windows in common.

Feb 28, 2009

AD:

I checked fonts list for Mac & Windows in common.

Arial	Smaple text
Arial Black	Smaple text
Century Gothic	Smaple text
Comic Sans MS	Smaple text
Courier New	Smaple text
Lucida Sans Unicode	Smaple text
Impact	Smaple text
MS UI Gothic	Smaple text
Times New Roman	Smaple text
Trebuchet MS	Smaple text
Verdana	Smaple text