CSS3なら簡単！ アニメーションするリングメニューを作る カテゴリ：CSS3関連 2011年7月19日 07:40 jsdo.itで公開したら意外と好評だったので、解説などを書いてみたいと思います。 ゲームなどにありそうなリングメニューを、CSSだけを使って実装した例です。下に実際の動くサンプルもあるので、ぜひ触って見てください。 ちなみに右の画像は、中央の「main」にマウスオーバーした際にアニメーションでメニューが出てくる瞬間の画像です。 デモ まずは下のサンプルをご覧ください。ちなみにアニメーションに対応しているブラウザのみ、アニメーションが実行されます。具体的には、GoogleChrome、Safari、Firefox、Operaです。 リングメニューをCSSで実装してみる - jsdo.it - share JavaScript, HTML5 and CSS テクニックの肝 今
CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます。 jsdo.itでCSSプログラミングが流行中！ ええ、どう考えても無茶なんです。CSSはプログラミング言語じゃないですからね。 CSSの機能を巧みに組み合わせて作成されています。 ということで、投稿作品のほんの一部を紹介したいと思います。 CSS PANIC CSSだけで作られたワニワニパニック。 このコードは海外のユーザーにも大きな反響を呼びました。
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
こんにちは。 CSSのアニメーションに関するポストです。 その中でも、@keyframesという指定方法について学んでみましょう。 @keyframes は、アニメーション中に到達すべきポイントであるキーフレーム (通過点) を明示することで、CSS animation の流れの中間地点をページ作者が制御することを可能にします。これにより、ブラウザにすべてを自動的に扱わせる場合よりも、アニメーションの流れの中間地点をより明確に制御することができます。 引用：@keyframes – CSS | MDN まぁ、これだけみても何のことかしっくり来ませんね。 構文は単純 @keyframes <identifier> { [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]* } identifierがキーフレ
こんにちは、エンジニアチームのづやです。 CSS3のtransition便利ですよね。 JavaScriptから制御してると、jQueryでanimateをstopさせるときみたいに途中で動きを止めたいことがありました。そんな時どうすればいいかわからなかったので、調べてみました。 JavaScriptから制御しているCSS3のtransitionを途中で中断させる方法 動かしてるstyleを上書きしてしまう これが一番ベターっぽい。中断したいタイミングで対象となってるstyleを上書きすると止まってくれるようでした。 <!-- こんな要素があって --> <input type="button" name="start" id="start" value="開始"><br> <input type="button" name="stop" id="stop" value="停止"><br>
はじめに 昨日公開した「第一回 プログラマ向けデザイン勉強会の内容を参考にして妻のパン屋のWebサイトをリニューアルしてみた」の続編を書きます。 今回は僕が苦労したIE6〜8対応のお話です。 実はIE8ユーザーの割合はIE9に次いで第2位！ Mac万歳！Chrome万歳！な僕にとって、IEは「どうせ使うことないし、どうでもいいよね〜」という「心の中でサポート対象外なブラウザ」でした。 しかし、店のWebサイトのアクセス解析を見てみると、実はIE9とIE8が1位、2位を占めていることがわかりました。 よく見ると8位にはIE6がまだしぶとく生き残っています。 この結果を見ると、「うーん、こりゃ完全に無視するわけにはいかんな・・・」と考えざるを得ませんでした。 IE対応を全く考慮していないとこうなる まず最初に、IE対応を全く考慮していないと、いったいどんな表示になるか見てみましょう。 トップペ
Enhance and extend DreamweaverDreamweaver provides its own API as well as the Common Extensibility Platform (CEP), and offers you the flexibility of using C++, HTML, CSS, and JS to build extensions for Dreamweaver. You can extend the Dreamweaver UI, add powerful features for building web apps and automate entire cross-application workflows. Build custom web development toolsImport database data in
みなさん、2012年のゴールデンウィークは、いかがお過ごしでしょうか！ 中には映画を観に行ったりしている人もいるかと思うのですが、タイタンの逆襲なんかを例にとってみても、最近は「3D/2D 同時公開」の流れがあるみたいですね。 というわけで、このブログも、これから更新するときは 2D だけじゃなくて 3D でも楽しめるようにしてみました。ページの右の方にある「3D mode!」をクリックすると、3D モードでお楽しみいただけます。 元ネタは LAB! – 3D it! です。webkitTransform と MozTransform を使っているので、WebKit 系と Mozilla 系でしか動かないと思います。興味のある方は、Chrome や Firefox で試してみてください。
純 CSS 繪製「輕音少女」秋山澪 Pure CSS Design 'K-ON!' Akiyama Mio 画像を一切使わずCSSで描かれた「けいおん!」の秋山 澪 2011/11/24 [beta1] 初版純靜態無動畫 2011/11/25 [beta2] 更新了襯衫錯位、新增頭髮與眼睛的動畫功能 2014/05/08 [beta3] 修正部分 Chrome 23 之後、在 keyframe 中下 skew 造成的區塊錯位 [注意!!] 因為我無意間發現，有人把這作品拿來當瀏覽器的支援判定，為了避免自己成為第二個哆啦A夢，所以要特別澄清一下。 這作品一開始完成時，小 Rei 完全不認為 IE 系列能正常動作，所以完全沒有加上 IE 廠商專用的語法(就是 Firefox 的 -moz-、Chrome/Safari 的 -webkit-、Opera 的 -o-，IE 當然也有 -ms-)。就
CSS3による地獄のミサワ描画
C++11の参考書、アマゾンお気に入りリストを公開中。 アマゾンの江添のほしい物リスト C++11の参考書、C++の文法と機能をGitHubで公開中。詳しくは、本の虫: C++11参考書の公開：C++11の文法と機能を参照 GitHub: EzoeRyou/cpp-book レポジトリのzipダウンロード GitHub Pageで閲覧:C++11の文法と機能 江添亮 自由ソフトウェア主義者 C++ Evangelist C++標準化委員会の委員 ドワンゴ社員 C++11本を執筆した。 株式会社ドワンゴで働いている。 Mail:boostcpp@gmail.com Twitter:@EzoeRyou GitHub: https://github.com/EzoeRyou 江添亮のマストドン@EzoeRyou 筆者にブログのネタを提供するために、品物をアマゾンお気に入りリスト経由で送りたい場合
VimでCSSを書いていると、最近のCSS3プロパティでもやもやした感じになるのはまぁしょうがないかな……と見ないふりをしていた。が、@mediaでブロックを作った時に最初のセレクタのハイライトに失敗するのとかにムキーとなって、もうこれは駄目だと思ったので、既存のCSSシンタックス・ファイルをCSS3に対応させた感じにする追加シンタックス・ファイルを作成した。はじめてのVimシンタックスファイル(もどき)。 Media Queriesでブロック化した時に以下のような感じで最初の行のハイライトが失敗する。 最初のセレクタだけなのだけど、どうも落ち着かない。これを、 とMedia Queriesの条件式も含めてちゃんとハイライトされるようにする。 他はHTML5の新しい要素やCSS3のプロパティや、値のキーワード、calc()やhsla?()などの関数などになんとなく対応させただけ。確認は十分
スタイルシートの新たなWeb標準として現在策定が進められているCSS3に対して、日本語に対応した禁則、傍点（圏点）、縦書き仕様などの機能が追加されたドラフトが公開されました。 9月28日にPublickeyで公開した記事「電子書籍フォーマット「EPUB」で縦書きとルビのサポート、来年5月には仕様完成の見通し」では、EPUBでの縦書きやルビ、傍点などの仕様を策定中であることを紹介しましたが、EPUBはXHTMLやCSSをベースにした仕様であるため、仕様策定の作業はEPUBとCSSのそれぞれのグループが協力してCSS3に対して機能を追加する方法で行われていました。 これが最終的にCSS3の仕様として策定されれば、Webブラウザ上での禁則処理、傍点、縦書きなどの組み版処理が充実することになります（ルビはまだ作業中ですが）。大げさではなく、世界中のWebブラウザに対して日本の日本語文化に対応した表
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
