Giving you the divine power of using golden ratio sized columns with BootstrapGolden Bootstrap is a bunch of less written css rules giving you the divine power of using golden ratio sized columns with Bootstrap. Getting started Include golden-bootstrap.less in bootstrap.less, compile and that's it. // Grid system and page structure ... @import "golden-bootstrap/golden-bootstrap.less"; // Add suppo
Fuel UX extends Bootstrap with additional lightweight JavaScript controls for your web applications. Get Fuel UX View examples Ignite your Bootstrap project today. Include Fuel UX controls in your next web project knowing it's solidly optimized and easy to upgrade. Use a little or use a lot. Deploy only the controls you want with minimal, name-spaced, responsive styling designed to easily fit into
Pie charts in your favicon! A tiny javascript library for dynamically generating progress pie charts in your favicons. Look up at your tabs for the live demo! Documentation Basic usage Piecon.setProgress(12); Piecon.setProgress(25); ... Piecon.reset(); Options Piecon.setOptions({ color: '#ff0084', // Pie chart color background: '#bbb', // Empty pie chart color shadow: '#fff', // Outer ring color f
ワイヤーフレームを楽しく作ろう! 魅力的なユーザーエクスペリエンスをユーザーに届けるために、ワイヤーフレームはとても重要です。 何より自分自身が楽しんで作らないと、良いアイデアは生まれないものですよね。 ということで「楽しく作れる!」という観点から、おすすめのスマホアプリ/サイトのワイヤーフレームの作成を支援するツールをまとめてみました!もちろんすべて無料で始められます! では早速どうぞ〜! Fluid UI http://www.fluidui.com/ プレビュー機能で画面遷移も作れる UIパーツが本物にかなり近い形で表現されています(むしろそのまま?)。UIパーツはWireframe、iPhone、iPad、Android、Android 4.0、Android Tablet、Windows Phoneの中から自由に選べます。かなり豊富です。またオリジナル画像をアップロードして使うこ
HTMLコード </p> <div id="sampleCalendar"> <div id="sampleCalenderTitle">8月</div> <table id="sampleCalenderDates"> <tbody> <tr> <td><a href="#">1</a></td> <td><a href="#">2</a></td> <td><a href="#">3</a></td> <td><a href="#">4</a></td> <td><a href="#">5</a></td> <td><a href="#">6</a></td> <td><a href="#">7</a></td> </tr> <tr> <td><a href="#">8</a></td> <td><a href="#">9</a></td> <td><a href="#">10</a>
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
TypeTalks(タイポグラフィセミナー)の「HelveticaやDINだけじゃない!フォント鑑定人がおすすめする最新欧文フォント事情」に参加してきました。 嘉瑞工房の高岡昌生さんがモデレーターで、MyFonts.comのWTF forumでコントリビューターをされている@akira1975さん、有名なフォントサイト(PETITBOYS)を運営されているヤマダコウスケさんのお二人のほか、ドイツ、linotype社タイプディレクターの小林 章さんがskypeで参加されるという、フォント好きには嬉しい面々が講演者でした。 この日の内容は「Helvetica」や「DIN」のオルタナティブになりうる欧文書体とそれら書体の制作と販売を行うFont Foundryの紹介。 トークショー冒頭に講演者の方からの質問がありましたが、デザイナーが普段メインで使用する書体は大体5~10書体程度、それも同じもの
情報デザインにおける大切な要素のひとつとして、「Data Visialization」があります。これは、数々の情報をビジュアルで表現することで内容を誰にでも分かりやすく見せる方法で、別名「インフォグラフィック」と呼ばれます。インフォグラッフィックは言語や文化を超えた共通用語として幅広くデザインに用いられています。そこで今回はインフォグラフィックに着目し、数多く紹介しているサイトをご紹介します。 Visually Inc. 海外のインフォグラフィックを紹介しているサイトです。 魅力的なインフォグラフイックが数々揃っているところがポイントです。数時間置きに更新されているので、常に目が離せません。 Transparency|GOOD 海外のインフォグラフィックを紹介しているサイトです。こちらもセンスのあるインフォグラフィックが多数揃っていて、見る人を飽きさせません。個人的に好きなサイトです。
僕はWebデザインをするときPhotoshopを使う人なんですが、Photoshopのスライスはあまり便利ではありません。 そこで最近このプラグイン「Cut&Slice me」を実験的に使っています。 今後長期的に使えるかはわかりませんが、1ヶ月ほど使ってみて便利だなと思ったのでサンプル作成と合わせて紹介します。 このプラグインの利用にはPhotoshop CS6が必要です。 Cut&Slice meプラグインでできること Cut&Slice meはPhotoshopのスライスを使わずに、レイヤー名に処理用の宣言を行いそれにそって自動書き出しが行われます。 Photoshopのスライスを使わず一括書き出し レイヤー名に宣言をつけることで書き出しを制御 レイヤー名を画像の名前にできる 他のレイヤーに影響されずに書き出せる 切り出し領域をシェイプで制御 ボタンの状態ごとに書き出し PC、And
無料で使えるタイトルロゴジェネレーター(ジェネレータ)まとめ ネット上で簡単にロゴを作成できるサイトをご紹介します。ここで紹介しているものは全て無料ツールで会員登録などが不要で使えるものなので、お気軽にお試しください。 ロゴジェネレーターは著作権の関係で公開が停止することもよくあります。その点ご了承いただければと思います。 あの企業・サイトのようなロゴを作成! amazonっぽいロゴを作る amazon logo maker amazonのロゴはaからzに向けて矢印が描かれています。これはaからzまで何でも揃うという意味を込めているそうです。(笑った口に見えるという意見も多いですが…) (作り方) ボックスの中にロゴにしたい単語を入力する。※アルファベットのみ。日本語は入力できません。 ↓ 「make」ボタンを押す。 ↓ ※画像をそのまま右クリックで保存はできないので、画面キャプチャーで保
matrix3d (a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) ではサンプルコードを交えながら順に見てくとします。 matrix3dですが、こちらもmatrix 2Dと同様、複雑な理屈で取っ付きにくいうえに、rotateや3dやperspectiveといった関数で充分に代替可能なため、今回の記事では割愛させて頂きます。 m(_ _)m Transforms 3D - 事始め 端的に言うならば、Transform 3D は要素を3次元に移動ならびに回転、拡大縮小できるというものです。更に後述するperspectiveを使うことで、要素に奥行きのある表現を持たせることが可能となります。 3DではX軸とY軸に加えて、Z軸が追加されます。Z軸はウィンドウからユーザーに向かう方向が正の値で、ユーザーからウィンドウに向
そんな訳で、写真共有SNSの一つであるPathにある、あのサークルメニューを再現してみたので、ここにその手順をまとめておくとします。 Pathはネイティブアプリなので、JavaないしObjective-Cにて実装されていますが、こちとらはそんなハイソなテクニックは使わずに、JavaScriptとCSS3だけで行けるところまで行ってみます。 はじめに とりあえずサークルメニューの要件を大まかに書きだしてみました。 トグルボタンをクリックしてメニューアイテムの表示/非表示を切り替えたい 各メニューは円周上に均等に配置された状態で表示させたい 表示/非表示はアニメーションで切り替わるようにしたい メニュー数の増減には柔軟に対応できるようにしたい その他、各メニューの間隔や角度、表示時の距離などはオプショで指定できるようにしたい ひとまずこんなもんで良いでしょう。次にこれらの要件をどのように実装す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く