[CSS] CodePenでメニューやボタンなどのデザインサンプルコードが公開

DesignPatterns CodePen

CodePenに、デザインパターンのサンプルページが新しく創設され、グラフ・タブ・ボタン・ドロップダウンメニュー・ログインフォーム・ページナビ・テーブル・マップなど、大量のデザインサンプルが取得できるようになっています。

これはかなり有用だと思いますので、是非ブックマークに登録しておきたいところ。

[CSS] フレキシブルなボックスレイアウトを自由に生成できる「Fibonacci」

「Fibonacci」は、どんなに複雑なフレキシブルボックスレイアウトでも、簡単に生成してコードを利用できるという便利なサービスです。

まず、自分でフレックスボックスレイアウトを作成。
すると自動的にCSS / HTMLコードが生成されるので、それをコピペすればレイアウトのベースとして使う事が出来ます。

複数のオブジェクトを重なるように表示するCSS3の「mix-blend-mode」を使ったロゴの作成方法が解説されています。

ソースはあまり綺麗ではありませんが、spanで1文字ずつ囲ってそれぞれをずらして配置。spanにmix-blend-mode: multiply;の属性を指定するだけと簡単。

リンク先からソースがダウンロードできるので、それを参考にして、文字を替えるだけですぐに利用することができます。

ボタンやアイコンをクリックすると、ぼわーーんと気持ちの良いエフェクトが出せる「Waves」。導入も簡単なので、ブログやWebのちょっとした味付けにいいかもしれません。

サポートしているブラウザは、Firefox, Chrome, Safari, IE10以降。

CodyHouseでは、実用性が高めなjs/css/htmlライブラリを色々配布しています。

例えば、ページの先頭に戻るBack to top、スクロールで複数の壁紙を切り替えるAlternate Fixed & Scroll Backgrounds、GoogleマップのデザインをおしゃれにするCustom Google Map、比較やカタログなどで使えそうなレスポンシブテーブルのCross reference table等々。

導入方法も丁寧に解説されているのでオススメです。