CSS3

自動改行(word-break・word-wrap・white-space プロパティ)をコントロールして、テキストがボックスから飛び出さないようにしたい。

ん~、違いがようわからん。

テキストがボックスからはみ出る

上記3プロパティの動作確認用ページ (ポップアップで開く)
Firefoxはどれを指定しても、連続した半角英数が長いとtableが伸びちゃうなぁ。

以下、自分の解釈メモ ( なので正しいかどうか怪しいです )。

続きを読む

css3の:nth-last-child(n)や:nth-last-of-type(n)で均等配置

ひとつ前の記事中に使った画像のサイズを勘違いして作成してしまい、テーマによっては段落ちが発生してた。

並んでたり並んでなかったり。
それがどんな勘違いだったかというとそりゃもう酷い話で、
まず、本文のwidthが480pxの所へ画像を2枚横並びで入れようとした。
その時画像のmarginを10pxとして考えて、横幅235pxでサムネイルを作った(235px*2(画像2枚)+10px(margin)=480px)。

けれども実際は両方の画像に右marginがつく為、本当のところmarginは2倍。
さらに画像には1pxのborderがついてたので1画像につき+2px、合わせて4px。
もう全然無理。

そこでサムネイルを小さく作り直せばいいのに、先日のie-css3.jsを思い出してE:nth-last-child(n)を使って2個目(最後)の画像のmarginを消してしまおう!となんか良い事を閃いた気になる。

そしてE:nth-last-child(n)とE:nth-last-of-type(n)の練習をしてから、いざ乱雑モックアップのcssをよく見てみると画像周りのmarginは10pxじゃなくて1emだった。

6pxしか余裕がないところに1emもmarginがあったら右側のmarginを削除しても段落ちするし、marginを5pxくらいにすると狭すぎるしで、結局今回はサムネイルのサイズを変更するのが一番簡単な修正方法でした。

前置きが長くなったけど、:nth-last-child(n)や:nth-last-of-type(n)の均等配置

乱雑モックアップ|nth-last-childなどで均等配置テスト
html
[html]<h1>E:nth-last-child(n)</h1>
<div id="content" class="lastchild">
<div class="main">メイン画像</div>
<div class="sub">
<p>サブコンテンツ<br />
サブコンテンツ<br />
サブコンテンツ</p>
</div>
<div class="sub">
<p>サブコンテンツ<br />
サブコンテンツ<br />
サブコンテンツ</p>
</div>
<div class="sub">
<p>サブコンテンツ<br />
サブコンテンツ<br />
サブコンテンツ</p>
</div>
</div>[/html]
css
[css]body {
font-size:80%;
}

p {
padding:10px;
margin:0;
}

#content {
width:380px;
padding:10px 10px 0 10px;
border:1px solid SteelBlue;
}

.main {
width:380px;
text-align:center;
line-height:234px;
color:black;
background:LightSkyBlue;
margin-bottom:10px;
height:234px;
}

.sub {
width:120px;
margin:0 10px 10px 0;
background:aliceBlue;
float:left;
}

#content:after{
content:"";
display:block;
clear:both;
}

/* ここでmargin0 */
.lastchild .sub:nth-last-child(1){
margin-right:0;
}
[/css]

以前書いたこれ -> 横並びにしたリストを(手動だけど)簡単に均等配置ぽく見せるは、marginを左にとる必要があって今回はダメで。
marginを右にとる方法を使うにしても今回は親要素が一個たりないからダメなはず(たぶん)。

こちらもあーだこーだやってます-> E:nth-last-child(n)とE:nth-last-of-type(n)で均等配置

それにしてもこんな使い方よりもっと別な何かで協力に威力を発揮するんじゃないだろうかって思うんだけどその何かが思いつかない。勿体無い。

続きを読む

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

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

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

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

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

続きを読む

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

自分メモ

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

続きを読む