[B! css][hsl] okyawaのブックマーク

okyawa id:okyawa

cssとhslに関するokyawaのブックマーク (3)

【CSS】HSLはこんなに便利！ – RGBからHSLへ
HSL使ってますか？まだ使ったことがないという人は、このページでHSLを体験してください。マウスホイールを回すだけで色を作成できます。RGBでは手間がかかった色の作成もHSLなら簡単にできます。HSLは、イメージした色を簡単に作成したいと思っている人に強くおすすめします。 CSSでの色の指定方法　一覧 HSLをやる前に、HSLを含めて色を指定する方法をざっとおさらいしておきます。下に私が知っている色を指定する方法を書いてみました。形式はちがいますが、すべて同じ色を指定しています（厳密に言うと値を変換するときに少数点以下を丸めるなどしているためまったく同じと言う訳ではありませんが、モニタでは同じに見えると思います）。 color: #778899; /* ① #RRGGBB 形式　カラーコード */ color: #789;
okyawa 2021/04/12
css

色指定

hsl

配色
リンク
配色を考えるのが面倒ならhsl()を使おう - Qiita
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 Pe
okyawa 2021/04/12
配色

color

css

hsl
リンク
Building a Magical 3D Button
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
okyawa 2021/04/12
css

button

hsl

animation

transition
リンク
1