廣瀬 一海 日本マイクロソフト株式会社 Azureビジネス本部 クラウドネイティブ&デベロッパーマーケティング本部 Azure Senior Product Marketing Manager
HSL使ってますか?まだ使ったことがないという人は、このページでHSLを体験してください。マウスホイールを回すだけで色を作成できます。RGBでは手間がかかった色の作成もHSLなら簡単にできます。HSLは、イメージした色を簡単に作成したいと思っている人に強くおすすめします。 CSSでの色の指定方法 一覧 HSLをやる前に、HSLを含めて色を指定する方法をざっとおさらいしておきます。 下に私が知っている色を指定する方法を書いてみました。形式はちがいますが、すべて同じ色を指定しています(厳密に言うと値を変換するときに少数点以下を丸めるなどしているためまったく同じと言う訳ではありませんが、モニタでは同じに見えると思います)。 color: #778899; /* ① #RRGGBB 形式 カラーコード */ color: #789;
hsl()ではhue:色相、saturation:彩度、lightness:輝度の3要素で色を指定します。 RGBより直感的な色指定方法としてCSS3で追加されました。 キーとなるhueさえ最初に決めておけば、あとは彩度と輝度の割合を変えるだけでそれなりにまとまったサイト配色になります。 モックや社内用管理画面をゴリゴリ作る際に覚えておくとべんり! 指定方法 hue:色相 0~360°の角度の値で指定。 角度のため、例えば400と指定すると40に変換されます。 0=360=red saturation:彩度 0~100%の割合で指定。 100%=純色、0%=灰色 lightness:輝度 0~100%の割合で指定。 100%=白、50%=純色、0%=黒 (明度とは異なるので注意。明度は100%=純色、0%=黒。) 例)hue=0 の場合の変化 See the Pen hsl() による色の
Building a Magical 3D ButtonBet you can't click just once! IntroductionI had a neat realization recently: Buttons are the “killer feature” of the web. Every significant thing we do online, from ordering food to scheduling an appointment to playing a video, involves pressing a button. Buttons (and the forms they submit) make the web dynamic and interactive and powerful. But so many of those buttons
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く