第1回 text-shadow実践テクニック | gihyo.jp
CSS3はブラウザの進化とともに昨今では様々なブログや技術系のメディアなどで取り上げられるようになってきました。 今回は、CSS3なのですがCSS2.1でもあったtext-shadowプロパティについてフォーカスします。 すでにプロパティの名前から何ができるかは予想がつきます。ただ、"そろそろ何ができるか"ではなく、"どのように使うか"という実践の部分に注目して紹介していきます。 text-shadowプロパティの記述方法 まずは、基本のtext-shadowプロパティの記述方法ですが、以下の形式で値を指定します。 セレクタ { text-shadow： ぼかし色 X方向への距離 Y方向への距離 ぼかしの距離 } ぼかし色 ぼかし色はRGB、色名にて指定が可能。#000はRGBの黒だが、blackでも指定することが可能。ぼかしの色は、text-shadowプロパティの値として一番最初に記述
複雑をシンプルにしても駄目な場合
「シンプルがベスト」という言葉はデザイナーでなくてもよく使う言葉です。しかし、すべてをシンプルにしてしまえば良いというわけではありません。シンプルの反意語で「複雑」という言葉があります。しかし、英語の「Simple」の反意語には「Complicate」と「Complex」という２つの言葉があります。いずれの単語も日本語にしてしまうと「複雑」になってしまいますが、使い方が違います。そして、「Complicate」をシンプルにするのと、「Complex」をシンプルにするのは意味が異なります。 「Complicate」は込み入ったものや困難という意味がありますが、「Complex」は幾つかの部品からなる複合体、入り組んだという意味が含まれています。共に複雑に構成されている可能性がありますが、必要なもので作られた複合体（Complex）だとしたら、シンプルにするのは難しいです。つまり、「Compl
注目を集めるためのCSS3を使った光るボタンサンプル実装例:phpspot開発日誌
注目を集めるためのCSS3を使った光るボタンサンプル実装例が公開されています。 Safari4や Firefox3.5、ChromeでみるとCSS3の機能を使ってボタンが光ります。少しだけ次世代ですがこんなことができるんだなと覚えておいてもよいかも。 アニメーションで輝くボタンはまるでイルミネーションのようです。 @-webkit-keyframes を使うことでこんなことができるんですね。 Firefox3でみると次のように光りはしませんが、それなりにきれいなボタンで表示されます。 デモは以下のエントリを参照してください。 Radioactive Buttons with CSS Animations and RGBa - ZURB Playground - ZURB.com 作成のチュートリアルは以下を参照してください Pushing Your Buttons With Practic
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
