Asiance _Your Digital Ag... / Tatchies / jitto他...全21件

みんなのIoT/みんなのPythonの著者。二子玉近く160平米の庭付き一戸建てに嫁/息子/娘/わんこと暮らしてます。月間1000万PV/150万UUのWebサービス運営中。 免責事項 プライバシーポリシー Webにグラフやチャートを描画するライブラリを探していたら見つけました。いろいろあるもんですね:-)。 30 High Quality Charts And Graphs For Webdevelopers To Download 個人的に興味を持ったものをかいつまんでご紹介:-)。 gRaphaël Raphaëlというライブラリをベースに開発されているグラフ描画ライブラリ。MITライセンス。シンプルなコーディングで綺麗なグラフを描画できる。幅広いブラウザ(Firefox 3.0以上, Safari 3.0以上, Opera 9.5以上,Internet Explorer 6.0以上
今のウェブデザインの流行りは「レスポンシブ・ウェブデザイン」! 昨日、とあるアプリの紹介ページについて話し合っていたのだが、株式会社LIGのデザイナブログに書いてあった「必読!5分でわかる流行のレスポンシブWebデザインまとめ」に載っていた「NHKスタジオパーク」のレスポンシブ・ウェブデザインがイケイケすぎて感動したので、紹介する!これは本当にすごい!! まず普通に表示するとこんな感じ。よくある3コラムベースのウェブサイト。 少し幅を狭めると、下にあったコンテンツが右サイドバーに移動し、右サイドバーにあったコンテンツが下に移動した。 さらに狭めてみると、右のサイドバーが完全に無くなった。 さらに狭めると今度は左のサイドバーが消えた。 ブラウザの限界まで狭めてみると、各パーツの幅も狭まってこのような形に落ち着いた。 これを試している時、各要素の動きがあまりにも滑らかでものすごく感動した。皆さ
CSS3 is coming. Although the browser support of CSS 3 is still very limited, many designers across the globe experiment with new powerful features of the language, using graceful degradation for users with older browsers and using the new possibilites of CSS3 for users with modern browsers. Although the browser support of CSS 3 is limited, many designers across the globe experiment with new powerf
GX - Full-Featured Javascript Animations Framework JSでアニメーションするならコレかもというぐらい多機能な「GX」ライブラリ。 jQueryと組み合わせて使うアニメーションライブラリです。 jQueryやscript.aculo.usにもアニメーション機能は備わっているけど、ここまでではないというアニメーションに特化したアドオンです。 勿論、jQuery単体でも、組み合わせて実現できるのかもしれませんがアニメーションに特化している分簡単に出来ます。 以下でその凄さが分かるはず $('#el1').gx({'width': 200, 'height': 200, 'border-width': 8}, 2000, 'Linear', function(el) { el.html('Completed!'); });
-DLINK- automatic link improver - OOPStudios.com リンクを自動で超分かりやすく修飾してくれるJSライブラリ「DLINK」。 次のように、リンクをJavaScriptで自動で色分け&アイコン付与してくれます。<a>タグにclassを指定する必要もありません。 PDF、Flash、SWFなど、各種フォーマットも自動付与。 設置方法は簡単で、以下の3ステップ。 1. まずスクリプトを読み込む <script type="text/javascript" src="http://oopstudios.com/dlink/dlink.js"></script> 2. 色分けしたい部分をdiv.dlinkで囲う 中身に普通にHTML記述 <div class="dlink"> your <a href="#">link filled</a> conten
パララックス効果って、あまり聞き慣れない言葉ですが…。 初期の横スクロール型のテレビゲームなどでよく使われていた視差効果を使って奥行きを出す技法だそうです。 いくつかのレイヤーを、それぞれ違った速度でスクロール(奥にあるレイヤーはゆっくり、手前にあるレイヤーは早くスクロール)させる事で、視差効果を与えて奥行きがあるように見えるのだそうです。 今回は、このパララックス効果を上手にウェブデザインに応用サイトをいくつかまとめてみました。 How to recreate Silverback’s parallax effect まずは、パララックス効果をウェブデザインに応用する方法から。ブラウザの横幅を変えてみると、4つのレイヤーに配置されているPNG画像がそれぞれスクロールの速度が違って奥行きがあるように見えます。サンプルコードも公開されているので、挑戦してみてはいかがでしょうか。CSSのbac
個人的なウェブサイト作成や仕事としてウェブサイトを作成している人だけでなく、何かのサイトを発注して作ってもらう際などにこういうのを知っておくと、かなりはっきりと具体的なイメージを相手に伝えやすくなるので、スムーズにコミュニケーションできるはずです。あるいはクライアントにこれらのリソースの存在を認知してもらうことで、話が進めやすくなるかもしれません。 というわけで、魅力的なウェブサイトを作成するために知っておくと便利な無料の各種スクリプトは以下から。 Woork: Useful resources and tutorials for developing stunning web sites 1. ModalBox http://www.wildbit.com/labs/modalbox/ Web2.0スタイルのダイアログボックスなどを表示させることができます。Mac OS Xのダイアログボ
ブラウザーいっぱいに広がる鮮やかなグラフィック。フェードインでゆっくりと出現する写真画像。スクロールしながら画像に重なっていく半透明のテキストボックス――思わず見とれてしまう、キャンペーンサイトなどでおなじみの“派手なWebサイト”は、フルFlashが一般的だ。「Flashはよく分からないし、そもそもオーサリングツールもない」という個人サイトの制作者はあきらめるしかなかった。 パリ在住のフリーコンサルタント/Webデザイナー「Sebcreation」のWebサイトは、そんな常識を打ち破ることに挑戦している。まずはトップページを見てみよう。 おなじみのローディングアイコン、上下右左から次々とスライドしてくる半透明のテキストボックス……といったダイナミックなデザインに、「またFlashか」と思わずつぶやいてしまうかもしれない。ところがSebcreationでは、アニメーション/エフェクト処理を
どのように表示するのか 以下のような感じで、Divとclassによって何の装飾もない画像に、ワンポイントのアクセサリーをつけるというもの。 サンプルデモが以下。 CSS Decorative Gallery クリップや、映像マーク、セロハンテープ、光沢など、様々な装飾が可能。 セロハンテープ テープで写真を貼り付けたように見せてくれる装飾。 サンプルデモ ビデオマーク Diggなんかでよく見かけるような小さなアイコンを画像に付加できます。 サンプルデモ ポインタを合わせると吹き出しが出る ポインタを合わせると吹き出しが画像から出てきます。 サンプルデモ 付箋付きクリップ 付箋とクリップの装飾。 サンプルデモ 光沢の演出 透Png画像を使って写真に色々な演出も。 サンプルデモ IE7のPng透過問題も解決するものが同梱されています。 様々なブラウザに対応しているようで、実用性も高いかも。 以
Indicator type : Background color : # Transparent background Foreground color : # Create easily your own ajax loader icon : Select the type of indicator you want Enter the background code color you want (tick "Transparent background" if you don't want one Enter the foreground code color you want Press "Generate it"
(1)好きなもの (1)Firefox ( )[r:3,t:60,f:6]シャキーン (1)JavaScript ( )[r:3,t:60,f:6]シャキーン (1)苦手なもの (1)CSS ( )[r:3,t:60,f:6]ショボーン (1)Z上司、曰く (i)[t:15] (i)[t:20] (1)というわけで ( )[r:3,t:60,f:6](金沢のラブホテル) ( ) (2) (2)[f:15]CSS が苦手な エンジニアは 僕だけじゃないはず! (2)[f:15]CSS が苦手な デザイナも もいるはず! (1)[f:15]でもほんとはみんな 出来たらいいよね! (2)みんなが関わる CSS なんだから (1)というわけで ( )[r:3,t:60,f:6](金沢のラブホテル) (2)これから 二時間半 (2)[f:18]CSS のお勉強を しましょう (2)参加して くださ
Try to resize and/or move the window. Then refresh the page. As you can see, the script remember the size and position of the floating windows. This script have been tested in Internet Explorer, Firefox and Opera This select box is here just to show you that this window script manage to cover selectboxes in IE.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く