css

boostrapの印刷表示をリセットする

boostrapは、デザインをあまりしたくないときに活躍してくれますが… 使用して、何気に引っかかる罠があります。 それは、印刷時に独自のスタイルを当ててくることです。 印刷画面をいい感じに表示してくれるのであれば、全然問題ないのですが、 リンク先のURLを表示してきたり、背景をすべて白くしてきたりします。 背景の色は、まだ、見やすくやるときもあるので、許せる範囲ですが、 リンク先のURLをずらー […]

動きの参考サイト

どうも中野です。 今日は動きの参考サイトを紹介したいと思います。 このサイトのココが良い!ってよくあると思うのですが、そうではなく、一覧で見やすくまとめてくれているサイトを今回は紹介したいと思います。 1.Photoshopvip http://photoshopvip.net/88174 ブログをよく参考にさせてもらっているのですが、その記事の中に「ホバーエフェクト」の記事がとても見やすかったの […]

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-5b4e5b5b35151061599155/] [crayon-5b4e5b5b35156553308331/] object-fit: cover; […]

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

  • 2018.04.09

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

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

  • 2018.04.02

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