CSSな生物

CSSのアニメーションで、クリーチャを作ってみました。

当初は何とも線虫っぽくて気持ち悪かったので、目玉などをつけて愛嬌を出しております。

●

例によってmozillaとwebkitで動くようにしていますが、PCのパワーが足りないと、スムーズにアニメーションしないかもしれません。

しばらく見ていると、２体目が出てきますが、体節を動かす@keyframesや、出現移動をさせる@keyframesは共通のものを使っているのが工夫ポイントです。体節の長さを変えたり、animation-durationを変えて、大きさの違いを強調してみました。

また、多関節風にする為に、要素を入れ子のabsoluteにして、直接の親を基準にpositionしています。その上で、animation-delayを節ごとに遅らせると、体節がウネウネする、という仕組みです。

以下に、ソースをのせておきます。

html

<div id="cage">
	<div id="water2">●</div>
	<div class="csscreature">
		<div>
			<div>
				<div>
					<div>
						<div>
							<div>
								<div></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="csscreature" id="type2">
		<div>
			<div>
				<div>
					<div>
						<div>
							<div>
								<div></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="water">●</div>
</div>

<div>

</div>

<div>

</div>

</div>

css（ベンダープレフィックスは省略しています）

<style>
#cage {
	height:30em;
	width:100%;
	margin:1em 0;
	padding:0;
	position:relative;
	overflow:hidden;
	box-shadow:0 0 3em #9a9 inset;
	background:-moz-linear-gradient(top , #ace, #36c);
	background:-webkit-linear-gradient(top , #ace, #36c);
	background:linear-gradient(top , #ace, #36c);
}
#water,
#water2 {
	height:100%;
	width:200%;
	color:transparent;
	font-size:1em;
	text-shadow:0 0 0.2em rgba(255, 255, 255, 0.5),
		-2em 3em 0.2em rgba(255, 255, 255, 0.5),
		-1em 8em 0.2em rgba(255, 255, 255, 0.5),
		-8em 12em 0.2em rgba(255, 255, 255, 0.5)
		;
	position:absolute;
	top:3em;
	left:-100%;
	animation:10s water linear 0s infinite normal;
}
#water2 {
	text-shadow:0 0 0.2em rgba(255, 255, 255, 0.25),
		-2em 5em 0.2em rgba(255, 255, 255, 0.25),
		-1em 8em 0.2em rgba(255, 255, 255, 0.1),
		-12em 9em 0.3em rgba(255, 255, 255, 0.3)
		;
	font-size:0.8em;
	top:6em;
	animation-duration:15s;
	animation-delay:3s;
}
.csscreature {
	position:absolute;
	bottom:55%;
	left:110%;
	font-size:2em;
	transform-origin:right center;
	animation:10s move ease 1s infinite alternate,
		7s roll ease-in 0s infinite alternate;
}
#type2 {
	bottom:85%;
	left:110%;
	font-size:4em;
	animation:30s move ease 45s infinite alternate,
		15s roll ease-out 45s infinite alternate;
}
.csscreature div {
	height:1em;
	width:1em;
	border-radius:0.2em 0 0 0.5em;
	background:linear-gradient(top,#3c3,#3c3 50%,#dcc 55%,#bbb);
	box-shadow: 0 0 0.2em #fff, 0 0 0.5em #fff inset;
	position:absolute;
	top:0;
	left:0.7em;
	transform-origin:left center;
	animation:2s curve 0s infinite;
}
#type2 div {
	width:4em;
	box-shadow: 0 0 0.2em #ccf, 0 0 0.5em #cfc inset;
	animation-duration:5s;
}
.csscreature > div:before {
	content:"●";
	color:#000;
	display:block;
	font-size:0.3em;
	height:1em;
	line-height:1;
	width:1em;
	padding:0.5em;
	background:#fff;
	left:-0.2em;
	border-radius:50%;
	box-shadow: 0 0 0.2em #333, 0 0 0.1em #c00 inset;
}
.csscreature > div:after{
	content:"w";
	color:rgba(250,250,0,0.2);
	font-size:2em;
	font-weight:bold;
	text-shadow:0 0 0.1em #fd0;
	height:1em;
	line-height:1;
	width:1em;
	position:absolute;
	top:-1.2em;
	left:0;
}
.csscreature div div{animation-delay:0.3s;}
.csscreature div div div{animation-delay:0.6s;}
.csscreature div div div div{animation-delay:0.9s;}
.csscreature div div div div div{animation-delay:1s;}
.csscreature div div div div div div{animation-delay:1.1s;}
.csscreature div div div div div div div{animation-delay:1.2s;}
@keyframes water {
	0%{left:-100%;}
	100%{left:200%;}
}
@keyframes move {
	0%{left:110%;}
	100%{left:30%;}
}
@keyframes roll {
	0%{transform:rotate(0) scale(1.5); z-index:100;}
	30%{transform:rotate(-30deg);}
	80%{transform:rotate(0deg) scale(0.8); z-index:1;}
	100%{transform:rotate(30deg);}
}
@keyframes curve {
	0%{transform:rotateZ(0) rotateX(0);}
	25%{transform:rotateZ(10deg) rotateY(0);}
	50%{transform:rotateZ(0) rotateY(-20deg) rotateX(0deg);}
	75%{transform:rotateZ(-10deg) rotateY(20deg);}
	100%{transform:rotateZ(0) rotateX(0deg);}
}
</style>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

