[Icon] icono – CSSだけで描画されたアイコン
CSSだけで描画されたアイコン。使い方はとっても簡単で、サイトからダウンロードできるicono.min.cssをサーバに置いてリンクするだけで導入終わり。あとはclass指定すればアイコンとして使う事ができます。個別の画像ファイルもなくCSSブチ込むだけで導入できるのが楽ですね。用意されているアイコンもシンプルなピクトグラムなので使い勝手が良さそうです。
Tag Archives: CSS
[Web Design] Brand Style Guide Examples – メジャーサイトのスタイルガイドまとめ
メジャーサイトのスタイルガイドをまとめたサイト。いわゆるレイアウトやスタイルの適用に関するデザイン規定ですね。誰でも見れるようになっているという事はオープンなものなんでしょう。例えばスターバックスのスタイルガイドを見てみると、グリッドシステムについて、ブロックの使い方、プロモ用ページのレイアウト例、見出しや本文、アイコン類の使用について、JSウィジェットの使い方などが詳細に解説されています。大手サイトがどのようにサイト全体を通してブランドイメージを統一しているのか、これを見ると色々分かるような気がします。紹介されているサイトの数はまだそれほど多くはないけど、Web制作者にとってなかなか興味深い資料と言えそうです。
[Icon] PaymentFont – 支払いに関するアイコンのWebフォント
支払いに関するアイコンをWebフォント化したもの。フリーで配布されており、SVGやTTF、CSSが一式入った形でダウンロードできます。空Spanタグ内にClass指定するだけで任意のアイコンを表示できるので、1度導入しさえすれば簡単に使えます。VisaやPaypal、Master Cardなどメジャーどこはひと通り揃ってるので、日本向けのサービス展開時にも使えそうです。Bitcoinなんかもあります。常用フレームワーク一式の中に加えておくと良さそうです。
[Web Design] 35+ Awesome Image Hover Effect With Pure CSS3 – Part 1 – ホバーエフェクトのクールな作例
CSS3を使ったマウスホバーエフェクトの作例をまとめた記事。アニメーションを使ったものや、キャプションの凝った見せ方などが多数紹介されています。ちなみにこの記事はPart1で、Part2はこちらにあります。サムネールのマウスホバーエフェクトのネタ調としてナイスなまとめ。
[CSS3] SpinKit – 画像を使わないCSSスピナー
画像を使わずにCSSだけで描画されるローディングスピナー。全部で8個用意されていて、左右のスクロール（十字キー使えます）で見る事ができます。各ページ内から「Source」ボタンを押す事でCSSコードが表示されるので、コピペするだけで使えます。ローディングアニメーションをサクっと導入したい時に使えそうです。アニメーションもクール。
[Javascript] Full Screen Vertical Scroller – CSS3とjQueryで動くフルスクリーンスクローラー
CSS3とjQueryを使って作る、フルスクリーンのスクローラー。ウィンドウをスクロールしようとすると、ブラウザウィンドウの縦幅単位でスクロールするアレです。最近じゃAppleなんかも製品ページとかでよく使ってますね。ページ右端には各ページへのダイレクトリンクも用意されており、各ページにはアンカーで飛べる仕組みになっているので、固定リンクも可能。ソースコードはGithubから一式ダウンロードできるようです。全画面背景画像とか、パララックススクロールあたりと組み合わせるのも良いですな。
[CSS] CSS clip-path maker – CSSを使ったクリッピングパスのジェネレーター
CSSを使って画像のクリッピングパスができるジェネレーター。画面左にある様々なシェイプで画像にマスクをかける事ができます。クリップした内容はページ下部にあるコードエリアにリアルタイムに反映されるので、思った通りのクリップパスが描けたらCSSコードをコピペするだけで使えます。ここで使われるプロパティは“clip-path”というもの。シェイプを選んだり修正したりすると、polygonの値が変化します。画像を使わずにコードだけでマスクを切る事ができるので便利ですね。ただ円形についてはグレーアウトしてて選べませんでした。polygonじゃ描けないからなのか、理由はよく分かりませんが、サークルシェイプって最近よく使われる印象なので、そこだけちょっとアレだしナニではあります。
[Design] Starter Kit – 開発を始める際に便利なスターターキットをまとめたサイト
WebやMobile Appなどの様々な開発を始める際に便利なスターターキットをまとめたサイト。紹介されてる内容がかなり幅広いんだけど、例えばiOSやAndroidなどのMobile Appの開発、Webのデザインに使えるHTMLやCSSの情報リソース、アイコンやイラストなどの画像素材、フォント、マーケティングリソース、SEO、ビデオ、UI / UX関連リソースなどがあります。サイト内の情報はタグ付けされて管理されているので、調べたい分野を絞る事ができます。ある程度知識があれば、いちから自分で作るよりもこうした素材やフレームワークを使った方が効率良く仕事できますしね。なかなかナイスなコンセプトのサイトだと思います。