BourbonというSass mixinのライブラリがありますが、Bourbonを利用したUIデザインのパターン集がRefillsとして公式に公開されています。 どんなの？ こんな感じのよくあるナビゲーションや、 よくあるアプリの紹介ページみたいなパターンも用意されています。 それぞれのパターンには一緒にソースコードがついているので、コピペするだけで使えるという寸法です。 いずれもBourbonと一緒に使う必要はありますが、本当によくあるデザインなので、マークアップの参考にも使えそうです。 Bourbon – Refills

CSS3 アニメーションを使ったWebサイトが増えてきました。サイトにちょっとしたアニメーションを付けるだけで、目を引くWebサイトになります。 今回は、SassとBourbonを使ってCSS3 アニメーションを作りたいと思います。 SassとBourbonを使うと、簡単にCSS3のアニメーションを作ることができるんです！ CSSのみでアニメーションを実装 例えば、opacityを0から1にするアニメーションを1秒で実行するアニメーションを作りたいと思います。 Sassを使わず、CSSのアニメーションを記述する場合は下記の通りです。 .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-

Clippyはclip-pathプロパティで使うコードを手軽に作成出来るツールです。用意されたサンプル画像に重ねて確認しながら作成するだけでコードを出してくれます。手軽で良いのでは。尚、画像をアップロードして～と言った類のものではなく、シンプルにclip-pathのコードを作成するだけのツールになります。 Clippy

CSS3を使い始めていくと、ぶつかる壁に「三角形みたいに尖った角」をどう表現するかというのがあります。三角形って思ったより難しいです。 まぁ無理しないで、イメージで作ればいいんですけど、ちょっとした装飾だったりすると、ちょこっとCSSで作れると楽な時もあります。 そこで、CSS3で「三角形みたいに鋭角を作る方法」を３つ紹介します。ここで紹介する方法には、メリットとデメリットがありますので、使い分けれるようになるといいと思います。 1. グラデーションを使う こちらの記事でも紹介しましたが、背景を background-size と background-position で4分割して、斜めのグラデーションを使うことで角を落とすことができます。 コード 4分割して、4つのグラデーションでそれぞれを塗ります。この方法では、塗りを使っているので、カスタマイズ性が高いですが、グラデーションを使って

作成：2013/11/25 更新：2014/10/24 Webデザイン > 先週WordPressの自作テーマを作っていたときに、もっとCSSで効率化できないものかと、色々調べてたら結構使ってないものがありました。出来るだけ短縮できるところは短縮したいので、今回はCSSの中でもサイトを作る上で「知っておくと効率的」なものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 知っておきたいプロパティ １．カウント数を出力 ２．要素の前後に文字や画像 ３．カーニング ４．画像フィルタ ５．均等幅にレイアウト ６．アニメーション一覧 スマホサイト対策 ７．viewport ８．改行削除 ９．Webクリップアイコン １０．UIリセット／入力フィールド拡張 １１．横並び １２．ボタンサンプル １３．画像を使わない矢印 １４．自動改行 １５．はみ出しを隠す １