<style>

#cage {

height:30em;

width:100%;

margin:1em 0;

padding:0;

position:relative;

overflow:hidden;

box-shadow:0 0 3em #9a9 inset;

background:-moz-linear-gradient(top , #ace, #36c);

background:-webkit-linear-gradient(top , #ace, #36c);

background:linear-gradient(top , #ace, #36c);

}

#water,

#water2 {

height:100%;

width:200%;

color:transparent;

font-size:1em;

text-shadow:0 0 0.2em rgba(255, 255, 255, 0.5),

-2em 3em 0.2em rgba(255, 255, 255, 0.5),

-1em 8em 0.2em rgba(255, 255, 255, 0.5),

-8em 12em 0.2em rgba(255, 255, 255, 0.5)

;

position:absolute;

top:3em;

left:-100%;

animation:10s water linear 0s infinite normal;

}

#water2 {

text-shadow:0 0 0.2em rgba(255, 255, 255, 0.25),

-2em 5em 0.2em rgba(255, 255, 255, 0.25),

-1em 8em 0.2em rgba(255, 255, 255, 0.1),

-12em 9em 0.3em rgba(255, 255, 255, 0.3)

;

font-size:0.8em;

top:6em;

animation-duration:15s;

animation-delay:3s;

}

.csscreature {

position:absolute;

bottom:55%;

left:110%;

font-size:2em;

transform-origin:right center;

animation:10s move ease 1s infinite alternate,

7s roll ease-in 0s infinite alternate;

}

#type2 {

bottom:85%;

left:110%;

font-size:4em;

animation:30s move ease 45s infinite alternate,

15s roll ease-out 45s infinite alternate;

}

.csscreature div {

height:1em;

width:1em;

border-radius:0.2em 0 0 0.5em;

background:linear-gradient(top,#3c3,#3c3 50%,#dcc 55%,#bbb);

box-shadow: 0 0 0.2em #fff, 0 0 0.5em #fff inset;

position:absolute;

top:0;

left:0.7em;

transform-origin:left center;

animation:2s curve 0s infinite;

}

#type2 div {

width:4em;

box-shadow: 0 0 0.2em #ccf, 0 0 0.5em #cfc inset;

animation-duration:5s;

}

.csscreature > div:before {

content:"●";

color:#000;

display:block;

font-size:0.3em;

height:1em;

line-height:1;

width:1em;

padding:0.5em;

background:#fff;

left:-0.2em;

border-radius:50%;

box-shadow: 0 0 0.2em #333, 0 0 0.1em #c00 inset;

}

