凄いなーとおもったのでシェア。Webサイト で飛び出す絵本のような動きを表現した Beercamp 2012がちょっと凄かった。案の定 CSS3とHTML5とJSで作ってるみたいですが、 実際に触ってみると少し感動しますね。 実用的とかでなく、純粋にこういう事が 将来できると楽しいな、という感覚でご覧 下さい。 ChromeかSafariだと多分いい感じです。
CSS3を使うと画像のようなボタンも簡単に作れます。よくあるタイプのボタンですが、できあがりのコードだけだと勉強にならないので、作り方を順番に紹介していきます。 今回、ChomeとFirefoxで動作確認しています。IEだとグラデーションが使えないので、同じボタンがたくさんあるように見えます。スマホサイト用なんかだと十分実用的だと思います。
The CSS3 Webkit Gradient Generator is a showcase for the power of CSS webkit gradients. It also provides a simple graphical user interface for working with CSS webkit gradients, allowing a user preview real time what their gradient will look like and provide the code for the gradient they generated.CSS3 Gradient Generator v2.0 Welcome to the CSS3 Gradient Generator! Please be aware that in order t
Webフォントでアイコンをつくろう! ゆとりジェネレーションのほんだです。 最近、Webフォントを使用する仕事に多く携わった関係で、 Webフォントを有効活用したものすっごく素敵なマークアップ方法に気づきました。 ずばり、アイコンやちょっとしたイラストをWebフォントで作成する、というものです。 (以下のデモはGoogle Chromeなど、モダンなブラウザ推奨です。) jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS アイコンを作成するだけだと、あまり新鮮さはありませんが、 CSS3時代のいま、これはとっても有効なマークアップ方法となっています。 詳しくは、つづきからどうぞ! 色をつける フォントなのでCSS「color:」で指定するだけで色をつけられます。 もちろんマウスオーバー時に色を変更するのも、C
そんな訳で、HTML5のオフラインWebアプリケーションに触れてみることにします。 前置きのようなもの Webアプリケーションというくらいだから、当然ネットワークに接続し、目的のページをダウンロードして表示するわけです。 ということはオフライン状態では、Webアプリケーションは一切使うことができないということになります。そりゃそうだ。 ではオンライン状態の間にWebアプリケーションのリソースを、ローカルのストレージ領域にごっそりキャッシュ(ダウンロード)してしまったらどうでしょう? 以降はそのリソースを参照すれば、オフラインだろうが問題なっしんぐだし、オンラインであってもHTTP通信するよりパフォーマンスの向上が見込めますよね。 この単純明快な力技こそが、HTML5のオフラインWebアプリケーションの仕組みなのです。 とはいっても、アクセスしたページがHTML5なら片っ端からキャッシュする
Just make cool sh** stuff. Current Stack – Back to basics. Going “build–step free” for a handcrafted experience. Feb 23 2024 @joshua Yearning for a simpler time – the artisanal web. Websites are too BIG, too complicated, and too hard. Reactive programing is conceptually easy to grasp – but the distance between the end result vs. frameworks & tooling is too far apart. I get it, the web is a compl
@keyframesとAndroid CSS3の@keyframesでアニメーションを作成しているんですがAndroidでかなりバグがあるようです。 transformに複数の値を指定すると動かない @-webkit-keyframes hogeName{ 0% {-webkit-transform:scale(1,2)} 50% {-webkit-transform:scale(2,2) translateY(10px)} 100% {-webkit-transform:scale(1,1) translateY(0)} } サンプル というようにtransformに複数の値が不規則に入る場合Androidでは動作しなくなることがあります。(このサンプルだとscaleの指定が無視される) @-webkit-keyframes hogeName{ 0% {-webkit-transform
A fair while back I wrote a post on pressed button states using CSS, which was a tutorial on how to implement a pressed down button effect on custom styled links. In that post I used images to achieve the visual effect. Now that we have good CSS3 support, that method is really out of date. In this post I’ll show you how to achieve the same effect using CSS3, as well as how I’d go about styling the
CSS3でスタイルした箇所をサポートしていない古いブラウザ、まぁ主にIEなのですが、でどのように見えるのか簡単に確認できるブックマークレットを紹介します。
CSS3 Progress BarsはCSS3を使ってプログレスバー表示を行います。 最近、複雑な表示ですらCSSだけでこなしてしまうようなハックが流行っていますが、CSS3 Progress BarsはCSS3だけを使ってプログレスバーを表示します。 表示例です。角丸や複数の組み合わせ表示ができます。 さらに細めのタイプもあります。 コードです。styleのwidthでバーの長さを指定します。 色の指定もclass名でできます。 組み合わせの場合はこんな感じです。 細いタイプは_tinyをつければOKです。 CSS3 Progress BarsはCSS3だけでプログラレスバーを生成しているのでJavaScriptなどで動いたりするようにするのも簡単に実現できそうです。 CSS3 Progress BarsはCSS3製、MIT Licenseのオープンソース・ソフトウェアです。 MOONG
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Menno van Slooten. You might notice we’ve been down this road before, but I quite like Menno’s approach here. The end result proves you can get a little fancier with the design than I originally did, with borders, gradients, and shadows and while actually usi
CSSのプロファイラ! → The CSS profilers are coming! (英語) (Bricss) CSS3+JSでパズルゲーム → Introduction to CSS3 Transitions (英語) (MSDN Blogs) CSS3だけで作る、マウスを乗せる方向によって異なるホバーアニメーション → Multi-direction hover (英語) (jsFiddle) JavaScriptは使わず、CSS3でコンテンツフィルターを実装する (かちびと.net) iOS5でCSS3の縦書きがサポートされましたがRubyについて注意が必要です (text.ssig33.com) CSS3で作るスピードメーター(実際にはCSS3のパフォーマンスのお話し)→ Pure CSS3 images? Hmm, maybe later (英語) (Performance
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く