著作権放棄・シンプル・軽量で、iPhoneなどにもレイアウトを調整できるレスポンシブWebデザイン対応のHTML5フレームワーク・Fluid Baseline Grid
なかなか凄いフレームワークがあったので 反射的にメモ。パブリックドメインという のが何より太っ腹ですねー。自由に使用で きて、シンプルで汎用的、しかも軽量で iPhoneやiPadにもレイアウトを自動調整 するレスポンシブWebデザイン対応のHTML5 フレームワークです。 これ、凄く良い感じです。いいもの全部詰め込んだ、みたいなソフトウェアですね・・・ちゃんと使いこなせるようになりたいかも。 Media Queriesを使ったレスポンシブWebデザイン対応のCSSフレームワークです。3カラム構成で組めるようにもしてあります。マークアップはHTML5+CSS3ですが、jsを使ってIEにも対応してくれています。 以下にざっと特徴を。 著作権放棄(パブリックドメイン)軽量(CSSは9kb)ベースライングリッドに揃済みグリッドレイアウト対応iPhoneやiPadなどにも自動でレイアウトを調整HT
WEB以上にUIが重要視される、モバイルアプリ開発。当然情勢も刻一刻と変わっていきスピード感も求められます。今日紹介するのは直感的にスマートにモバイルアプリのUIが作れるモックアップサービス「fluid」。 ブラウザ上で、用意されたパーツを並べていくだけで簡単にUIを設計することができます。非常に直感的に操作できるようになっており、海外のサービスですが、説明やチュートリアル無しで制作していくことができました。 詳しくは以下 予めよく利用するパーツが取り揃えられれていますので、基本設計は用意されているパーツで十分行えると思います。 フリー版では1つのプロジェクトで10スクリーンまで、10MBのアップロード領域まで利用できるそうです。それ以上は、STANDARD、PROFESSIONAL、EXPERTと開発規模に応じて有料プランが用意されています。有料版の利用料金は料金は「Plans & Pr
CSSの便利ツールが登場！ レスポンシブ対応のフォントサイズを超簡単に定義できる -Modern Fluid Typography Editor
Webサイトをレスポンシブ対応にする時、フォントサイズをさまざまなスクリーンに最適なサイズにします。スマホ用のfont-size、デスクトップ用のfont-sizeを定義するのも一つの方法ですが、font-sizeの最小値と最大値とその間の値を流動的にするclamp()を使用すると簡単に定義できます。 CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。 最近のやり方としてはvw, calc()を使用したフォントサイズの定義などがありますが、clamp()を使用するとかなり簡単です。最小値と最大値を決め、その間の変化の度合いも変更でき、もちろん日本語フォントのfont-sizeでも大丈夫です。 Modern Fluid Typography Editor Modern Fluid Typography Editor -GitHub Modern Flu
Version 2.1. Just a svelte 6.3 MB download. Requires Mac OS 10.12 or later. Web applications like Gmail, Facebook, Campfire and Pandora are becoming more and more like desktop applications every day. Running each of these web apps in a separate tab in your browser can be a real pain. Fluid lets you create a Real Mac App (or "Fluid App") out of any website or web application, effectively turning yo
同人誌などの商用利用もOK！魔方陣のような複雑で美しい幾何学模様のベクター素材 -Fluid Geometric Shapes
拡大縮小・カラーなど自由自在に変更できる、魔方陣のような複雑で美しい幾何学模様のベクター素材を紹介します。 商用の同人誌だけでなく、Webでもアプリでも動画でも何にでも無料で利用できます。
CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数の定義が簡単にできる便利ツール -Fluid Type Scale Calculator
レスポンブ対応のフォントサイズをCSSで設定するには、CSSのclamp()関数が便利です。clamp()関数は最大値と最小値の2つの値の間をクランプし、レスポンシブ対応の流体フォントサイズを設定できます。 CSSのclamp()関数を使用し、スクリーンサイズに合わせて最適化される流体フォントサイズのCSSを簡単に生成できるツールを紹介します。 Fluid Type Scale Calculator Fluid Type Scale Calculator -GitHub Fluid Type Scale Calculatorの特徴 Fluid Type Scale Calculatorの使い方 Fluid Type Scale Calculatorの特徴 Fluid Type Scale Calculatorはclamp()関数を使用した流体フォントサイズのCSSを生成できるツールです。
よく使うWebアプリを「アプリケーション化」！ こちらのMacアプリ「Fluid」は、先日のPogoplug Family ブロガーミーティングの中で[N]ネタフルの@kogure さんが紹介されていたモノです。 早速起動してみましょう。 その使い方は非常にシンプルです。 まずは、アプリケーション化したいWebアプリのURLをコピーします。 今回は、Webアプリ版のEvernoteをアプリケーション化してみましょう。 「URL」欄にコピーしたURLを入力、アプリ名を作成します。 「Icon」は、WebページのFaviconを使用する場合はそのまま「Use Website Favicon」を選択すればOKです。なんか上手くいかない時もあるのでそういう時は別途pngファイルを用意しましょう。 保存先を選択して、Saveをクリック！ でけた！ アプリが作成されたらFluid自体は終了して構いませ
A WebGL fluid simulation that works in mobile browsers.
A 1140px wide, 12 column grid. Fluid all the way down to a mobile version. The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser. Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense. Scrap 1024! Des
普通のデザインツールだと、サイズ指定は「px」を使用している人がほとんどでしょう。固定値のデザインをするのであれば、ピクセルで何も困りませんが、レスポンシブの相対値のデザインに適しているとは言えません。 Sketchでサイズ指定を「%」でできるプラグインを紹介します。 キャンバス・グループ・兄弟要素に対して、相対的にサイズを指定できます。
ちと技術的なツールだが、メモ的にエントリー。 用途にもよるだろうが格子状のラインに沿って要素を配置したサイトを作りたいならグリッドベースのデザインが便利だ。 そう考えるとTiny Fluid Gridは知っておいてもいいだろう。 このサイトでは作りたいグリッドのサイズを指定するだけで必要なCSSファイルをダウンロードすることができる。 あとはこれをベースにサイトをデザインしていけばいいだけだ。 最近のサイト作りはスピード勝負のようなところもある。こうしたツールをうまく使いこなしたいですね。
Tiny Fluid Grid
If you are presently in prison and looking for a stress-free and quick way to communicate with your family and friend, then you should consider the CorrLinks Inmate Email. It is an email system that provides the opportunity to receive or send messages to inmates. In … Step-by-step Guide to Make NJ Surcharge Traffic Ticket Payment Online. I still remember paying my traffic ticket fines offline. I h
Fluid 960 Grid System
Fluid 960 Grid System If you are looking for the Fluid 960 Grid System mentioned long ago on Smashing Magazine, I have moved it to the Markup Library. If you are looking for the Fluid 960 Grid System mentioned long ago on Smashing Magazine, I have moved it to the Markup Library. Initially released as open source on GitHub Jan 29, 2009. Markup LibraryDesign ProcessDesign is based on the inspiration
FitVids.JS - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
A lightweight, easy-to-use jQuery plugin for fluid width video embeds. Download On Github
結構良かったのでご紹介。スマフォ やタブレットなどのモックアップを 直感で作成出来るWebサービスです。 かなり簡単に作れるので選択肢の 一つとして覚えておくといいかもし れません。 有料ですが、結構良さそうなモックアップツールです。動作も軽くてサクサク作れます。 有料のモックアップツール。最安で月/29USDとなかなかの値段ですが、それに見合う機能だなぁとは思います。 パッと見、地味ですけど・・機能は結構凄い。触って頂くと直感で作成出来るのが実感できると思います。操作はドラッグでパーツを持っていって配置するだけ。Cacooを使う感覚に近いかも。※個人の感想です ↑ パーツは各種デバイスのものが用意されていますが、アップロードも可能です。アップロードはユーザー登録が必要です。 ↑ 何個も同時に作れます。ダブルクリックで新規モックアップ作成です。 ↑ 作ってて楽しい。 他、アニメーション遷移
磁性流体のアートプロジェクト「突き出す、流れる」(Magnetic Fluid Art Project "Protrude, Flow")
・2013年の活動は、株式会社フェローテック社（作品に使われる磁性流体を製造）にご後援頂けることとなりました。 ・磁性流体のアートプロジェクトの作品情報は、www.sachikokodama.comに引っ越ししました。最新情報は新サイトをご覧ください。（2013年6月） メディアアーティスト児玉幸子の磁性流体アートプロジェクトを紹介します Copyright 2013 Sachiko Kodama Studio&Lab. All rights reserved. ※このサイトに掲載されている画像・記事など、あらゆる素材の無断複写・転写を禁じます。
This domain may be for sale!
可変グリッドシステム用のスタイルシートのフレームワーク「Fluid Grid system」を紹介します。 Fluid Grid system ※グリッド表示は右上の「SHOW GRID」をクリック 上記ページではブラウザのサイズを小さくすると、それに合わせてグリッドも小さく変更されます。 ブラウザのサイズを小さくしたキャプチャ 「Fluid Grid system」は成果物としてのレイアウトと同様、プロトタイプでも素早く使えるように設計されたものです。 デザイナーは素早くレイアウトがデザインでき、しっかりと設計された水平や垂直のリズムをもつ複雑なページの変更をすることもできます。 ダウンロードできるデモファイルには、6カラムと9カラムのレイアウトが用意されています。
「Fluid UI」は既存のパーツを配置するだけでWebサイトやアプリのモックアップをサクサク作成でき、簡単な画面遷移や複数人での編集も行えるサービスです。実際に使ってどんなことができるのか試してみました。 FluidUI.com - Create Web and Mobile Prototypes in Minutes https://www.fluidui.com/ Fluid UIのページへ行き、右上の「CREATE ACCOUNT」をクリックします。 メールアドレスとパスワードのほかに、最初のプロジェクトの名前とどんな端末の画面で表示させるかを設定します。 今回は「first project」という名前の「iPhone 6」向けのプロジェクトを作成することにしました。入力したら「CREATE ACCOUNT」をクリックします。 画面上の「Add page」ボタンで新しいページを追加
Design portfolio of Fluid Dynamic Media, Remon Tijssen.
WEBレイアウトを便利にしてくれるフレームワーク関連のWEBサービスやツール集「Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks」
WEBレイアウトを便利にしてくれるフレームワーク関連のWEBサービスやツール集「Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks」 WEBでコーディングをしていくときにとても便利なフレームワーク。上手く使えばデザインからのコーディングが劇的に早くなります。有名なものもあり、いくつか実務に使っていると言うWEBデザイナーさんも多いかと思います。今日紹介するのはWEBレイアウトを便利にしてくれるフレームワークをつくるWEBサービスやツールを集めた「Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks」というエントリー。 Tiny Fluid Grid グリッドを自由にカスタマイズして作れるWEBサービスから、テンプレートまで様々なレイアウト
最近存在を知ったのでメモ。 1ヶ月も前の情報ですけど、 今更ながらなかなか良さそう なプラグインです。 最近存在を知ったのでメモ。 1ヶ月も前の情報ですけど、 今更ながらなかなか良さそう なプラグインです。cssメニュー でのマウスオーバーで使う jQueryプラグイン。 デモを見ていただいたほうが早そうですね。マウスオーバー時にリスト内に書いたdiv要素に切り替えつつドロップダウンさせるjQuery。なんとなく説明が難しい。。。 マウスを乗せると別の要素が滑らかに降りてきます。デモは画像不使用です。なかなか良いのでは。 IE6~8も動く事は動きますが、若干挙動が怪しい。。 [sexy-lightbox href=’http://kachibito.net/wp-content/demo/fluid-menu/fluid-menu.html?TB_iframe=true&height=65
![[cssメニュー]マウスオーバーで滑らかに別要素をドロップダウンさせるjQuery・Fluid Navigation](https://cdn-ak-scissors.b.st-hatena.com/image/square/5822cbe70e419f31b0cf82163d82314142f2ee7c/height=288;version=1;width=512/http%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2010%2F03%2Fcss-jquery01.jpg)
表示サイズによって正方形のユニットが最適に構成される、Media Queriesを使ったフレームワークを紹介します。 IE8以下のMedia Queries非サポートブラウザにもスクリプトで対応しています。 Fluid Squares V2 [ad#ad-2] Fluid Squaresの主な特徴 正方形のユニットを使った、HTML5ベースの可変グリッドのフレームワーク。 Media Queriesで表示サイズによって、カラム数が増減、フォントサイズも調整。 モバイル ファーストで、小さいディスプレイのためにCSSを記述。 最近のモダンブラウザだけでなく、iOS, Android, BlackBerryなどにも対応。 IEなどMedia Queries非サポートブラウザには「css3-mediaqueries-js」で対応。 Fluid Squaresのデモ カラム数は1, 2, 3, 4
Generated CSS: What are fluid-responsive fonts / fluid typography? Also known as: Responsive typography (excellent article), Flexible Type, Fluid Type, Viewport Sized Typography, Fluid Typography, and even Responsive Display Text. They all leverage the viewport width, and / or height, to smoothly scale the font-size rather than switch at specific breakpoints. Some versions address the whole page,
A fluid page flip effect that's easy to use and highly customizable
A fluid page flip effect that's easy to use and highly customizable. Pageflip 5 is the easiest and most powerful way to create and manage an interactive multimedia flipbook on the web. Anything you can display in HTML5 you can add to Pageflip 5, including images, animations, forms, videos, sound and music. Create a rich interactive experience with an interface that's as intuitive as using a real b
Fluid Simulator
Instructions: You can drag the fluid around with your mouse and adjust the sliders at the top to change the properties of the fluid in real-time. Please check out this video if you're having trouble figuring out what the sliders do. It requires Java to run. Check out my newest app: Grantophone! More cool demos! blog comments powered by Disqus About This is my implementation of the Material Point M
Blueberry - A simple, fluid, responsive jQuery image slider.
Introducing a jQuery image slider written specifically for responsive web design. Resize this page to see it in action! What is Blueberry? Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts. A brief history With the popularity of smart phones and tablet devices responsive/fluid web layouts have become an
Design is based on the inspiration of past accomplishments. On that foundation, we can build upon those achievements to shape the future. Design is about life — past, present and future — and the learning process that happens between birth and death. It is about community and shared knowledge and experience. It is the passion to build on what we've learned to create something better. The words "de
by WikiImages これまでの宇宙理論では、宇宙に存在する5％のものしか説明することができず、残りの95％は目に見えず正体不明の「ダークマター(暗黒物質)」「ダークエネルギー(暗黒エネルギー)」であるとされています。新たな研究で、この2つは「Dark fluid(暗黒流体)」というものの一部であり、「暗黒流体が『負の質量』を持ち、かつ負の質量が連続的に作り出されている」と考えることで多くの「謎」が説明できるとする論文が発表されました。 [1712.07962] A Unifying Theory of Dark Energy and Dark Matter: Negative Masses and Matter Creation within a Modified ΛCDM Framework https://arxiv.org/abs/1712.07962 Bizarre 'da
クールなグリッドレイアウトのテンプレートを配布する『Fluid 960 Grid System』 – creamu
かっこいいグリッドレイアウトでデザインしたい。 そんなときにおすすめなのが、『Fluid 960 Grid System』。クールなグリッドレイアウトのテンプレートを配布するサイトだ。 このサイトでは、↑のようなグリッドのソースが紹介されている。メニューの「Download Files」のリンク先からZipファイルでダウンロードが可能だ。 16カラムレイアウト。 mootoolsによる、マウスオーバで切り替わるコンテンツ。 ライセンスはGPL/MITとなっているので、自由に使えるだろう。 クールなグリッドレイアウトのテンプレートを配布するサイト、チェックして使ってみてはいかがだろうか。 » Fluid 960 Grid System 先日バイクを修理してもらった。時間がかかってしまったから無料でいいですと言ってもらえてうれしかったな。大分快適になったぞ。
Version 2.1. Just a svelte 6.3 MB download. Requires Mac OS 10.12 or later. Web applications like Gmail, Facebook, Campfire and Pandora are becoming more and more like desktop applications every day. Running each of these web apps in a separate tab in your browser can be a real pain. Fluid lets you create a Real Mac App (or "Fluid App") out of any website or web application, effectively turning yo
clamp(1.5rem, 2vw + 1rem, 2.25rem); clamp(1.5rem, 2vw + 1rem, 2.25rem); Copy link https://modern-fluid-typography.vercel.app?rootFontSize=16&minSize=24&fluidSize=2&relativeSize=1&maxSize=36
Prism（旧Webrunner）というソフトウェアがある。これはある特定のWebサービス専用Geckoブラウザで、Webアプリケーションをデスクトップのように見せてくれる。 そして同種のソフトウェア、それもSafariを使ったものを紹介しよう。これもまた便利だ。 今回紹介するフリーウェアはFluid、Webアプリケーションをデスクトップアプリケーションのようにするソフトウェアだ。 Fluidを立ち上げると、名前とURLを入れる欄が表示される。例えば名前をGMail、URLをhttp://gmail.com/にして、Createボタンを押そう。 そうするとアプリケーションフォルダにGMail.appというアプリケーションが作成される。これを立ち上げるとGMailが表示される。独自のSafariウィンドウで、まるでデスクトップアプリケーションのようだ。 アドレスバーを表示することもできるが、
「MN5010-i5-Fluid Motion+NZB」でFluid Motionがヌルヌル滑らかに動くか試したぞ！ 好きなアニメのBlu-ray Discを最高の状態で見たいと思った時、何を揃えればいいと考えるだろう。サウンドバーで質の高い音で楽しむのもありだし、大画面のディスプレーを用意してド迫力で観るのもありだ。しかし、やっぱりこだわりたいのは映像そのものの美しさ。特にアニメでは、動きをより美しく滑らかに見ることにこだわりたい。 一般的に日本のアニメは映画などと同様に、毎秒24コマ（24p）で再生する前提で作られている。一方テレビなど放送を視聴するための機器やパソコンのディスプレーなどは60Hzで駆動することが前提となっている。つまりインターレースであれば30コマ、プログレッシブであれば60コマとなる。24コマのコンテンツを再生する場合には、そのための変換が必要だ（テレビなどでは24
Running, jumping and biking on 8,000 litres of non-newtonian fluid in Kuala Lumpur, Malaysia! Brought to you by Mach by Hong Leong Bank together with We are KIX. Music and info below.. Get Banking with Mach by Hong Leong Bank: http://www.machbyhongleongbank.com A film and event concept by: http://www.wearekix.com Featured Runner: https://www.caykuijpers.com MUSIC by Thrill me now & Ion Ray: ht
In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds while sliding the container of the slides. In this tutorial, we are going to create a slideshow with a parallax effect with the help of some CSS3 properties. We’ll use radio buttons and sibling combinators for controlling which slide is s
YouTube - A pool filled with non-newtonian fluid 非ニュートン流体のプール
They filled a pool with a mix of cornstarch and water made on a concrete mixer truck. It becomes a non-newtonian fluid. When stress is applied to the liquid it exhibits properties of a solid. Wikipedia: http://en.wikipedia.org/wiki/Non_Newtonian_fluid Recorded at Barcelona, Spain. TV Show: http://www.cuatro.com/microsites/el_hormiguero/cientifico.html
Fluid CSS3 Slideshow with Parallax Effect – CSSだけで作られた背景にパララックス効果のあるスライドショー – creamu
Technology Fluid CSS3 Slideshow with Parallax Effect – CSSだけで作られた背景にパララックス効果のあるスライドショー
One% CSS Grid is a 12 column fluid CSS grid system. It’s been designed as a base for building responsive web layouts easy, quick and with minimum effort. You don’t have to take care of resizing and rearanging your layout for each platform separatelly. All this will do One% CSS Grid for you.What is One% CSS Grid ? One% CSS Grid is a 12 column fluid CSS grid system. It’s been designed as a base for
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
直感的にスマートにモバイルアプリのUIが作れるモックアップサービス「fluid」
Fluid – Turn any webpage into a real Mac App
よく使用するWebアプリを「アプリケーション化」してくれるMacアプリ、「Fluid」が超便利だ！
Webgl Fluid Simulation
The 1140px CSS Grid System - Fluid down to mobil
デザインツールの革命と言っていいかも！サイズ指定を「%」でできるSketchのプラグイン -Fluid
グリッドベースのサイトを作りたいなら『Tiny Fluid Grid』が便利 | 100SHIKI
直感でモバイルサイトのモックアップを作成出来るオンラインツール・Fluid UI
Fluid Interfaces実践 - なめらかなUIデザインを実現する｜dely design
ブラウザのサイズに合わせてグリッドも変更する -Fluid Grid system
無料で動きのついたデザインモックアップを作りiOS・Androidで動作確認ができる「Fluid UI」
Fluid | Remon Tijssen | Dynamic Media Design
[cssメニュー]マウスオーバーで滑らかに別要素をドロップダウンさせるjQuery・Fluid Navigation
正方形のユニットで構成された、スマフォ対応のHTML5ベースのフレームワーク -Fluid Squares
Fluid-responsive font-size calculator
Fluid 960 Grid System | 16-column Grid
ダークマターやダークエネルギーは「負の質量」を持つ「Dark fluid(暗黒流体)」の一部だとする論文が発表される
FluidのようにWebサイトをmacOSのネイティブアプリ化出来る「Flotato」が公開予定。
Fluid – Turn any webpage into a real Mac App
Modern fluid typography editor
MOONGIFT: » 専用Webアプリケーションを手軽に「Fluid」:オープンソースを毎日紹介
先輩！ 私たちのFluid Motionなら60fpsでぬるぬるです!! (1/4)
Can You Walk on Water? (Non-Newtonian Fluid Pool)
Fluid CSS3 Slideshow with Parallax Effect | Codrops
One% CSS Grid - 12 Columns Fluid CSS Grid System