縦方向に１件ずつスクロール表示するやつ
See the Pen Pure CSS News Ticker (vertical) by Tenderfeel (@Tenderfeel) on CodePen.
表示エリアの高さ＝リスト要素１件の高さ＝keyframeのスクロール量 にする。
keyframesに入れてるvisibilityを消すと巻き戻る様子が表示される。
演出として巻き戻すところを敢えて見せるなら消してもよろしいと思う。
タグ: CSS
[css] 斜めの背景を描く
斜めに大きくストライプするような模様の背景をCSSだけで作るにあたって、
新単位使ってみたサンプル
4日目 : CSS Programming Advent Calendar 2012
CSS Programming Advent Calendar 2012の4日目
CSSエンジニアって肩書きもアリなんじゃないかと思っているTenderfeelです。
おいしいカレーの作り方を考えてたら無事にゲームができました。
どちらもステージは１つだけです。Chromeでしか動作確認してません。
[css] contentプロパティで挿入できるコンテンツ
clearFixでお馴染みなCSSの擬似セレクタ:beforeと:afterではcontentプロパティというものが使えるわけですが、
:beforeと:afterがIE7以下未対応ということもあって使ってない人は未だ多かろうと思います。
しかしながらレガシーなIEで表示されないから使わないというのは非常に勿体無いので、
今一度contentプロパティで挿入出来る内容についてまとめておこうと思います。
挿入出来るモノ
大きく分けると３つです。
- テキスト
- プロパティの値
- 画像
[MooTools] SpriteNavigation Plugin
MooToolsとCSSでFlashのような滑らかなマウスオーバーやカレント表示を実装するプラグイン。
元ネタはCreate a Sprited Navigation Menu Using CSS and MooToolsで、
よくやるコーディングに合わせて作り直しつつちょっとロジックを変えてクラス化した。
使用する際にはHTMLとCSSにいくつかルールがあります。
Image
全部つなげて作る。順番はなんでもいいです。
デモのやつは上から、通常・マウスオーバー・クリック・カレント、になってます。
Download(psd file):
“SpriteNavigation Demo Base” をダウンロード nav.zip – 610 回のダウンロード – 41 KB
[CSS]画像１枚でメニューボタンを作る
tinyMCEや大手サイトなどでよく使われてる、メニューボタンの画像を１枚にまとめてしまう手法。
ボックスなどにも応用出来るので覚えとくと便利じゃないかなと思います。
[XHTML]WebサイトのOOP
Webサイトはオブジェクトの集合体。
CSSもオブジェクト指向。
オブジェクトの集合なら、命名規則やデザインパターン作っておけば再利用はしやすくなる筈。
WebSiteでもOOP（Object Oriented Programming）的なこと出来る？
…となんとなく考えた事を適当に羅列してるメモです。まとまり皆無。思考ダダ漏れ注意。
Class
- Header -> #header
- Sidebar(Menu) -> #sidebar
- Contents -> #contents,#wrapper,#container
- Form ->#form,#contact
- Fotoer ->#footer
Method
- List (UL,OL,DL) -> #menu,#navi,#navigation,#globalnavi
- Headering Title (H1～H6) -> #page-title,#sitename,#content-title
- Text Section -> div.post , div.section , div.entry
- Buttons (input type=”button”,button tag, block style Ancher) -> #submit,#reset
- Input (form elements)
- Copyright (address) -> #copyright
- Image (floating style, ancher style)
- Table
Property
- Inlines (strong,em,tt,code…etc)
- Blocks (div,p,address,blockquote…etc)
- String (plain text)
4BOXとか5BOXとかのレイアウトテンプレートは中身が空のクラス、つまりこんな状態です。
class Header {
}
XHTMLコーディング過程を晒してみる（画像で）
恥を忍んでつらつら過程の画像だけ並べてみる。
画像は全部等倍で、ソースは貼って無いです。
架空じゃないから実際のサイトで見れると思いまする。
ラフデザイン。
２カラムでメインメニューは左？ど真ん中にタブのメニュー。
メニューが２箇所あるので、コンテンツをメニューで挟むことにする。
コンテンツの両脇にグラデーションのシャドウって定番だよなあ。
※デザインはデザイナーが作った
[JS]Table内セルを自動的にストライプにする
１行間隔でストライプとか、何行おきかで線が引いてあるTableをたまに見ますが、
いちいちclass追加してると面倒なのでjavacript使った方が早いよね。
っていうことでそういう感じのことをするスクリプトのサンプル。
左：１行間隔でセルの背景色変える
右：３行間隔で線を引く
[CSS]CSSだけで作る吹き出しのしっぽ
どんなボックスもしっぽさえつけりゃフキダシに見えるとエロイ人はいいました。
何故CSSだけで作るのか？それは…そこにCSSがあるからだ！
まあ、崩れたりもするんですけど。
[CSS]Safari3.X用CSSハック
Safari3.1登場。爆速表示で非常に快適なブラウザです。
FireFoxがカスタムし過ぎか最近重いからこの速さはかなり新鮮。
FireFoxでチェックしながら作ってたら大抵Safariでも同じ表示になるんだけど、
今作ってるサイトでSafariがIE6系と同じ表示になる現象が発生したので
Safariにだけ適用するCSSハックを探してたらいいものがありました。
CSS Filter: Safari CSS Hack
Not that Safari 3.0 on Windows is a grade-A browser yet, and not that I have figured out any reasons to need to hack for this browser yet, but two good potential CSS filters include using :first-of-type and -webkit-min-device-pixel-ratio.
CSS, JavaScript and XHTML Explained » Targeting Safari 3 with CSS and JavaScript: Safari3 Hacks & Filters (2008-04-15)
[CSS]透過PNGと透過フィルターの使い方
要素を透過させる場合、アルファチャンネルPNGかCSSのフィルターどちらか使えば作ることが出来る。
アルファチャンネルPNGはPNG24とかの保存形式で、背景無し（またはマスクつき）の画像を保存すれば作成出来る。
Div等の背景を透過させる場合、アルファチャンネルPNGで80%くらいに透過させた画像を背景にすると、フィルターと変わらない効果を得られる。
透過フィルターを使った場合、中の要素まで透過してしまうという問題がある。
positionとか色々CSSを駆使すれば回避できないこともないが、アルファチャンネルPNGを使えば中の要素が透けることはない。
以下サンプル
解説は続きに。
“[CSS]透過PNGと透過フィルターの使い方” の続きを読む
[CSS]スタイル優先順位の個別性と計算方法
クリエイターが身につけておくべき新・100の法則
CSSは下に書いたものが優先されるプログラム的な仕様のほかに、優先順位を決めるルールがある。
よく知られてるのは以下の基本ルール。
- CSS作成者による優先順位。
- Webページ製作者が作成したCSS
- Webブラウザ使用者が作成したCSS
- WebブラウザのデフォルトCSS
- 記述位置が下のものが優先される。
- !important宣言の付いたスタイルが最優先される。
!importantが付くと優先順位が変わる。- Webブラウザ使用者が作成したCSS（!important有）
- Webページ製作者が作成したCSS(!important有）
- Webページ製作者が作成したCSS
- Webブラウザ使用者が作成したCSS
- WebブラウザのデフォルトCSS
さらに、スタイルの個別性を決める数値というものが存在する。
Tableless Contact Form sample01
テーブルを使わないお問い合わせフォームが流行ってると聞いて。
モノトーンでシンプルめ。左に項目、右に入力エリアが並ぶオーソドックスなやつ。
Checked(win):IE6,IE7,FireFox2,Opera9,Safari
Mac未確認。
[JS]Javascriptの有効・無効でCSSを変更する
javascriptが無効の時、有効で使ってるCSSだと表示がおかしくなる場合の回避方法について。
最近作ったサイトが、コンテンツの表示をmootoolsで動かしていて（スライドとかで）、javascript無効にすると まったく見えない状態になってしまう。
XHTMLソースを変更しているわけではないので、CSSだけ変更すれば見れる状態になる。（CSS無効でもXHTMLだからそれなりに見れる）
というわけで、javascriptの有効・無効でCSSを変更する方法についてのメモ。