CSS3D：ドットマリオ
See the Pen CSS only 3D dot Mario by KaBuKi (@kabuki) on CodePen. 3Dの箱が作れるわけだからドットになるなと思って試しました。 コード見れば分かりますがた…
CSS3D：DNA螺旋
See the Pen CSS only DNA Spiral by KaBuKi (@kabuki) on CodePen. CSS3Dで色々実験をしてますが、やはり実用性で考えるものじゃなくお飾りやエフェクト以上でも…
CSS3D：最小タグでの実験
See the Pen CSS 3D experiment by KaBuKi (@kabuki) on CodePen. See the Pen Eclipse by KaBuKi (@kabuki) on CodeP…
CSS3D：3Dギャラリー
See the Pen CSS only 3D Gallery by KaBuKi (@kabuki) on CodePen. JSを使わずCSSのみで3D回転するギャラリーを表現しています。 もちろんIEちゃんでは正常…
スッキリしたページネーションリンクを作る
See the Pen DLCep by KaBuKi (@kabuki) on CodePen. こちらのサンプル通り。 ページネーションリンクを作るたび枠線が重なる問題は前々からよくありましたが、そのたびほんの少し迷…
画像の「DataURI」をCompassで一発生成してHTTPリクエストを削減する
以前もDataURIについて書きましたが、Compassの関数一つで画像のDataURIを生成できると気づき、フロントデザイナーが扱う分にはこれが現状最適解に思えたのでメモします。 下記の記述だけで画像の参照パスだけ変え…
CompassでCSSスプライトを作るテンプレ
前提 フォルダ構成は下記を前提。 root ├css ├sass ├img │└icon │ ├画像.png │ ├画像.png │ ├… └config.rb config.rb 内の images_dir は img…
Sassコンパイラ「Prepross」とCSSフレームワーク「Gumby」で高速プロトタイピング
昨今注目度も高まっているSassを、最も簡単に使えるコンパイラ「Prepros」と、個人的に最近お気に入りのCSSフレームワーク「Gumby」を広めたくて書きます。 SassやCSSフレームワークとか、ちょっと二の足踏ん…
Sass,Less環境をすぐ構築できる「Koala」と、その問題
以前書いたSassの記事の通り、自分は Sass は使える環境にあったのですが、海外製の CSS フレームワークでは Less を使っているものも多く、 Less 環境も用意するかと探したところ見つけたのが、下記サイトで…
「Data URI」で画像のHTTPリクエストを削減
「Data URI」って何ぞやと思う人も多いと思いますが、説明するより見てもらった方が早いです。 下記の画像をご覧ください。 なんということないゴミ箱アイコンですが、クリックしたあとのURIをご覧ください。 アップされた…