.csscreature > div:after{

content:"w";

color:rgba(250,250,0,0.2);

font-size:2em;

font-weight:bold;

text-shadow:0 0 0.1em #fd0;

height:1em;

line-height:1;

width:1em;

position:absolute;

top:-1.2em;

left:0;

}

.csscreature div div{animation-delay:0.3s;}

.csscreature div div div{animation-delay:0.6s;}

.csscreature div div div div{animation-delay:0.9s;}

.csscreature div div div div div{animation-delay:1s;}

.csscreature div div div div div div{animation-delay:1.1s;}

.csscreature div div div div div div div{animation-delay:1.2s;}

@keyframes water {

0%{left:-100%;}

100%{left:200%;}

}

@keyframes move {

0%{left:110%;}

100%{left:30%;}

}

@keyframes roll {

0%{transform:rotate(0) scale(1.5); z-index:100;}

30%{transform:rotate(-30deg);}

80%{transform:rotate(0deg) scale(0.8); z-index:1;}

100%{transform:rotate(30deg);}

}

@keyframes curve {

0%{transform:rotateZ(0) rotateX(0);}

25%{transform:rotateZ(10deg) rotateY(0);}

50%{transform:rotateZ(0) rotateY(-20deg) rotateX(0deg);}

75%{transform:rotateZ(-10deg) rotateY(20deg);}

100%{transform:rotateZ(0) rotateX(0deg);}

}

</style>

CSSのanimation で作った映画のカウントダウン

CSS3のanimationだけを使ったスライドショーの勉強をしていて、ちょっと思いついたので作ってみました。

古いフィルム映画の冒頭にあるカウントダウンの参考映像を探したのですが、ちょっと見つけられず。仕方なしに記憶と印象だけで作成しましたので、細部は間違っているかもしれません。

以下が実装済みのサンプルで、mozillaとwebkitで動く様にしました。参考に表示したcssソースでは、ベンダープレッフィクスは省略しています。

なお、このサンプルは10秒でループしているので、カウントが完了しても映画は始まりません。

html

<div id="count-down">
    <div class="progress-half"></div>
    <div class="progress-cover"></div>
    <div class="progress-cover2"></div>
    <ol>
	    <li>1</li>
	    <li>2</li>
	    <li>3</li>
	    <li>4</li>
	    <li>5</li>
	    <li>6</li>
	    <li>7</li>
	    <li>8</li>
	    <li>9</li>
	    <li> </li>
    </ol>
</div>

<ol>

</ol>

</div>

css（ベンダープレッフィクスは省略しています）

#count-down {
	font-size:5em;
	font-family:monospace;
	color:#333;
	margin:0.2em auto;
	padding:0;
	background:#eee;
	height:2em;
	width:2em;
	position:relative;
	border-radius:50%;
	overflow:hidden;
}
#count-down ol {
	font-size:1em;
	position:absolute;
	top:0;
	left:0;
	margin:0;
	padding:0;
	height:2em;
	width:2em;
	border-radius:50%;
	list-style:none;
}
#count-down li {
	font-size:1em;
	text-align:center;
	line-height:1;
	height:1em;
	width:1em;
	margin:0;
	padding:0.2em;
	border-radius:50%;
	border:0.3em double #333;
	position:absolute;
	top:0;
	left:0;
	text-shadow:0.02em 0.02em 0 #fff,
		-0.02em 0.02em 0 #fff,
		-0.02em -0.02em 0 #fff,
		0.02em -0.02em 0 #fff;
	opacity:0;
	animation:number linear 10s infinite;
}
#count-down li:nth-of-type(1) {animation-delay:9s;}
#count-down li:nth-of-type(2) {animation-delay:8s;}
#count-down li:nth-of-type(3) {animation-delay:7s;}
#count-down li:nth-of-type(4) {animation-delay:6s;}
#count-down li:nth-of-type(5) {animation-delay:5s;}
#count-down li:nth-of-type(6) {animation-delay:4s;}
#count-down li:nth-of-type(7) {animation-delay:3s;}
#count-down li:nth-of-type(8) {animation-delay:2s;}
#count-down li:nth-of-type(9) {animation-delay:1s;}
#count-down li:nth-of-type(10) {
	animation-delay:0s;
	background-color: #fff;
	border: 0.3em solid #fff;
}
#count-down .progress-half,
#count-down .progress-cover,
#count-down .progress-cover2 {
	height: 100%;
	width: 100%;
	border-radius:50%;
	position: relative;
}
#count-down .progress-half {
	background:linear-gradient(left,transparent 50%,#333 50%);
	animation:progress-half 1s linear infinite;
}
#count-down .progress-cover {
	background:linear-gradient(left,#333 50%,transparent 50%);
	animation:progress-cover 1s linear infinite;
}
#count-down .progress-cover2 {
	background:linear-gradient(left,transparent 50%,#eee 50%);
	animation:progress-cover 1s linear 0.5s infinite;
}
#count-down .progress-cover,
#count-down .progress-cover2 {
	margin-top:-100%;
}

