今日からCSS3アニメーションを使えるようになるチュートリアル
CSS3のアニメーションってスゴい！ 先日のぽんたくんの記事でも紹介されたように、CSS3ではアニメーションも制御できるようになりました。 ということで、ぼくもCSS3のアニメーションを使ってdemoをいくつか作ってみました。 SafariやChromeなどwebkitブラウザで表示してみてください。 コピペで使えるCSS3アニメーション - jsdo.it ※PLAYボタンをクリックすると表示されますよ 見れない人のために動画も撮ってみました。 どうですか？CSSだけで、まるでFlashを使ってるような表現ができちゃうんです。 今回はこのCSSのアニメーションのチュートリアルをご紹介します。 「NEW!」というアイコンが、1文字ごとにぴょこんぴょこん跳ねるアニメーションを作ってみましょう。 上記のdemoでいうと二つ目の動きです。 HTML <p class="animetionNew
どう考えても無茶な「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だけで作られたワニワニパニック。 このコードは海外のユーザーにも大きな反響を呼びました。
HTML+CSS主体のJavaScriptエフェクト！ 簡単で「使える」jQueryテクニック（解説つき）
4月から入社した2011年度新卒社員です。 ハロこんにゃんセヨ がぜんウェブウェブしているほんだです。 今年4月より、意匠部のME課（めか）でマークアップエンジニアとして働いているほんだです。 入社したての新卒社員ですが、PCサイトのHTML+CSSのマークアップや、MovableType（ブログ構築ツール）での組み込みなど、色々な仕事をさせてもらってマークアップリア充です。 そんな中でも最近多い業務はjQueryを使ったビジュアル面でのちょっとしたJavaScript（以下 JS）プログラミングです。 jQueryってとっても便利ですなぁ。HTML+CSSの知識を持っている人なら、簡単に「使える」エフェクトをつくれます。 この記事では僕が入社して2ヶ月間に学んだ、簡単で「使える」jQueryテクニックを紹介します。 jQueryってなんぞってとこと、使う前の準備をざっくり解説 jQuer
SVG女子を90%軽くしたSVG軽量化テク+α #svggirl
あいつ仕事してないで女の子のイラストばっかりいじってるぞと陰ながら言われていた喜納です。 HTML5で動くSVGアニメーション「SVG女子」がラスベガスでのマイクロソフト基調講演MIX11で公開され、 世界を（いろんな意味で）驚かしてきましたが、 ついに本日、日本でも公開されました！ しかも日本版に合わせてアニメーションも長くなっています！ こっそりブラウザを英語にして見ていた人も必見です！ （神風動画さんによる予告編動画！） 神風動画さんによるハイクオリティアニメーションをSVGで再現すると言う試み、 プログラムについては SVG Girlの公開と内部実装（プログラマーブログ） で担当プログラマーの吾郷が説明していますが、とにかく いかにSVGをきれいに軽くするかが最重要！ SVGといえば拡大しても荒れる事の無いベクター形式で、pngよりも軽くつくれたりすることで使われていますが、 今回
来てるぜ未来！3D系のiPhone／iPadアプリ
どうも、ねじです。 3DテレビやKinect、そして来年はニンテンドー3DSが発売されるなど、盛り上がりを見せる3Dの世界。iPhoneやiPadアプリの3D系はどうなっているのでしょうか。調べてみて気になったトピック４つほどご紹介します。 ３D版ちい散歩！『Epic Citadel』 Epic GamesのiOS版「Unreal Engine 3」のデモアプリ。とくにゲーム要素はなく、お城や大聖堂などをプラプラ散歩するだけの、いわば「ちい散歩」アプリですね。しかし３D空間を直感的に歩ける操作感には驚かされます。地井武男さんばりに声を張ってプレイしてみてはいかがでしょう。 「皆さん、最近歩いてますか! 散歩っていいですよ〜! さぁ、散歩に出かけましょう!!」 ダウンロードは下記からどうぞ！無料です！ キャプテンEOの衝撃から20年！『HoloToy』 3Dメガネなしで立体視できるゲーム機と
ログイン画面の離脱率を下げる！ECサイト各社の工夫
こたつにみかんはじめました。nonakaです。 週に１度は通販で買い物してます。そんな中、ログインする画面をいろいろ見たので、ファッション通販サイトのログイン画面を集めました！ ファッション通販サイトの場合、ログイン画面に「新規会員登録」への誘導があるのがほとんどです。今回は、2つのパターンにわけてご紹介します。 「ログイン画面」エリア、「新規登録」エリアが上下にあるパターン セレクトショップ：BEYES ログイン画面、新規登録が上下にあるパターン。入力フォームが大きめで入力しやすい。新規会員登録のボタンは色を変えて目立たせてます。 無印良品 ログイン画面、新規登録が上下にあるパターン。フォームとボタンの横幅がそろっていて見やすいですね。 ユニクロ ログイン画面、新規登録が上下にあるパターン。入力フォームが大きくて見やすいです。ログインと会員登録の分けかたも見やすいですね。 子供服：goo
【擬人化】KAYACサービスを擬人化してみた【02_level0篇】
おはこんばんちは、イコヤマです。 「おはこんばんちは」とは、「おはよう」「こんにちは」「こんばんは」を合体させた、超便利な挨拶です。 確か鳥山明先生がアラレちゃんの中で言ってたような気がするんですが、違ってたらごめんなさい。 はい、どうでもいいですね！ それでは、今日も元気にKAYACサービスを擬人化します！ level０ちゃんでございます。↓↓ level0(レベルゼロ)ちゃん level0はKAYACに在籍するフラッシュデベロッパーが持ち回りで書いてるblogです。 デザイナーズブログのフラッシャー版ですね。 年間500エントリーという脅威的な目標をかかげ、もりもり更新されています。 私も購読していますが、FLASHの専門的な内容はもちろんのこと、 すてきな動画のレビューやちょいチップスなど、 ノンフラッシャーでも楽しめる記事が盛りだくさん！ level0ちゃんスペック B95 W:5
Tシャツデザイナーになろう！そしてお小遣いまで稼ごう！
2000年代中盤のweb2.0登場以来、ユーザーが参加出来る・貢献出来るWEBサービスって本当に増えましたね。 その中で今回デザイナーが参加・貢献出来る、そしてお小遣い稼ぎまで出来ちゃう WEBサービスをいくつかピックアップしました。 とは言っても、デザイナーが何かを作って・売るというサイトは以外と多いので、 今回はTシャツのWEBサイトに絞りました。 Tシャツのデザインを自分で考えて、WEBサービスを通じて売るというシンプルなことですけど、 実は各WEBサイトではそれにオリジナリティを色々と加えています。 T-SELECT（http://t-select.livedoor.com/） Tシャツコミュニケーションサイト Tシャツのデザインを応募すると、一定期間にサイト上で掲載され、 期間内に受注が一定数集まれば販売出来るというシステム。 買う人が多いと値段が下がるという特徴もあります。 t
CSS3だけでつくるWebボタン！押さずにはいられないボタン簡単3ステップ
インターンシップにきています。 こんにちわ。(・`д・ノ)ノ 面白法人カヤックでインターンシップ中のどうもぽんたです。 先週、鎌倉本社から自由が丘支社に移りました。 自由が丘に来たのは初めてなので、「丘ないなぁ。」って思いました。 そしてこちらはインターン研修で、書いているエントリーです。 どうか柔らかいまなざしで見守って下さいませ！ 今回は画像を使わず、CSS3だけでWebボタンをつくる方法を紹介したいと思います。 といっても僕自身つくったことがないので、一緒に挑戦しましょう！！ つづきからどうぞ！ すごいよ！CSS3 ≫ CSS3のみでつくっているボタンを紹介している凄いサイトがあります。 ラムネのようなテイストのボタンですな。 これを画像なしでつくってるっていうからスゴイ！ ここまでレベルの高いボタンはつくれないので、 基本重視のシンプルなCSSボタンをつくろうと思います。 まずはC
KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話
はじめに 自己紹介 はじめまして。Lobiチーム意匠部のばっこです。 カヤックで「Lobi」というスマホゲーマー向けSNSのデザイナーをしています。 去年の8月頃に社内の受託チームからLobiチームに異動をして、 半年ほどLobiの周辺サービス（Lobi REC SDK、Lobi Play）を担当したり、 少しだけ新規サービス（RANKERS）のお手伝いをしたりしていましたが、 最近、Lobi本体のアプリに携わるようになりました。 世間のUXブームに遅ればせながらも、業務でUXについて考える機会が増えてきたので、 今回は、そんなLobiでのUXデザインの取り組みを紹介したいと思います。 Lobi（ゲームコミュニティ事業） | 面白法人カヤック Lobiは、スマホゲームに特化した国内最大級のスマホゲーマーSNSです。 同じゲームをプレイしている友達を探したり、攻略情報を交換したり、レアアイテ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
地獄のミサワがCSS3の勉強に最適と話題に
JavaScriptは盗んで学べ！ 知識0のデザイナーでもできるjsdo.itの遊び方