2008年9月19日金曜日

-webkit-border-radius

-webkit-border-radius -moz-border-radius

Webkit系(Safari、Chrome)とGecko系(Firefox)で角丸をCSSだけで実装できるのは以前にちょっとだけ触れました。(CSSでdivの両側に画像を使うとか)

何がいいかと言うと、リキッドデザインで楽できること。

ドキュメント

  1. MDC(Mozilla):-moz-border-radius
  2. ADC(Apple):Supported CSS Properties(ADCの方はページ先でCTRL( or Command) + Fで単語検索して下さい!)

Firefoxではこんな風に書いて角丸を指定できます。

div.kakumaru{
  -moz-border-radius:10px; /* 4つの角を角丸に */
  -moz-border-radius-topright:10px;    /* 右上だけ角丸 */
  -moz-border-radius-topleft-10px;     /* 左上だけ角丸 */
  -moz-border-radius-bottomright:10px; /* 右下だけ角丸 */
  -moz-border-radius-bottomleft-:10px; /* 左下だけ角丸 */

Safari

div.kakumaru{
  -webkit-border-radius:10px;
  -webkit-border-top-left-radius:10px;    /* 左上だけ角丸 */
  -webkit-border-top-right-radius:10px;   /* 右上だけ角丸 */
  -webkit-border-bottom-left-radius:10px; /* 左下だけ角丸 */
  -webkit-border-bottom-right-radius:10px;/* 右下だけ角丸 */
}

SafariとFirefoxで書き方が若干違うので注意です

こうしたらだめよん

-webkit-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
-webkit-border-radius-bottomleft:10px;
-webkit-border-radius-bottomright:10px;
mozillaはradiusが先webkitはradiusが後で間にハイフンが入ることに注意!

[追記] ちなみにOperaは現在は実装されてないようです。SVGでやる方法もある見たいですが、CSSだけのテクニックではないので省きます。IEも同様にVMLと独自拡張のbehaviorでhtcファイルを読み込ませて対応するようです。JavaScriptではNifty ConersやjQuery Cornerなどがあります。これ以外の方法で角丸を再現する場合、無駄なdivや無駄なspanタグを書くはめになると思います。htcもsvgもそうだけど、角丸の仕事はCSSに任せられる日が早く来てほしい。各ベンダーの接頭辞が消える日が...

追記 2009/02/23/

サンプル追加

jQuery UIもIEは角丸じゃなくなる~


<div style="border:solid 1px #999; -moz-border-radius:10px; -opera-border-radius:10px; -webkit-border-radius:10px; border-radius:10px">
  <p>jQuery UIもIEは角丸じゃなくなる~</p>
</div>

IEのhtcでやる方法だと、周りに銀色っぽい変な線が絶対表示されて変になります

2008年9月17日水曜日

CSSでdivの両側に画像を使うとか

CSS3にはimage-borderというのがある。これがめっさ便利なんですが、まだCSS3のどのモジュールも勧告に至っていないのが現状で、さっさとしろW3C!という感じです。

W3Cの今の感じだと、Fireworksのナインスライス的なものをCSSで簡単に再現できる。 すでにSafariが実験的に-webkit-border-imageとして実装している。ちょっと違うけど、でもこれマジで便利です。

例えば、右、左下、下に影をつけるドロップシャドウの画像をborderに使いたい場合はこんな感じ。(よく理解できてないので勉強中)

ソース

こんな画像を用意して


こんな風に書いてみる

#CSS
#container{
  -webkit-border-image: url(img/box_shadow.gif)  8 15 15 10 / 12px round round;
}
<div id="container">
  <p>バルト(力士)の日本語は聞き取りにくい</p>
</div>

実行例(Safari3 on Macで確認済み)

バルト(力士)の日本語は聞き取りにくい

補足

-moz-border-imageというのもあるらしいけど、Firefox3.1からの実装らしいです。まだリリースされてません。でも書き方はwebkitと同じなようです。

これでwidthやheightを指定したり、可変なリキッドデザインにしても綺麗に表示されます。

残念ながら、同じWebkitのChromeでSafariできちんと表示されるページを見てみたんですが、ちょっと崩れるみたいですねぇ。んー

全てのブラウザがborder-imageを早く実装する日を夢見て。
ちなみに角丸を施すには、-webkit-border-radius-moz-border-radiusが使えます☆

2008年9月15日月曜日

Macで隠しファイルを表示非表示

過去に投稿したような記憶もあるけれど、たぶん書いてないのでメモ代わりに載せときます。 ターミナルで表示する時にTRUE、非表示の時にFALSEにすればOKです。
defaults write com.apple.finder AppleShowAllFiles TRUE
killall Finder #Finderを殺して蘇生w
たったこれだけの操作だけど、面倒だからFinderにボタンを追加して簡単に切り替えられるようにしたいけど、そういうことってできるのかな?

2008年9月11日木曜日

Pythonのここが好き

KISS(Keep It Simple Stupid)なところ I wanna rock n roll all night n party every day! (n = and)

別に元祖ビジュアル系が好きなわけじゃないよ。

Pythonのここが好きパート2!

京都風に言うとなんかやらしんどすぅ

おPython(パイソン)はん もう少し意図的に発音するとおっPythonはん

もみもみしてええんでっしゃろか?

Pythonのここが好きパート3!

辞書を書くのが楽
#PHP
$dic = array( 'Math' => 80, 'Japanese' => 70);

#Python
dic = { 'Math':80, 'Japanese':70}
dic = { u'数学':80, u'国語':70}

JSONっぽいですね。=>ってタイプするのがめんどくさい。ちなみに辞書はPHPでいう連想配列のことです。

Pythonのここが好きパート4!

asでリネームできる
import VeryVeryVeryLongLongLongNameModule as M
これで普通ならVeryVeryVeryLongLongLongNameModule.method()とするところを、M.method();と書ける。同じ事を他の言語でやろうと思えばできるけど、最初から言語にその概念があるかないかは結構大きい。PHPのフレームワークはhtmlspecialchars関数をhにリネームしてるのがありますね。Railsのパクりです。でも多用する関数は短い方が良いと思います。あとfunctionもdefがいいな〜>PHP

Pythonのここが嫌い!

ニシキヘビ... ヤギを丸呑みにしてる写真とかが検索でひっかかってくる。俗語がアレ。三項演算が微妙。式 ? 真:偽の表現がいいなぁ。

ぶっちゃけほとんどPythonには触れてないけど。ファイル名は"おっ.py"

2008年9月10日水曜日

jQueryのここが好き

Prototypeもいいけれど、You jQuery使っちゃいなよ! jQueryには使えるベーシックフィルタというのが用意されとります。 例えばテーブルで偶数の行だけ背景色を変える場合こう
$("tr:even").css("background-color", "#ffffff");
奇数なら:odd Formで選択されているものを取る時は:selectedなど いろいろありまっせ。 詳しくはマニュアルのSelectorsを参照して下さい。それぞれシンプルで分かりやすいサンプルコードが載ってます。 アニメーションエフェクトも最初からあるんで便利です。