[B! css3][css] araproのブックマーク

arapro id:arapro

css3とcssに関するaraproのブックマーク (4)

CSS3D Clouds
An experiment on creating volumetric 3d-like clouds with CSS3 3D Transf orms and a bit of Javascript. Check out the tutorial here! Move the mouse to rotate around and mouse wheel to zoom in and out. Hit space to generate a new cloud. Works on Firefox (faster if Nightly), Chrome and Safari.
arapro 2015/06/01
3D

CSS3

css
リンク
CSS3で作るダイナミックな3D表現 (1/2)
ダイナミックに切り替わるページナビゲーション一見するとシンプルなデザインのサイト「HUMAAN」。その魅力は、細部まで作り込まれたインタラクションにある。中でも目を引くのが、フルスクリーンで展開されるダイナミックな変形アニメーションだ。何気なく下部のメニューをクリックすると、ページ全体が大きく回転しながら切り替わる。その動きが非常に気持ちよく、コンテンツをうまく魅せる素敵な仕掛けだ。この3D回転は、連載第1回「CSS Transitionsを使った3Dロールオーバーのアイデア」で紹介した3D変形と同じ仕組みで実装されている。今回は、3D回転によるダイナミックなコンテンツ切り替えについて、第1回の記事をヒントに再現してみよう。 STEP 1：3Dの構造を考える最初に、ページ全体を回転させるため、ウィンドウと同じ大きさの2つの面（div要素）を用意し、transf ormプロパティで変形さ
arapro 2015/06/01
3D

CSS3

css
リンク
保存版！CSS3で出来る素敵なデザインやアニメーションをまとめてみた
主要ブラウザで使うことの出来る「CSS3」ですが、IE8に対応していないためにCSS3の基本や使い方は知っていても実務等では使う機会が少なかった(クライアントワークではIE8が対応ブラウザに含まれていたため)方もいらっしゃると思います。そうするとふと「あれ、あのプロパティはどう使うんだっけ？」とか「この要素だけにスタイルを適応するCSS3は何だっけ…？」など忘れてしまうこともしばしば…。最近ではIE8のシェアは低くなり、またスマホサイト制作の機会も増えたためクライアントワークでもCSS3を活用したWeb制作が増えてきました。そこで今回は、まず覚えておくと便利な機能の復習とそれを応用し「これCSS3だけで作れるの!?」というような驚きの作品の数々をまとめてみました！ CSS3とはそもそも「CSS3」とは何のことでしょうか。改めてその定義を確認してみましょう。「CSS」は、ウェブページの
arapro 2015/02/15
css3

css
リンク
[CSS]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル
ページ上のコンテンツを複数のレイヤーで構成し、それぞれを異なるタイミングでスクロールさせるパララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアルを紹介します。デモページをスクロールしたとこパララックスの構造の可視化は、左上の「Debug」をチェックします。パララックスの実装 Step 1: HTML divなどで各レイヤーを配置します。 <div class="parallax"> <div class="parallax__group"> <div class="parallax__layer parallax__layer--back"> ... </div> <div class="parallax__layer parallax__layer--base"> ... </div> </div> <div class="parallax__group"> ..
arapro 2014/08/20
css

css3

3D
リンク
1