カテゴリー
HTML/CSS

jQueryのトグル式スライドメニュー

jQueryを使ってトグルスイッチ」をメンテナンスしました。
デモを見る
サンプルをダウンロードする
主な変更は、スタイルプロパティの見直しです。

カテゴリー
HTML/CSS

CSS3 BOX STYLE

css3-box-style.png
AUGM in OITA のウェブページを無事に公開できたので、今回使用したボックススタイルをまとめてみました。なにかのお役に立てればいいなあ…。
ライブデモ
サンプルファイル (DMG)
サンプルファイル (ZIP)
ご意見、ご感想をお待ちしております! 🙂

カテゴリー
HTML/CSS

CSS3: グローテキスト

最近、ちょこちょこ見かけるようになったグローテキスト。
Glow Text (リンク先で実際の動きを見れます)
.glow {
-webkit-animation-direction: alternate;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: glow;
}
@-webkit-keyframes glow {
0% {
color: black;
}
100% {
color: red;
}
}
ボタン周辺(box-shadow)を点滅させるのも同じ原理です。

カテゴリー
HTML/CSS

jQueryを使ってトグルスイッチ

久しぶりのエントリーとなりました。なんとか生きてます。
jQueryのslidetoggleメソッドを使ってスライドするメニューを作ってみました。ボタンを押すと下へメニューがするするっと降りてくるものです。言葉では伝えにくいのでデモをご覧ください。また、サンプルファイルを用意してますのでご利用ください。
jquery-slidetoggle.png
デモを見る
サンプルをダウンロードする
これを作成しようと思ったきっかけは、コードエディタのEspressoがバージョンアップしたので、どのくらい機能向上したのかを確かめるためでもありました。印象は、いくぶんか安定性は増したもののまだまだ不安定な部分が見受けられます。かなり良い感じに仕上がってきているので残念です。
あと、コード補完を選択するショートカットキーに Control-N および Control-P が使えないのがすごく残念。これを変えられるだけでも印象はすごく変わってくるのになぁ。まだまだ、重要なドキュメントはCodaで編集することになりそうです。

カテゴリー
HTML/CSS

CSSで画像を裏返す

スタイルシートだけでここまでできるようになるのですね。すばらしい!!
カーソルを画像の上に持っていくと画像が反転してテキストを表示してくれるという動作をします。ウィジェットの設定画面を表示する動作に似ています。ただ、このプロパティはここ最近リリースされたWebKit Nightly Buildでしか動作しません。Safari 4.0.2でも動作しないことを確認しております。

カテゴリー
HTML/CSS Web

CSS3でリスト要素のタイミングを取ってみる

`-webkit-transition` プロパティでいろいろ遊んでいる今日この頃。タイミングシリーズが続いてます。
一つ前のエントリーで『ばび』さんから「マウスカーソルでさーっとなぞると」とアドバイスをいただいて文字色を変えるだけでは目立たないなぁと思えてきて、マウスオーバーすると文字を少しずらした方が目立つかもとやってみました。

li a:hover { margin-left: -5px; }
li a { -webkit-transition: margin-left 0.25s linear; }

右サイドメニューの「最近のエントリー」と「カテゴリー」に適用しているのでマウスオーバーして実際の動きを確かめてみてください。

カテゴリー
HTML/CSS Web

CSS3でリンク要素のタイミングを取ってみる

HTMLの肝であるハイパーリンク。文章中にある場合はアンダーラインを入れたり、色を変えたりして目立たせるようにしていると思います。ハイパーリンクにカーソルを近づけると色を変えたりと方法はいろいろ。このウェブログでもハイパーリンクにアンダーラインを入れてマウスが近づけば色を変えるようにしてます。これに、`-webkit-transition` でタイミングを取ってゆっくり(0.5秒)と色が変わるようにしてみました。簡単にできるので試してみてください。ただ、WebKit レンダリングエンジンを利用するウェブブラウザしか動作しないのであしからず。それ以外のウェブブラウザでは、今まで通りに動作するので問題はないでしょう。
a:link, a:visited { -webkit-transition: color 0.25s ease-in-out; }
`a:hover` セレクタを設定しているのであればプロパティを追加すればいいし、利用してなければ文字色を指定してこのままを書き入れましょう。上記をスタイルシートへ書き入れてください。
試しに、このウェブログのエントリー一覧でエントリータイトルやその他のハイパーリンクにマウスを近づけて動作を確認してみてください。
追記(2009-06-18): ばびさんからアドバイスをいただき、マウスイン/アウトで動作するように書き換えました。

カテゴリー
HTML/CSS Web

HTML5に本腰を入れてみる

先のWWDC2009で話題になっていたHTML5を本気になって調べてみた。でも、2011年勧告はあり得ないらしいので、ちょっと力が抜けた。まだ、草案の状態なのでどれが正しくてどれが間違っているのかがわからない。あのアップルがSafari4ベータで華々しくHTML5ウェブページを登場させたけど、検証してみると間違いが多かったようですね。なので、この時期は程々にしておいてお遊び程度にやっておくのがいいのかも。と、いうことで、お遊びをやってみました。
練習サイト: 実践 CSS3 のまとめ
骨格が出来上がった状態で小休止。一応 W3C でチェックしてもらったら合格点をいただきました。後は、見た目をどうするかです。そのうち、ぼちぼちやっていこうと思います。

カテゴリー
HTML/CSS

CSS3でバックグラウンドイメージをスライド

ある要素をマウスオーバーすると背景画像が変わる手法。ボタンなどでよく見かける視覚効果ですね。これに `-webkit-transition` プロパティでタイミングをとってやると面白い動きをするので、何かに利用できないかなぁと考えているところ。

.wp-logo-background {
  background: url(wp-logo-background.png) no-repeat 0 0;
  width: 250px;
  height: 75px;
  -webkit-transition: background-image, .5s;
  margin: 20px auto;
}
.wp-logo-background:hover {
  background-position: 0 -75px;
}

注意: WebKit独自拡張プロパティを使用しているのと、div 要素に :hover 擬似クラスを適用しているので、WebKit系ウェブブラウザでないと動作しません。

カテゴリー
HTML/CSS

CSS3でフォトフレームを付けてみた

写真を掲載するのにフォトフレームを付けて少しでも見栄えを良くしようと、まずはflickr経由の写真を対象に付けてみました。
R0010110
いつものごとく、WebKit独自拡張プロパティを使用しているのでWebKit系ブラウザ以外だとフォトフレームは表示されません。

.frame, img[src*="flickr.com"] {
  display: inline-block;
  margin: 0 auto; padding: 4px;
	background-color: #fff;
	border: 1px 3px 4px 3px solid #d7d7d7;
	-webkit-border-image: url("images/frame.png") 1 3 4 3 / 1px 3px 4px 3px;
	-moz-border-image: url("images/frame.png") 1 3 4 3 / 1px 3px 4px 3px;
	border-image: url("images/frame.png") 1 3 4 3 / 1px 3px 4px 3px;
}

frame.png
この画像を `-webkit-border-image` プロパティで指定して、`stretch` パラメータで画像を引き延ばしています。`-webkit-background-clip` プロパティは画像が枠内に収まるよう指定してます。`border-width` でまとめるとシンプルなソースになるので書き換えました。
参照:
DigitalSandbox – Blog – Fancy Frames with border-image
border-image を利用したボックスデザイン