UNORTHODOX WORKBOOK

2015.01.10 Sat

【jQuery】スクロールと連動して一瞬だけテキストを表示する

前回の続きになりますが、今回はjQueryを利用して、前回よりも少しだけリッチな感じにしたものをご紹介いたします。 タイトルの通り、スクロールと連動させ、スクロールにあわせて一瞬だけテキストを表示させる方法になります。 …

2015.01.08 Thu

CSSで一瞬だけテキストを表示する方法

2015年一発目のエントリーですが、特に何事もなく普通の記事を書きます。 このサイトでも利用していますが、ページ遷移時に一瞬だけ(暗くなって)文字が表示されるやつのやり方です。HTMLとCSSだけで実装してまして、JSは…

2014.11.24 Mon

CSSのみで画像を菱形に切り抜いて表示する方法

前回の記事に引き続き、菱形についての話題。好きです菱形!! 今回は、CSSのみで画像を菱形に切り抜く方法です。そんなに難しいことではないんですが、ちょっと躓いたところがあったので、ポイントとかも含めてブログに残しておきた…

2014.11.19 Wed

CSSのみで菱形を作る方法まとめ

菱形を大量に使ったサイトを制作しているんですが、画像を使わずにCSSのみで菱形を作る方法はいくつかあって、それぞれに向き不向きみたいな特徴があるので、作り方も含めて自分用にまとめてみました。 ちなみに「菱形を大量に使った…

2014.10.16 Thu

マウスオーバーで波紋を広げる

波紋が広がりそうなタイトルですが、CSSの話で、事が起こるほうの波紋ではありません。 Dribbbleをぼーっと眺めていたら、きれいに波紋が広がるアニメーションがあって、CSSでできそうだったのでやってみました。 デモで…

2014.10.10 Fri

CSSのみで背景を全体的に斜めにして傾斜をつける方法

最近よく見かけるやつなんですけど、ちょうど今作っているサイトで使ってみたくて、色々やってみた結果なかなか良かったのでブログに残しておきます。 斜めのストライプとかじゃなくて、ブロックごと全体的に斜めにして背景を傾かせる方…

2014.10.01 Wed

インラインSVGで、alt属性のような画像の代わりになるテキストを指定する方法

最近よくSVGを使っている。何かと便利なので、IE8を考慮しなくてもよい時は、写真以外の画像は全てSVGにしてしまっている。IE8さえなければもっと大胆に使えるのに…。滅びろIE8…。(IE6,7はもう既に完全に何も考え…

2014.08.30 Sat

新しく追加された小カテゴリーの独自タグでカテゴリーを自動表示する【カラーミーショップ】

カラーミーショップには、小カテゴリーを自動でリスト表示させるような仕組みは用意されていませんでした。カテゴリーを取得する独自タグはありましたが、取得できるのは大カテゴリーのみで、小カテゴリーを表示したい場合には、手動で追…