CSS « shortcut

99月/040

CSSでテキストにドロップシャドウをかける

http://www.apple.com/jp/enews/tips/pro/003.html

Safariのみが実装しているCSS2の機能。テキストのアンチエイリアスが効いた状態で使用すると非常に綺麗なのですが、現在のSafariとMacの普及率を考えるとほとんど自己満足でしか使えない機能だったりもします。HTMLのソースがとても奇麗とかそういう話とよく似ていますね。

Mozillaが実装するとまた状況も変わるのに。

Filed under: CSS No Comments

214月/040

リストなんだけどボタンっぽく見えるスタイルシートとHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<head>
<title></title>
<style type="text/css">
body{
/* text-align:center; */
}
.menu{
background-color: #cccccc;
width: 100px;
}
a{
text-decoration: none;
color: #333;
}
ul{
list-style: none none outside;
margin:0px;
padding:0px;
}
.menu li {
background-color: transparent;
padding: 0;
margin: 0;
}
.menu li a {
display: block;
padding: 0 0 0 10px;
border: solid 1px;
border-color: #ccc #666 #333 #aaa;
}
.menu li a:hover{
color: #000;
background-color: #aaa;
}
.menu li a:active{
color: #933;
background-color: #caa;
border: solid 1px;
border-color: #333 #aaa #ccc #666;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
</ul>
</body>
</html>

a要素をブロックレベルにするのとリストのレイアウト調整が肝です。
簡単かなと思っていたら以外と面倒でした。