@keyframes progress-half {
	0% {transform:rotate(0);}
	100% {transform:rotate(360deg);}
}
@keyframes progress-cover {
	0%,50% {opacity:1;}
	50.1%,100% {opacity:0;}
}
@keyframes number {
	0%,10% {opacity:1;}
	11%,100% {opacity:0;}
}

#count-down {

font-size:5em;

font-family:monospace;

color:#333;

margin:0.2em auto;

padding:0;

background:#eee;

height:2em;

width:2em;

position:relative;

border-radius:50%;

overflow:hidden;

}

#count-down ol {

font-size:1em;

position:absolute;

top:0;

left:0;

margin:0;

padding:0;

height:2em;

width:2em;

border-radius:50%;

list-style:none;

}

#count-down li {

font-size:1em;

text-align:center;

line-height:1;

height:1em;

width:1em;

margin:0;

padding:0.2em;

border-radius:50%;

border:0.3em double #333;

position:absolute;

top:0;

left:0;

text-shadow:0.02em 0.02em 0 #fff,

-0.02em 0.02em 0 #fff,

-0.02em -0.02em 0 #fff,

0.02em -0.02em 0 #fff;

opacity:0;

animation:number linear 10s infinite;

}

#count-down li:nth-of-type(1) {animation-delay:9s;}

#count-down li:nth-of-type(2) {animation-delay:8s;}

#count-down li:nth-of-type(3) {animation-delay:7s;}

#count-down li:nth-of-type(4) {animation-delay:6s;}

#count-down li:nth-of-type(5) {animation-delay:5s;}

#count-down li:nth-of-type(6) {animation-delay:4s;}

#count-down li:nth-of-type(7) {animation-delay:3s;}

#count-down li:nth-of-type(8) {animation-delay:2s;}

#count-down li:nth-of-type(9) {animation-delay:1s;}

#count-down li:nth-of-type(10) {

animation-delay:0s;

background-color: #fff;

border: 0.3em solid #fff;

}

#count-down .progress-half,

#count-down .progress-cover,

#count-down .progress-cover2 {

height: 100%;

width: 100%;

border-radius:50%;

position: relative;

}

#count-down .progress-half {

background:linear-gradient(left,transparent 50%,#333 50%);

animation:progress-half 1s linear infinite;

}

#count-down .progress-cover {

background:linear-gradient(left,#333 50%,transparent 50%);

animation:progress-cover 1s linear infinite;

}

#count-down .progress-cover2 {

background:linear-gradient(left,transparent 50%,#eee 50%);

animation:progress-cover 1s linear 0.5s infinite;

}

#count-down .progress-cover,

#count-down .progress-cover2 {

margin-top:-100%;

}

@keyframes progress-half {

0% {transform:rotate(0);}

100% {transform:rotate(360deg);}

}

@keyframes progress-cover {

0%,50% {opacity:1;}

50.1%,100% {opacity:0;}

}

@keyframes number {

0%,10% {opacity:1;}

11%,100% {opacity:0;}

}

CSSでキャンドルの炎

確定申告も終えたので、久しぶりにコンテンツを追加しよう。

