概要
ちょっとCSSのmix-blend-modeを用いた表現をいろいろ考えてみる。
mix-blend-modeを使用するとPhotoshopで言うところの描画モードのような表現を行うことができる。
これは夢が広がる。。。
試し
ローディングとかで使えそうな表現
See the Pen mix-blend-mode by Yuji Arai (@arahell) on CodePen.
ちょっと色がどきついけどRGBそれぞれの円を用意して少し中心座標をずらして回転させることで様々な重なり方をして色の変化が起きる。
写真などに重ねてアニメーションさせる
See the Pen mix-blend-mode by Yuji Arai (@arahell) on CodePen.
アニメーションさせることによっておもしろい表現ができそう。
経緯
任意の欧文フォントを使用したくて @font-face を用いてオリジナルの font-family で使用するようにしていたのだが、なぜだが欧文フォントの間隔が mobile safari でみると空いてしまう問題がおきた。
原因
どうやら mobile safari のレンダリングのバグなのか、 web font に対して font-weight: bold; が適用されているとそういった表示になってしまうらしい。
任意の欧文フォントを使用する style に関しては font-weight: normal; を適用することで無事解決した。
Fatal error: Uncaught Error: Call to a member function id() on array in /home/arahell/www/hoihoi/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php:36
Stack trace:
#0 /home/arahell/www/hoihoi/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php(538): CrayonFormatter::format_code('', Array, Object(CrayonHighlighter))
#1 [internal function]: CrayonFormatter::delim_to_internal(Array)
#2 /home/arahell/www/hoihoi/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php(516): preg_replace_callback('#()#msi', 'CrayonFormatter...', 'function sortLa...')
#3 /home/arahell/www/hoihoi/wp-content/plugins/crayon-syntax-highlighter/crayon_highlighter.class.php(166): CrayonFormatter::format_mixed_code('function sortLa...', Object(CrayonLang), Object(CrayonHighlighter))
#4 /home/arahell/www/hoihoi/wp-content/plugins/crayon-syntax-highlighter/crayon_highlighter.class.php(186): CrayonHighlighter->process()
#5 /home/arahell/www/hoihoi/wp-content/plugins/crayon-syntax-highlighter/crayon_w in /home/arahell/www/hoihoi/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 36
hoihoi