『CSS3でつくるキャラアニメーション』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして！ アメーバゲーム部門でディベロッパーをしております、なるげと申します。 現在、私は「ガールフレンド（仮）」チームに属していますが、前は「フレンダリアと魔法の指輪」というファンタジーRPGで、モンスターのアニメーションを担当していました。 ガールフレンド（仮）でも一部CSSアニメを使用してキャラクターを動かしています。 今回は、ガールフレンド（仮）に登場するガールを例に、キャラアニメの制作をご紹介したいと思います。 ガールフレンド（仮）とは 「ガールフレンド（仮）」とは、ユーザーが主人公となり、様々な女の子と出会っていく学園恋愛カードゲー
W3C CSS組版仕様の標準化の動き | CSS組版ブログ
先月(5/19～21)、韓国で行われたW3C CSS Working GroupのFace to Face meetingに参加しました。アンテナハウスは今年4月からW3Cに再加盟しており（2年半ぶり）、それから初めて参加するCSSWG会議でした。そこで私（村上）は、自己紹介をかねたプレゼンをさせてもらいました。 プレゼン（英語）： CSS3 for formatting books CSS3で本を組版するために 私のこと、AH Formatterのこと 私（村上）はAH Formatterの開発リーダーです。 AH Formatterはプリントフォーマッタ―でありXSL-FO, SVG, MathML, (X)HTML, CSS3 Paged MediaなどのW3C仕様をサポートしてます。 AH Formatterはどのように生まれたのか 1990年代後期、私はフリーランスのプログラマー
Autoprefixerによる、CSS3の管理 - kojika17
CSS3を使用する時に、ベンダープレフィックスを付けていますか？ 自分でプレフィックスをつけたり、SassなどのCSSメタ言語やツールを利用するなど、さまざまな方法がありますが、せっかく付けたベンダープレフィックスも適切でない場合もあります。適切にベンダープレフィックスを付与するツールに、CSS Postprocessorの「Autoprefixer」というものがあるので紹介します。 ベンダープレフィックスをいつまで付け続けるのか ベンダープレフィックスはブラウザの試験的、または独自拡張で実装されているものであり、W3Cの仕様がある程度固まると、ブラウザはベンダープレフィックスが外すことが推奨されています。 現在、CSS3の一部の仕様は、すでに勧告や勧告候補まで上がっているものがあり、最新のブラウザではベンダープレフィックスなしで作動するCSSも増えてきています。またグラデーションやFle
Prefix free: Break free from CSS vendor prefix hell!
-prefix-free Break free from CSS prefix hell! Only 2KB gzipped -prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. “[-prefix-free is] fantastic, top-notch work! Thank you for creating and sharing it.” — Eric Meyer Features Processes every stylesheet in <link> or <style> elements
FlexboxがLCに: プロパティ名などもろもろ変更 - fragmentary
タイトルの通りで、FlexboxのLCが公開。 [css3-flexbox] Going to Last Call CSS Flexible Box Layout Module (W3C Working Draft, 12 June 2012) LCは喜ばしいんだけど、なんせTabせんせやfantasaiせんせがEditorなので、政情不安定というか変なところで変更が毎回ある。 というわけで、今回はプロパティ名や値が変わった。計画だったようだけれど。 これまでかわったの flex-align align-items flex-item-align align-self flex-line-pack align-content flex-pack justify-content flex-order order flex-pack: start flex-pack: end justify-
CSS3のtransformやbox-shadowを主要ブラウザ全てに対応させるjsライブラリ・cssSandpaper - かちびと.net
これ系はいくつかありますので 1つの選択肢として、という感じ ですね。css3のtransformや box-shadowをクロスブラウザ 対応させるjsライブラリですが、 特徴はプロパティを1行で統一 させる事が出来る点です。 css3のtransform（変形）、box-shadow（影）、gradient（グラデーション）ですが、gradientは不完全でした。しかしながらこのスクリプトを応用してアニメーションさせることも出来るようです。 各ブラウザで実装したものを比較していました。IEに限らず、主要ブラウザ全てをサポートしています。また、何より独自のプロパティを使うのですが、これが1行で済むので場合によってはなかなか楽では無いかと。 左がChrome、右がIE6です。テキストのドラッグも普通に出来ますね。 例・transform cssSandpaperを使用した際のtransfo
Best of JavaScript, HTML5 and CSS3 - Week of March 26, 2012 : Remote Synthesis
It's a good week: Spring is in the air; Game of Thrones is back on television; and, most importantly, there are tons of new libraries and tutorials about JavaScript, HTML5 and CSS to enjoy. A hot topic this week, both from Adobe and from numerous external sources, was the CSS Regions and exclusions proposals from Adobe. Backbone.js also seems to dominate discussions and tutorials about JavaScript
CSS3 vs. CSS: A Speed Benchmark — Smashing Magazine
Trent Walton takes a single case experiment. Designs and codes a Web page and adds visual enhancements twice: once with CSS3, and a second time using background images sliced directly from the PSD. He times himself and compares. I believe in the power, speed and “update-ability” of CSS3. Not having to load background images as structural enhancements (such as PNGs for rounded corners and gradients
How to create animated tooltips with CSS3 | Codrops
How to create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after In today’s tip we’ll show you how to create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after. The idea is to have a list with links or in our case, social icons, that reveal a little tooltip on hover. The unordered list will look like this: <ul
CSS3 の border-radius を使って円形のサムネイルを作る方法２つ
今回の記事では、CSS3の border-radius を使った円形いサムネイルの作り方を２種類紹介します。 まず簡単な方から説明しますが、サムネイル画像が正方形の場合であれば、画像のスタイル border-radius に大きめの値を指定するだけで、丸いサムネイルを作れますね。 <img src="thumb.png" width="150" height="150" style="border-radius:400px;" > サムネイルが長方形の場合 写真が正方形の場合でも、きれいな円にしたい場合は、サムネイルを背景画像（background-image）にすることで実現できます。イメージは↓のような感じです。 HTMLソース サムネイルの幅に合わせたボックスに、サムネイル画像を背景画像として設定し、border-radius で背景画像をクリップします。クリックできるようにする場合
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://oridomi.com/
Transit - CSS transitions and transformations for jQuery
ご存知、ないのですか？CSSの優先順位
stroll.js - CSS3 Scroll Effects
CSS Noughts and Crosses | CSSDeck
Blue Grid Background with a Sphere | CSSDeck
Quickly Build a Swish Teaser Page With CSS3
CSS3 Animated Progress Bars | CSSDeck
Ultimate CSS Gradient Generator from ColorZilla
CSS3で作るふわっと浮き上がるツールチップ – creamu