CSSで描いたキャンドル。

作成ポイントは以下の通り

キャンドルを描くのに使ったhtml要素はdivが2つだけ
炎がチロチロと動くのはcssのanimation
画像の使用は無し。Firefox、Safari、Chromeに対応。IEは無視。

実は、ろうそく、ろうそくの芯、炎を描くだけならdivは1つで済む。afterとbeforeの疑似要素を使えば良いからだ。しかし、このエントリーを描いている時点のwebkitでは、疑似要素がanimationしないので、仕方なくdivを2つにした。

このブログで公開している作品の制作目的は、8割が自分の練習の為で、直接に現場で流用できるかどうかは考慮していない。とはいえ、ここで試したことを、自分の仕事に利用することは多い。純粋に「CSSで絵を描く」ならdivを100個でも200個でも使うのも有りだが、実用に当たっては、その絵を描く為に追加する要素が少ない方が良い。

何故なら、CSSで描画するために要素があるのではなく、マークアップした要素を装飾するためにCSSがあるからだ。当たり前の事ですが。

少ない要素で複雑な絵を描く時に、疑似要素はとても便利。元になる要素1つにつき、afterとbeforeで2つ配置できる。

要素や疑似要素の「塗り」をリッチにしたい時にはbackground-imageのgradientと、box-shadowをinsetで使うのが有効。background-imageも、box-shadowも、複数の値で重ね描きできるので、大変に重宝する。今回のキャンドルの様に、光と影と陰を表現するのにはうってつけだ。

どのようにbackground-imageや、box-shadowを使っているのか、詳しくは作品のソースを見たり、FireBugなどを利用して確認して下さい。

transformのskewの記述をskewXとskewYに変更（2012.7.27）

css3とjsでサイコロ

最近はずっと自宅でWordPressな仕事をしているので、頭の切り換えの為にcss3でサイコロを描いた。詳しくはDEMOを参照。

サイコロっぽくするために立方体の角を丸めたので、それっぽく見えると思う。また、只の絵では面白くないので、ウィンドウをクリックするとjsでランダムに目が変わる様にした。なお、サイコロを転がすとアニメーションがもっさりだったので、あえて転がしてません。

ランダマイズとclassの書き換えは、当初はjQueryを使ったのだけど、ロードの軽さを考えてjavascriptを直に書く形にした。が、jQueryに甘えていたせいで、忘れている事が多すぎ。ちょっと反省。

jsを使わずにランダムに賽の目を出すアイデアも思いついたが、それはまた暇な時にでも。

CSS3のanimationで心電図

CSS3のanimationの練習と手慰みとして、心電図モニターのアニメを作ってみた。動作とソースはDEMOをご覧いただきたい。

ところで、CSS3のアニメーションの方がjQueryよりも動作が軽い、というのは誤解だ。

ブラウザがCSSだけでアニメーションしてくれれば、javascriptを使わないで済むが、それは制作がシンプルになるのであって、動作が軽い訳ではない。例えば現状ではCSSのグラデーションとアニメーションを組み合わせると、描画スピードが落ちたり、アニメがカクカクしたりする。

イメージとしてはjavascriptがやっていたアニメーションの処理が、ブラウザに内蔵された感じ。どっちにしろPCのリソースを越えて処理が軽くなる訳ではない。

近年、各ブラウザベンダーは、javascriptの処理速度の競争を行なってきた。今後は当然、CSSの処理速度が注目されて行くだろうから、CSS3のアニメーションも、もっと使える様になるはずだ。

さよなら Jobs

Steve Jobsが亡くなった。

彼が作ったAppleとMacintoshが無かったら、今の自分は無いだろう。

会社でSE30に出会う事もなく「文豪」とかを使い続けたかもしれない。自分で買ったPerformaをオフィスに持ち込む事も無かったし、クラリスワークスでイラストを描く楽しさを知る事も無かったろう。

DTPへの移行もなく、紙焼きをピンセットでつまむスキルはアップしていたかもしれない。

