html/css

透過pngにbox-shadowを指定したらドロップシャドウみたいな効果を得られるか?

[追記]
filter: drop-shadowを使った方法が紹介されてました
透過pngにもそのままシャドウをかける事ができる filter: drop-shadow | memocarilog
2012年の記事だから今は他のブラウザにも実装されたのかしら?
[追記ここまで]

ドロップシャドウのイメージcss3のbox-shadowを使うと(ベンダープレフィックスが必要だけど)簡単に影をつけられる。

でもってこれを、透過png(アルファチャンネル付きpng)に指定した場合、photoshopの対象レイヤー右クリック – [レイヤー効果] – [ドロップシャドウ] (もしくは [レイヤー] – [レイヤースタイル] – [ドロップシャドウ])みたいにオブジェクトの輪郭に沿って影がつくのだろうか?
それとも画像の外側に四角い影がつくのだろうか?

ドロップシャドウのようになったら素敵だなぁと思って試してみました。

続きを読む

htmlタグを網羅したcss検証用のhtmlテンプレート / HTML XHTML for CSS Testing

CSS Basic Elements

The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.


Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

[top]


Paragraph

Japanese plum|http://www.colourlovers.com/pattern/5404/Japanese_plum

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

[top]


List Types

Definition List

Definition List Title
This is a definition list division.

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

[top]


Fieldsets, Legends, and Form Elements

Legend

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.

Form Element

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.





Radio 1
Radio 2
Radio 3


Radio 1
Radio 2
Radio 3



[top]


Tables

Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3

[top]


Misc Stuff – abbr, acronym, pre, code, sub, sup, etc.

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

“This stylesheet is going to help so freaking much.”
-Blockquote

[top]

続きを読む

linear-gradientでグラデーションと斜めストライプ

自分メモ

これもborder-radiusのようにfirefoxとsafari,chromeで書き方が変わる。
IEはfilterを使う事でグラデーションをかけられる。
mozillaは色の区切りをpxで指定できるけどwebkitは%指定しか出来ない。

続きを読む

webkitでは(今のところ?)border-radiusのショートハンドが使えない事とか。

Firefoxだとこう書けるけどsafariやchromeではショートハンドが使えないので丸めたい角ごとに指定しないとダメみたい。

-moz-border-radius:左上 右上 右下 左下;

しかもmozとwebkitで指定が違う(面倒くさいなぁ)。

-moz-border-radius-topleft = -webkit-border-top-left-radius
-moz-border-radius-topright = -webkit-border-top-right-radius
-moz-border-radius-bottomleft = -webkit-border-bottom-left-radius
-moz-border-radius-bottomright = -webkit-border-bottom-right-radius

プレフィックスを外した時どちらが正式な記述なんだろうか?
[追記 / 20100903]
下記リンクを参考にするとどうやらwebkitの方が仕様に沿っているようですね。
CSS Backgrounds and Borders Module Level 3
[追記ここまで]

-moz-border-radius-topleft = -webkit-border-top-left-radius

-moz-border-radius-topright = -webkit-border-top-right-radius

-moz-border-radius-bottomleft = -webkit-border-bottom-left-radius

-moz-border-radius-bottomright = -webkit-border-bottom-right-radius

編集中 / HTML5、わからん事リスト。

ようわからん事

  1. articleとsectionの使い分けとか入れ子とか
  2. figureに含むfigcaptionは1つなのか
  3. <header id=”header”>みたいな表記をよく見かけるけど<header></header>にしない理由は? / headerはbody直下だけじゃなくセクション毎に発生するからidが必要なのかな、なんだかなぁ。

その他

nav(aside)に見出しがないとuntitled sectionになって気持ち悪いけど特に問題ないみたい。
HTML5.jp|質問の回答 #4 / Nav のタイトル(ドキュメント・アウトライン)

“untitled section” でも問題ない。outliner のディベロッパーには、”navigation” か、それに相当する言葉を使うべきだ、と提案されている。しかし、そうなるのかどうか、なったとしても、それがいつになるのかは、わからない。(直下に見出しがなければ、

jsを使わないcssだけのロールオーバーでポップアップ表示をする時、IE6.7に対応させる為に気を付ける事は

当初、やる必要は特にないけど、簡単に出来るだろうなと試してみたら
IE(tester)の7と6で全く思い通りにいかなかった
(IE6はdisplay:inline-block;、IE7はdisplay:inlineじゃなければポップアップが反応しなかったのでハックを使ったり
cssの指定も、ポップアップさせる要素の親ブロックからカスケード指定してこなければ反応しなかったり)
ので、挙動の違いをメモしておこうと、これを書いてたけど

何種類かサンプルを作って何度か書き直してるうちに、
IE6もdisplay:inlineでOKだったり、親要素から指定しなくても問題なかったり混乱する結果ばかり
そして最終的には全然シンプルに出来た。

なのでメモの必要もない感じになってしまったけどせっかくなので
以下、サンプルと気を付けた事、気づいた点のメモ。

続きを読む

label for|formのラジオボタンやチェックボックスをクリックしやすくするあれ。

明示的

inputのidとlabelのforを揃える / IE6でも使える。
[html]
<input type="radio" name="gender" id="m" value="男" />
<label for="m">男</label>
<input type="radio" name="gender" id="f" value="女" />
<label for="f">女</label>
[/html]

暗示的

inputをlabelで包む / IE6が対応してない。
[html]
<label>
<input type="radio" name="gender" id="m" value="男" />男
</label>
<label>
<input type="radio" name="gender" id="s" value="女" />女
</label>
[/html]

同じグループなのでname=”gender”は一緒。

動作サンプル|label for id

結局は、IE6が暗示的に結びつけられたlabelに対応してないから、記述の多い明示的な使い方をするしかなかったんですよね。
でも、もうそろそろ良いですよね。

formに必要なidとnameはDOCTYPEによって変わってくるみたい。

けどHTML4.01とXHTML1.0はとりあえず併記しておけば問題ないようだ
XHTML1.1は普段から使わないけど、formにnameを使わなければ問題ないぽい。
HTML5はどうなんだろう。

overflowでリストの最初だけborderを消すってヤツ

CSS HappyLifeさんが、overflowの便利な使い方(とっても使えるoverflowプロパティ。その使い方色々。)を公開してくださっていたので、fmfmと試してみたところ、いきなり02 リストの最初だけborderを消すでサンプル通りの挙動にならずに、つまづいたという話。

どんな風につまづいたかというと、IE6にて下の画像のようになってしまう。

IE TesterのIE6表示

文章で説明すると、liにborder-topを指定しているのに、margin-top:-1pxを指定するとliの下側に(ul?)borderが現れる、そしてliの2番目のborderが2倍になってる。
02 リストの最初だけborderを消すのサンプルをIE6で表示させても、そうならないから、うちの書き方がどこかミスってるんだろうか??

続きを読む