Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Rapidly build modern websites without ever leaving your HTML.A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. <figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800"> <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg"
uiGradients
A handpicked collection of beautiful color gradients for designers and developers
Popular Screen Resolutions | Media Genesis » Media Genesis
Popular Screen Resolutions: Designing for All In today’s world, there are a plethora of devices for people to choose from and it can be daunting to try to accommodate and build for the best experiences on all devices. However, it’s important to stay up-to-date with the most popular screen sizes and resolutions when designing web and mobile sites. A site that is optimized and responsive makes for a
Foundation for Sites | The most advanced responsive front-end frameworks in the world.
Responsive design gets a whole lot faster A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable. We’re constantly adding new resources and code snippets, includi
Pure.css
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
現在のFacebookのUIがいかに話になってないレベルか - MIZの日記
http://d.hatena.ne.jp/shi3z/20101015/1287124685 のブコメでのid:shi3z さんとの会話に触発されて、Facebookとmixiのユーザーへの配慮の差を比較してみた。 技術寄りの人たちが根本的に誤解しているのが、「動きが速い」とか「豊富な機能」とかにとらわれて「迷わない」ことの重要さが吹っ飛んでいるということ。 とりあえず、一般人視点になりきってユーザーテスト。 あくまで「なりきり」だから、おそらくほんまもんの初心者が見たらこれの100倍は問題点が噴出するはず。 トップページ 文面 mixiの場合は上部の「mixiについて」できっちりSNSの概念を説明している。 Facebookのトップページは「できること」の具体的説明に乏しい。 トップページに登録フォームを置くことで使用開始までのステップを短くしたいのはわかるが、こういうものをユーザーへ
Yahoo! JAPANのトップページデザイン15年史
ニュースや天気やメールなど、なんだかんだでヤフーをチェックしない日はありません。この習慣ははや10年以上続いてます。ちょっと昔のヤフーのデザインに興味が湧いたので、インターネット・アーカイブで年代別にスクリーンショットを撮ってみました。 1997年 Yahoo! Japanは1996年の4月1日にオープン。しかし最初のアーカイブは1997年からです。見た目は今の携帯サイトみたいですね。それもそのはず、当時はモデムによる通信しかなかったので通信容量との戦いでした。 Yahoo! JAPAN 1997/04/14 1998年 バナー広告がリンク切れしているのはご愛嬌。テーブルによる段組がスタート。CSSの概念は登場していましたがブラウザが対応しておらず、しばらくテーブルレイアウトが主流となります。 タグ(html,css)辞典: CSSの歴史 Yahoo! JAPAN 1998/12/05 1
Web制作の最先端！ヒネリを加えた新パララックスエフェクトを活用しよう
海外デザインブログDesignModoで公開された「Design Trend: Parallax With a Twist」より許可をもらい、日本語抄訳しています。 ウェブデザインのもっとも新しいトレンドは、パララックスエフェクトのようですが、パララックスとも違うスタイルです。デザイン要素を動かしたりしますが、アニメーションとも異なります。たくさんの配色やデザインを利用しますが、マテリアルデザインとも違います。 この背景イメージに関するWebトレンドは、他のトレンドと一緒に利用し、デザイン要素を動かすことでユーザーの注目を惹き、面白いスクロール操作を使い、ユーザーのサイト滞在時間を伸ばしてくれるでしょう。このヒネリを加えた新しいパララックスエフェクトは、最先端テクニッとしてウェブデザイナーを魅了しはじめています。 詳細は以下から。 新型パララックスエフェクトとは？ 以下で紹介しているサンプ
オンラインゲームのクールなwebサイト MMO編:11選 – Commit Lab
今や家庭用ゲーム機以外でのゲームと言えば、iphoneを代表とするスマートフォンのアプリや、Facebook・mixi・Gree・Mobageに代表されるようなソーシャルゲームが中心となり「早い・安い・面白い」のカジュアル化が進んでいますが、初めてパソコンでゲームをしたのはクライアント型のMMOでしたという人も多いのではないでしょうか。 数年前から廃人(1日の大半をゲームに費やせる人)が絶対的に強いゲームから、短時間でも楽しめるものが主流になってるようですが、それに対するMMORPGの1つの答えが基本無料でアイテム課金なんでしょうね。社会人は強さをお金で買ってね的な。 今はネトゲはやらなくなったけど、ウルティマやディアブロ(ちょっと違うか)でネトゲの面白さを知りましたという諸兄もそう少なくはないと思います。(歳がばれますね) 僕も学生の頃はMMOをプレイしていたのですが、プレイ当時はまだま
Code Sample Design Gallery | Smiley Cat
Technical websites often need to display code. Because code can be hard to read, ensuring the reader’s comfort is the primary goal when presenting it on a web page. A large font size also make the code easier to read. Simple syntax highlighting (or none at all) reduces visually clutter and helps to ensure that the code is readable. Displaying line numbers makes it easy to reference a particular li
今押さえておくべきWeb制作に役立つ37個のブックマークまとめ*ホームページを作る人のネタ帳
WEB制作に役立つWebサービスやツール等、合計37のブックマークまとめ。 とりあえず全て無料をあつめました。 Webサイト作成のお供にFLASH関連 Wink デスクトップのマウスの操作を含めた動きを全てFLASHへ変換するソフト。 途中注意書きを追加したり、要らない部分のカット等も出来ます。完成したムービーに次へボタンをつけたりも出来ますし、ローディングバーもつけれます。 使い方 2.0にバージョンアップ その他使いやすいデスクトップを動画にするキャプチャ マニュアル作成が１０倍楽になるソフトがありました Flashできれいなパイチャートや円グラフを無料で作る いまはやりの丸グラを作るのにフラッシュの知識がなくても簡単に作れるツール。 動画をまとめて配信するフラッシュコンテンツの作成 各種動画サイトの複数映像をまとめて表示するツール。 役立つWEBサービス 白地図、世界地図、日本地図が
Demo: Adaptive Design With Media Queries
Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac. Vestibulum congue nisl magna. Ut vulputate odio id dui convallis in adipiscing
クオリティが高い縦に長いサイトを厳選して集めています MUUUUU_CHANG WEB DESIGN SHOWCASE
縦長のwebデザインをがむしゃらに集めています。
Codebomber // Resizer
Resizer allows you to quickly change the dimensions of a webpage to test responsive design. New 2/9/12: Now available as a chrome extension! Getting Started To install the bookmarklet, simply drag this button Resizer to your bookmarks bar. How to use Visit any site that you wish to test responsive dimensions on, and click the Resizer bookmarklet on your bookmarks bar. Resizer Bookmarklet is activ
ゲーム関連のデザイン制作時に参考になるサイト20 - Design Color
もくじ ゲームサイトのデザインいろいろ ゲームサイトに特化したギャラリーサイト 「ゲーム」タグがあるギャラリーサイト ゲームのデザインをまとめた記事 ゲーム関連のアイコン ゲーム関連デザインのためのチュートリアル ゲームサイトのデザインいろいろ まずゲームサイトのデザインとはどんなものがあるのでしょうか？本当に様々ですが、中でも雰囲気や見せ方がそれぞれ異なるサイトを4つピックアップしてご紹介します！ ジョジョの奇妙な冒険 オールスターバトル バァーンッ！！まずはFlashバリバリ！のジョジョのゲームサイト。かっこいいしキャラを大きく打ち出しているのでインパクト抜群です！なんかもう、色んなとこホバーすると色んなものが動きます。これぞゲームのサイト！ってくらい仕掛けがたくさんです。文字で効果音が出たりするところが漫画っぽくもありますね。 トゥームレイダー 黒を背景にしていてシリアスな雰囲気や「
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
エンタメ＆ゲーム系ウェブ制作｜スフィーダ株式会社
84イラスト室 ｜ イラストレーター HMK84
S5-Style
FreeHTML5.co