AmazonもGoogleもYouTubeも2ちゃんねるも存在しない。情報収集の為の図書館通いは終わらなかったはずだ。子ども向けCD-ROMを作る仕事はできなかったろうし、会社を辞めていないかもしれない。もちろん、Webデザインの仕事も、PCスクールの講師の仕事もしていないだろう。

なにしろ、マウス付きのパソコンの概念すら無く、コンピュータは技術者だけのマシンだったかもしれないのだ。クリックだけでWebを巡回できない世界だったかも知れないのだ。

彼がいなくても、他の誰かが思いついていた？確かに。でも、私が生きてきた時代に、それがあったかどうかは不明だ。Steve Jobsはそれを成し遂げてくれた。

ありがとう、Jobs。さようなら。

cssで縦書き

javascriptやブラウザによる縦書き実装はあった。css3では縦書きサポートが実装される予定だが、実現するのはwebkit2辺りらしい。

電子書籍の日本国内での普及も当然絡んでくるのはもちろんだが、電子書籍自体がまだ不透明だ。標準規格の凌ぎ合いやviewer間のシェア争いは、ブラウザが縦書きを実装すれば消し飛んでしまう不毛な争いで、全く本質的ではない。いつもの様にAppleの「業界枠組み壊し」に期待してしまう。闘病中のジョブスには酷な話だが、iPad普及の鍵はcssの縦書き実装だ、と誰か伝えて下さい。

さて、実はcss2.1の実装レベルでも縦書き表現は可能だ。必要なのは知恵と工夫と力技。当然、数ページに渡る長文では無理なので、そんな時はスクリプトを使うべきだが、要所要所に使用する事は問題ない。多少DOMが汚れるのは致し方ないとしよう。以下にサンプルとして、Not Foundページを作成してみた。

そのコンテンツは見つからない。

ゆく河の流れは絶えずして、しかももとの水にあらず。よどみに浮かぶうたかたは、かつ消えかつ結びて、久しくとどまりたるためしなし

今回は縦書きの為にcss3は使用していない（その他もbox-shadowを使ったのみ。ieではborderにしている）。よって、いつもは一切の断り無く無視しているieでも、縦書きで表示されるはずだ。詳しい仕組みが調べたい人はfirebugを使うなり、ソースを見るなりして欲しい。

html5の scoped

WordPressで記事毎のCSSを記述する方法には、カスタムフィールドやプラグインを利用するのが一般的とされてきた。

しかし、そのstyleを再利用するつもりが無くて、かつ、html5のstyle要素に新たに加えられたscoped属性をブラウザがサポートすれば、エディタ欄にstyleを直接書き込めば良いはずだ。

とは言え、現時点ではFirefox4.0.1もChrome12でもサポートしていない。仕方が無いので、当該ブロックにIDを記入して、子孫セレクタを使う方法でspanを赤丸にし、scopedに頼る方法でpのbackgroundを緑にしておく。ブラウザがstyle要素のscoped属性をサポートすれば、下記ブロック内だけでpの背景色が緑になるが、そうでなければ、このエントリーでは、全てのpの背景色が緑になってしまうだろう。

赤い丸になれ

現状では季節外れのクリスマスの様になってしまうなあ。

天地無用エイプリルフールでした。

4/1からブログ全体を上下逆さまにしていました。

body {
 -moz-transform: rotate(180deg);
 -webkit-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 transform: rotate(180deg);
}

body {

-moz-transform: rotate(180deg);

-webkit-transform: rotate(180deg);

-o-transform: rotate(180deg);

transform: rotate(180deg);

}

名残として、このエントリーだけ、逆さまにしておきます。

原発制御せよ!

暴走しつつ有る福島原発を冷却すべく、自衛隊がヘリから水を散布している。世界が見守る中、作戦が進行中。一方、原発の製造元であるGMから、新たな電源が輸送準備に入っている。何とか無事に制御して欲しいものだ。上手くいった暁には、ワンダバなBGMの動画を見たい。エヴァのBGMでも良いけど、それだとGMから運ばれてくる電源は既に使徒と化している気がする。