CSS

[css] 斜めの背景を描く

2017/06/30 CSS No comments ,

斜めに大きくストライプするような模様の背景をCSSだけで作るにあたって、
新単位使ってみたサンプル

(さらに…)

4日目 : CSS Programming Advent Calendar 2012

2012/12/04 CSS No comments , ,

CSS Programming Advent Calendar 2012の4日目
CSSエンジニアって肩書きもアリなんじゃないかと思っているTenderfeelです。

おいしいカレーの作り方を考えてたら無事にゲームができました。
どちらもステージは1つだけです。Chromeでしか動作確認してません。

(さらに…)

[css] contentプロパティで挿入できるコンテンツ

2010/03/23 CSS 10 comments ,

clearFixでお馴染みなCSSの擬似セレクタ:beforeと:afterではcontentプロパティというものが使えるわけですが、
:beforeと:afterがIE7以下未対応ということもあって使ってない人は未だ多かろうと思います。
しかしながらレガシーなIEで表示されないから使わないというのは非常に勿体無いので、
今一度contentプロパティで挿入出来る内容についてまとめておこうと思います。

挿入出来るモノ

大きく分けると3つです。

  • テキスト
  • プロパティの値
  • 画像

(さらに…)

[MooTools] SpriteNavigation Plugin

2010/01/04 CSS, MooTools No comments , , ,

MooToolsとCSSでFlashのような滑らかなマウスオーバーやカレント表示を実装するプラグイン。

spritenavigation plugin

元ネタはCreate a Sprited Navigation Menu Using CSS and MooToolsで、
よくやるコーディングに合わせて作り直しつつちょっとロジックを変えてクラス化した。
使用する際にはHTMLとCSSにいくつかルールがあります。

DEMOはこちら

Image

全部つなげて作る。順番はなんでもいいです。
デモのやつは上から、通常・マウスオーバー・クリック・カレント、になってます。

navigation

Download(psd file):

“[JS]ロールオーバースクリプト(画像名のOn/Offで判別)” をダウンロード – 0 回のダウンロード –

Creative Commons License

(さらに…)

[CSS]画像1枚でメニューボタンを作る

2009/02/19 CSS 2 comments ,

tinyMCEや大手サイトなどでよく使われてる、メニューボタンの画像を1枚にまとめてしまう手法。
ボックスなどにも応用出来るので覚えとくと便利じゃないかなと思います。

(さらに…)