]]>
A CSS & JS Experiment:のエントリーより、CSSだけで作る時計の紹介です。
]]> CSSといっても、ちゃんと正確な時刻を表示し、ちゃんと秒針もうごいています。以下、XHTMLとCSSのソースです。
XHTML
<div id="clockbase">
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
</div>
CSS
#clockbase {
width: 512px;
height: 512px;
position: relative;
margin: 0 auto;
background: url(clock_bg.jpg) no-repeat;
}
#minutes {
width: 229px;
height: 229px;
position: absolute;
top: 200px;
left: 137px;
background: url(minutes-arm.png) no-repeat;
}
#hours {
width: 200px;
height: 200px;
position: absolute;
top: 220px;
left: 150px;
background: url(hours-arm.png) no-repeat left bottom;
}
#seconds {
width: 260px;
height: 260px;
position: absolute;
top: 184px;
left: 120px;
background: url(SECS.gif) no-repeat;
}
#clockbase .min05 {background-position: left top;}
#clockbase .min10 {background-position: left -229px;}
#clockbase .min15 {background-position: left -458px;}
#clockbase .min20 {background-position: left -687px;}
#clockbase .min25 {background-position: left -916px;}
#clockbase .min30 {background-position: left -1145px;}
#clockbase .min35 {background-position: left -1374px;}
#clockbase .min40 {background-position: left -1603px;}
#clockbase .min45 {background-position: left -1832px;}
#clockbase .min50 {background-position: left -2061px;}
#clockbase .min55 {background-position: left -2290px;}
#clockbase .min00 {background-position: left -2519px;}
#clockbase .hr1 {background-position: left top;}
#clockbase .hr2 {background-position: left -200px;}
#clockbase .hr3 {background-position: left -400px;}
#clockbase .hr4 {background-position: left -600px;}
#clockbase .hr5 {background-position: left -800px;}
#clockbase .hr6 {background-position: left -1000px;}
#clockbase .hr7 {background-position: left -1200px;}
#clockbase .hr8 {background-position: left -1400px;}
#clockbase .hr9 {background-position: left -1600px;}
#clockbase .hr10 {background-position: left -1800px;}
#clockbase .hr11 {background-position: left -2000px;}
#clockbase .hr12 {background-position: left -2200px;}
/*-- IE6用のPNGの変わりにGIFを使用--*/
*html #minutes {
background: url(minutes-arm.gif) no-repeat;
}
*html #hours {
background: url(hours-arm.gif) no-repeat left bottom;
}
非常にアイデア満載のCSSソースです。
]]>
ndesign-studio.comのエントリーより、jQueryとJavaScriptで作るMacのようなDockメニュー「CSS Dock Menu」の紹介です。
]]> 設置方法は、ダウンロードページからライブラリをダウンロードして、HTMLのHEAD要素に下記のように設置するだけです。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
IE対策用
<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]->
後は、必要なアイコン画像を設置して出来上がりです。
<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>
2008年から2020年までのカレンダーを作成できる（2008年11月現時点で・・・）オンラインジェネレーター「Compact Calendar Creator」の紹介です。
]]> 下記図のように、コンパクトなカレンダーが出来上がります。これを、プリントアウト、もしくは、PDFに出力も可能になっています。
Web 2.0 Social Bookmarks icons
Fresh, Free and Gorgeous RSS/Feed Icons
The Leaves Fall: A Social Icon Set For Bloggers
Social Bookmark Iconset part II
Free Hand Drawn Doodle Icon Set for Bloggers
Handycons - a free, hand drawn social media icon set
alt属性が空の画像はCSSで背景画像？それともHTMLで書きますか？もちろん、ケースバイケースという考え方もありだと思います。
上記は、そのブログからの質問なのですが、自分の意見としては、CSSで背景画像、これはある意味、理想でもあります。
あえて、無難な答えをだすのであれば、ケースバイケースですが、やはりこれだとどっちもつかずといった感じがします。
それゆえに、空のalt属性の画像は、CSSで背景画像です。
そもそも空のalt属性の画像は、基本的には装飾用のために設置しているものだと思います。
サイトイメージのためや、ブランディングのために使われたり、時にはユーザビリティ的にも非常に役立つこともあります。
しかし、視覚ブラウザにおいては、上記に述べたような効果を発揮するが、非視覚ブラウザの場合は、そうでもありません。
音声ブラウザの場合は、空のalt属性の画像は、読み上げずに飛ばすので、HTMLタグとしておいといてもおいとか無くても良いということになります。
ならば、どちらでも良いのであれば、余計なタグを増やすだけであるので、CSSの背景画像として、設置するほうが、ユーザビリティ的、サーバー的、ブラウジング的にも良いのではないかと思います。
CSSで背景画像で設置しても、CSSをオフにしないかぎり表示されるので、視覚効果の意味合いははっきりとでるはずです。
しかしながら、ここまで、偉そうに述べましたが、管理上やマークアップ時のかかるコストなどにおいて、当然HTMLタグでおいたほうが楽という場合もでてきます。
この場合のことも考慮すると、やはりケースバイケースという考え方も間違いでは無いので、あくまでも理想として、CSSで背景画像が自分の意見です。
ちょっと折れた感がでてしまいましたが申し訳ありません。
]]>
任意のテキストを「Enter Text」のボックスにペーストもしくは、入力し、下のレバー、左からletter-spacing、word-spacing、line-heightのそれぞれのレバーを左右に動かすと「Enter Text」に挿入したテキストが、視覚的に確認することができます。
サイト作成の最初の段階において、非常に役立ちオンラインサービスです。
]]>
