Sprite Cow - Generate CSS for sprite sheets
What? Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css. Load the example image, and have a click around. It becomes pretty obvious. Why? Automated spritesheet generators are pretty cool, but I prefer the control over optimisation and compression you get by making them manually. However, copying all the positions & size
madebyphill.co.uk
madebyphill.co.uk The domain is marked as inactive. For more information, please contact your hosting provider. Ce domaine est marque comme inactif. Pour plus d’informations, vous contactez votre hosting provider. Diese Domain wird als inaktiv markiert. Für weitere Informationen kontaktieren Sie bitte Ihren Hosting Provider. Dit domein is als inactief gemarkeerd. Voor meer informatie, neem contact
Mac OS X 10.7 Lion Buttons with CSS3
Download the file via File menu. Works in all modern browsers (only Webkit, no “flashing” in Mozilla). Made by Thomas Maier, he works at Special Machine. View it here on Dribbble and like it if you have an account. Update: The clicked state is darker now. 03/21/11 Update: Mozilla is better supported now. 03/22/11
要素をスクロールに追従させる jQuery プラグイン
Apple Store のサイドバーのように、要素をウィンドウのスクロールに追従させる jQuery プラグイン、jQuery Floating Widget を作りました。説明が難しいので、まずはデモをご覧ください! jQuery Floating Widget plugin demo このアイデア自体は新しいものではなくて、たとえば以下の記事で詳しく紹介されています: Fixed Floating Elements | jQuery for Designers - Tutorials and screencasts この方法で基本的にうまくいくんですが、フッターの高さがある程度あると、下までスクロールしたときに該当要素がフッター領域に食い込んでしまう場合があります。そこで、上記記事での実装を参考に、要素の「動ける範囲」を制限するための処理などを加えたものを考えてみました。 例として、フ
Web Hosting, Reseller Hosting, Cloud Hosting & VPS Servers - Eleven2.com
Instantly setup your website, email, and start today! We are running a special on WordPress hosting solutions. We know WordPress, all our staff are WordPress experts. If you want to start an online store, a blog, or anything else, Eleven2 is the right place to be. What are you waiting for, Start now!
HTMLで文字詰めするタイポグラフィー用JS | fladdict
HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。 スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。 実行はとても簡単。jQueryと一緒にhtmlにロードして、 FLAutoKerning.process($(‘h1′)); FLAutoKerning.process($(‘h2′)); FLAutoKerning.process($(‘h3′)); といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義する
横スクロールのサイトデザイン
横スクロールで閲覧するサイトを作りたくなったので、iine!をそうしてみた。ブラウザが横幅8000px以上ならスクロールせずに見ることができる。Ch9とFx3.6、Sf5、Op11、IE8で確認した限りでは特に問題なさそう。手探りでHTMLとCSSを組んだのでdivがものすごく多い。 コンテンツを縦方向にセンタリング 横スクロールさせる場合、縦方向のセンタリングしておくとおさまりが良い。また視線移動もある程度抑えられると思うので、上に寄っているよりは読みやすくなりそう。CSSによる実装にはいくつか方法があるが、一番明快なdisplay: table;とdisplay: table-cell;を利用したテクニックを使った。 html { height: 100%; display: table; } body { height: 100%; display: table-cell; vert
PHP で著作権表示の年を自動更新
PHP を使ってサイトの 著作権表示 (コピーライト) の年を自動で更新したいとき、よく用いられるのが以下のようなコードです: © 2001–<?php echo date('Y'); ?> Example.com このコードが埋め込まれたページを 2010 年に見た場合、© 2001–2010 Example.com と出力されます。 これは 2001 年に公開されたサイトの例ですが、ではこれから新しく公開するサイトの場合はどうでしょうか。上記の書式をそのまま当てはめると、たとえば 2010 年に公開されたサイトを同じ年に見た場合、出力結果は © 2010–2010 というおかしなことになってしまいます。 そこで、2010 年の間は © 2010 と表示されて、2011 年になったところで © 2010–2011 と更新されるようにしてみます: © <?php $th
百景
百景 という、テレビ・舞台の美術やマンションギャラリーなどの企画・設計・制作を手がけるデザイン会社の Web サイト作りをお手伝いしました。私がひとりでデザインから実装まですべて手がけたのは、自分の個人サイト以外でははじめてです。 クライアントは設立して 1 年、従業員 5 名の会社で、今まで Web サイトを持っていませんでした。そのため、私が今までの仕事でおもに担当してきたフロントエンド部分だけでなく、クライアントとの打ち合わせをはじめ、ドメインやサーバの手配、情報設計、ライティングなど、Web サイト作りの過程をひととおり経験することができました。 Web デザインの現場では、まずヴィジュアル・デザインのモックアップ (カンプ) を Photoshop や Fireworks で作り、それをクライアントに見せてゴーサインをもらい、そしてフロントエンドの実装に入る、という流れが一般的で
プログラマのためのUXチートシート — ありえるえりあ
はじめに http://msdn.microsoft.com/ja-jp/library/aa511258.aspx の 「Windows ユーザー エクスペリエンス ガイドライン」 「ガイドライン」 主に「コントロール」 の抜粋です。 以下の基準で抜粋しました Web UIに応用可能 実用的かつ具体的 自明ではない プライマリUIを目立たせる プライマリ UI 要素を強調するには、以下に従います。 - プライマリ UI 要素は、視線の通り道に配置します。 - タスクを開始する UI 要素は、左上隅または中央上に配置します。 - コミット ボタンは、右下隅に配置します。 - 残りのプライマリ UI は、中央に配置します。 - コマンド ボタン、コマンド リンク、アイコンなど、注意を引き付けるコントロールを使用します。 - 大きなテキストや太字のテキストなどの目立つテキストを使用します。 ユ
スタッフ紹介ページをうまく活用している企業サイト
2017年6月29日 Webデザイン みなさんが今働いている会社に就職する前、その会社のどのページを参考にしましたか？多くの方が企業紹介のページを参考にしたはずです。その中でも実際に働いている人の紹介ページもあったら、その会社についてもっとイメージが湧きますよね。今回はそんなスタッフ紹介ページに注目してみようと思います！ ↑私が10年以上利用している会計ソフト！ スタッフ紹介ページの必要性 企業サイトが一番伝えたいのは「この会社はどんな事をしているのか」という点だと思います。そのためほとんどの企業サイトに「この会社について」などの企業紹介ページを設置しています。しかし企業の経歴や代表者の挨拶だけで、本当にその会社の説明ができるでしょうか？ 最近デザイン系のWebサイトをはじめ、企業サイトでもスタッフの紹介を掲載するページが増えてきました。どんな人がこの会社をつくっているのか？どのように製品
ところでiPadアプリってどうやって作るの？てなったときに読む記事
こんにちわ。4-ROOMSが終了なんてショック過ぎ！やしこです。 最近iPadのデザインに関わる機会がありまして、情報がまだまだ少なかったのでまとめてみました これからiPadのデザインをする方のお役に立てばうれしいです 今回はTwitterクライアントやリーダーで主流な２カラム型のアプリデザインです ePub（電子書籍）の作り方は先月のMDNで特集されていました iPadにしか見られない（WEBにない）仕様 縦横で画面構成が変わる iPadはiPhoneと同じく持ち方によって画面レイアウトが変形します。 縦横２パターンデザインする必要があります 意外とデザインをモニタの中だけで詰めていくと忘れる動きなので はじめにワイヤーに盛り込まれているか確認した方が良いと思います。 PopOver 項目の詳細を見たいときは画面遷移ではなくてPopOverとよばれる吹き出しのようなものがオーバーレイし
HTML5 & CSS3 only Accordion Effect – aduca
今日は右京くんに頼まれたのでアコーディオンエフェクトをHTML5とCSS3で実装する。 基本的なDOM構造はこんなもの、 - body `- section#accordion |- section | |- h2 | `- p |- section | `- ... |- section | `- ... `- section `- ... んでこれらにエフェクトを与えるのだけれど、その前にとりあえず現物のサンプル。 CSS Accordion CSSなどのコードもすべてこのHTML一枚にかいてあります。(Firefoxでも動くみたいだけどWebkit系ブラウザが一番綺麗にアニメーションします) hoverの関係 最下層のsection上にポインタがある場合、その親要素にも:hoverが付く。 これを利用しないと、単純に:not(:hover)してしまうと、普通の状態(ポインタが一切ない
IPhone "slide To Unlock" Text In WebKit/CSS3 | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! There are a couple of WebKit specific properties that make giving text a gradient background possible: -webkit-background-clip: text; -webkit-text-fill-color: transparent; Those will allow the background of the parent element to become the background of the text inside. I gots to thinkin’, i
e2wmについて考えたこと（調査や要件定義など） - 技術日記＠kiwanami
ツールを作るのも好き。昔からツールを作って満足して、そもそもの目的が達成できないタイプ。 はじめに この記事では、e2wm.elがなんでこんなUIになっているかを説明します。UIにはストーリーが重要だと思っていて、e2wm.elについて考えたことをまとめたいと思います。また、e2wm.elやこの記事をきっかけに、Emacsに限らず、今後のIDEの開発の貢献に役立てるといいなと思っています。 あんまりうまく使い分けできていませんが、名称について。 e2wm 仕組みや仕様を指すとき e2wm.el 今回の実装を指すとき あらすじ 画面が広くなって、なぜかEmacsが使いにくくなった そこで他のIDE、アプリなどのUIを調査してみた プログラマ（自分）の業務分析して要件を考えた 最初の実装のゴールを定義した 図の一覧@Cacoo (2010/07/03追記) Emacsと画面のサイズの変化 きっ
iPhone向けWebサイトを作るのに最適なテンプレート&JavaScript·moobile MOONGIFT
moobileはHTML/JavaScript製のフリーウェア（ソースコードは公開されている）。iPhone/Androidを中心とするスマートフォンのシェア拡大は留まることを知らない。モバイルネットワークが発展している限り、この流れは止まることはないだろう。Webサイトを提供する上でもスマートフォンは欠かせない存在になる。 ボタンバー ネイティブアプリを提供する手もあるが、もっと容易なのが最適化されたWebサイトを提供することだ。そもそもネイティブアプリを提供するほどのニーズがないサービスもあるはずだ。そこで使えるのがmoobileになる。 moobileはiPhoneやAndroidといったWebKitベースに対応したWebサイトフレームワークだ。HTML5で作成されているのが特徴だ。フォームやボタン、ボタンバーなどのUIをテンプレート化している。これを使えば最適化されたWebサイトが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Miyamoto: Wii & Wii U Are White To Appeal To All Ages
withComputer
Iine!
HTML+CSS templating