[Dreamweaver]スニペットに登録して作業効率が上がるCSS3まとめ

  • あとで読みたい人は…

@cappeeです。

Dreamweaverのスニペットって便利ですよね。私はzen-cording+スニペットのショートカットを使うのがコーディングは一番早いと思っています。

そこでDreamweaverのスニペットに登録してあるCSS3の記述をまとめました。1.2倍は間違いなく早くなると思います。

角丸

 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 -o-border-radius: 3px;
 -ms-border-radius: 3px;
 border-radius: 3px;

グラデーション

background: -webkit-linear-gradient(top, #FFF, #CCC);
background: -moz-linear-gradient(top, #FFF, #CCC);
background: -o-linear-gradient(top, #FFF, #CCC);
background: -ms-linear-gradient(top, #FFF, #CCC);
background: linear-gradient(to bottom, #FFF, #CCC);
background: #CCC;

テキストのシャドウ

text-shadow: 0 1px 0 #FFF;

※text-shadowはベンダープレフィックスは必要ありません。

ボックスの黒シャドウ

 -moz-box-shadow: 1px 1px 5px #999;
 -webkit-box-shadow: 1px 1px 5px #999;
 -o-box-shadow: 1px 1px 5px #999;
 -ms-box-shadow: 1px 1px 5px #999;
 box-shadow: 1px 1px 5px #999;

ボックス内側の光彩(グロー)

 -webkit-box-shadow: inset 0 0 5px 0 #DDD;
 -moz-box-shadow: inset 0 0 5px 0 #DDD;
 -o-border-radius: inset 0 0 5px 0 #DDD;
 -ms-border-radius: inset 0 0 5px 0 #DDD;
 box-shadow: inset 0 0 5px 0 #DDD;

ボックス垂直にぼかしなしシャドウ

 -moz-box-shadow: 0 1px 0 #FFF;
 -webkit-box-shadow: 0 1px 0 #FFF;
 -o-box-shadow: 0 1px 0 #FFF;
 -ms-box-shadow: 0 1px 0 #FFF;
box-shadow: 0 1px 0 #FFF;

こちらも参考にご覧ください。

【CSS3】ドロップシャドウやグロー(光彩)をCSSで(box-shadow)
今から始めるCSS3プロパティ text-shadow

ベンダープレフィックスについて

今かなりのスピードで各ブラウザがバージョンアップをしている関係で、新旧幅広く対応させるならベンダープレフィックスはまだなくさない方がいいんじゃないかなという個人的見解です。ぜひ以前の記事もご覧ください。

最新FirefoxとOperaではCSS3のシャドウと角丸はプレフィックスいらないよ

Pocket
article clipper [Dreamweaver]スニペットに登録して作業効率が上がるCSS3まとめ

One thought on “[Dreamweaver]スニペットに登録して作業効率が上がるCSS3まとめ

  1. Pingback: [Dreamweaver]作業効率が劇的にアップ!!ショートカットとコードスニペット | ぶぶりんブログ

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>