css

IEとEdgeでCSSアニメーションにcalc()を使用すると動かないバグ

CSSアニメーションにcalc()を使用していたが、IE・Edgeで動かなかったので、備忘録として残しておきます。 calc()とは calcとは、css内で四則計算(足し算や引き算など)を行うことができる関数です。 対応状況 Opera Mini以外のモダンブラウザで対応しています。 calc()の主要なバグ 先ほど、Opera Mini以外のモダンブラウザに対応しているといいましたが、一部のブ […]

CSSだけで画像をトリミングする

  • 2018.04.23

position: absolute; 要素からはみ出した部分を非表示にする方法 DEMO See the Pen mLVJzL by mizusawa (@webty_mizusawa) on CodePen. サンプルコード [crayon-5b06545e53763273803739/] [crayon-5b06545e53769764182430/] object-fit: cover; […]

CSSで文字の柄を一定間隔で変えていく方法

  • 2018.04.09

CSSで文字の柄を一定間隔で変えていく方法の紹介です。 ファーストビューに表示するサイトタイトルなどをこのように装飾してあげるとスタイリッシュな感じのサイトになるといいと思います。 デモ See the Pen XExZRE by mizusawa (@webty_mizusawa) on CodePen. サンプルコード [crayon-5b06545e53b12580630673/] [cra […]

CSSだけで画像に奥行きのある影を追加する方法

  • 2018.04.02

CSSで写真やイラストに影をつけて奥行きを表現する方法です。アニメやゲームなどのキャラクターの立ち絵などに使用するとキャラクターがより際立って見えると思います。 デモ 元画像 影付き画像 サンプルコード 影は filter: brightness(0%); を使って画像を真っ黒にすることで再現しています。 [crayon-5b06545e53e00909584747/] [crayon-5b065 […]