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

目次 6回に渡る短期連載記事です。他の記事もこちらでご紹介しておきます。 【CSS】floatを使わずtable-cellを使って横並びにする方法 【CSS】table-cellを使って関連記事の表示で良く使うリストスタイルのデザインを作る方法 【CSS】table-cellを使って要素を均等に配置する方法 【CSS】table-cellで中央にロゴ・両脇にボタンというデザインを作る方法　←今回はこれ 【CSS】table-cellでサムネイル画像＋テキスト＋ボタンのデザインをキレイに見せる方法 【CSS】table-cellを使って関連記事をタイル状にレイアウトする方法 番外編ですが、table-cellを使う上で重要なテクニックを追記します。 幅固定＋幅可変の組み合わせ 中央にサイトのロゴ、左右にボタンというデザインを例に紹介していきます。 まず基本的な書き方はこちら。 <div cl

次のプロジェクトでちょっと使ってみたくなる実用的なものから実験的なものまで、CodePenで多くのユーザーをうならせたスタイルシートのテクニックを紹介します。 まずはアニメーションが楽しいデモから。 ※上から10個くらいはアニメーションgifです。

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リセット／入力フィールド拡張 １１．横並び １２．ボタンサンプル １３．画像を使わない矢印 １４．自動改行 １５．はみ出しを隠す １