UNORTHODOX WORKBOOK

2015.02.01 Sun

[CSS] transform:perspectiveを使用した、パタッと開いて閉じるサイドメニュー

このサイトでも使用している(2015年1月現在)パタッと開いてパタッと現れるサイドメニューを実装する際に、CSSの transform:perspective を使用したんですが、少しはまった点があったので、復習を兼ねて…

2015.01.10 Sat

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

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

2015.01.08 Thu

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

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

2014.12.10 Wed

【jQuery】プラグインを使わずに、簡単にサイドからスライドして現れるメニューを実装する(ほぼCSS)

最近はモーダルっぽい感じでメニューをページ全体に表示するパターンが増えてる気がするし、もう随分色々な方法やプラグインがあって、かなり今さらなネタですけど、クリックでサイドからスライドして現れるメニューの新たな知見を得たの…

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.08.30 Sat

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

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