scss-corner-ribbon

Posted on

角にリボンみたいなものをかける装飾。めったにやらないけどやるときはちまちま調整していたところを簡単にで良い感じにできるようになればいいな。と思ったので Sass (scss) mixin を作ってみた。

たとえばベース色を渡すだけで次のようなことをやるようにした。

  • ベース色の明るさにあわせてテキスト色を変える (黒か白)
  • ベース色にとテキスト色にあわせたテキストシャドウ
  • ベース色を基本にしたグラデーション処理
  • 幅の計算とちょうどよい場所への配置
  • 折り返し (はみ出す) 部分の計算と処理
  • 折り返し部分の色の調整

ベース色のほかに、幅と折り返し部分の幅は引数として渡せるようにした。幅はテキストの長さにあわせて調整するイメージ。高さは mixin の中で変数にしてある。

この mixin の中で使っている mixin はわりと一般的なものだと思うので、すでに使っているものがあれば置き換えて使うのもかんたんだと思う。

もうちょっとなんとかしたい。