UNORTHODOX WORKBOOK

2015.03.27 Fri

CSSで全画面の画像を真っ二つに切り開く方法

CSSだけで全画面の画像を真っ二つにぶった切る方法です。真っ二つにした上で、観音開きにしたり、スライドさせたりといったアニメーションを加えています。 アニメーションや画像の開閉についても、全てCSSだけでやっています。 …

2015.03.22 Sun

JSを使わずにアニメーションしながら展開するドロワーメニュー(スライドメニュー)の実装方法

Javascriptを使わずに、HTMLとCSSだけでアニメーションしながら展開するドロワーメニュー(スライドメニュー)を実装する方法です。 クリックでドロワーメニューを展開させる場合、jQuery等でちょっとしたプログ…

2015.03.16 Mon

CSSフィルターを使って流体を表現する(＋SVGフィルター)

滑らかに結合したような表現をCSSで実装する方法です。なんて言ったらいいか分からなくて、タイトルでは「流体」と表現していますが、要は「ぷよぷよ」みたいなやつですね。英語ではこういうのを「gooey」とか言ったりするみたい…

2015.03.12 Thu

[CSS] 1つのdiv要素だけでゲームボーイを再現してみた

暇だったので、CSSグラデーションの勉強がてら、1つのdiv要素にCSSだけでゲームボーイ本体を再現してみました。画像を使わずにほぼCSSだけでやっています(テキストの部分だけ画像を使用しました)。 CSSでゲームボーイ…

2015.03.08 Sun

CSSのclipプロパティを使ってテキストの一部を切り取って横へずらす

テキストにノイズがかかったようなアニメーションをCSSだけで実現したくて、とりあえずテキストの一部分だけを切り取って横へずらすことはできないかなと模索していまして、何かそれっぽい感じのことができたのでブログに残しておきま…

2015.03.07 Sat

CSSでボーダーの両端を徐々に透過させる

画像を使わずに、CSSだけでボーダー(線)の両端を徐々に透明にする方法は、CSSのグラデーションを使うことで簡単に表現することができます。 ありがちな表現ですけど、グラデーションの書き方でちょっと覚えておきたいこともあっ…