CSSアニメで作ったパラマウントのロゴを解説

CSSアニメで作ったパラマウントのロゴを解説します。複雑なアニメーションを作る時は、アニメーションを分解して別々の要素に振り分けると、構築が容易になります。

“CSSアニメで作ったパラマウントのロゴを解説” の続きを読む

要素1つだけで描いたcssアニメーション

codepenにいくつか投稿してみたが、今ひとつ、海外の人のツボが分からないなあ。jsdo.itでも公開してみようか。

最新作はdiv1つで描いたてんとう虫のアニメーションです。

“要素1つだけで描いたcssアニメーション” の続きを読む

CSS スフマート技法でリアルな目を描く

スフマートはレオナルド・ダ・ビンチが使ったとされる超絶ぼかし技法。絵筆の跡を一切残さないとか、人間には無理じゃね?とか、まだ謎の残る技法らしいですよ。

WikiPedia:スフマート

今回はそんな技法へのあこがれを込めて、codepenにアップしてみました。

See the Pen Real eye with CSS Sfumato by keisuke Takahashi (@ksksoft) on CodePen.

目の部分は1つの空divで描画しています。眉毛はh1の中にemとstrongを使っていて、毛に見えるのは文字です。マウスオーバーでbox-shadow、text-shadow、border-radiusがとれるようになっているので、試してみて下さい。

table-cell はmarginが無効。それでも簡単に隙間を作る方法

先日、table-cellはmarginが無効。でも隙間を作る方法をUPしましたが、もっと、直感的で、より分かり易い方法を考えました。

table-cell-with-gutter2
DEMO

先日の方法はbackground-colorの代わりにbox-shadowで背景を見せるアイデアでしたが、これだと以下の点で使いにくい欠点がありました。

  • box-shadowによる背景色の見せ方が、直感的ではなく分かりにくい
  • paddingでcontentをズラしているのも、直感的ではない
  • table-cellにした各要素、およびその親要素のwidthが相対幅のケースでは使えない(固定幅ならOK)

透明のborderで隙間をあける

という訳で、今回は透明のborderで隙間をあける方法です。これなら背景は通常通りのbackground-colorやbackground-imageが使えます。paddingもトリッキーな指定は不要です。

background-clipの指定が必要

ただし、今回の方法は、background-clipというプロパティの指定が必要です。このプロパティは、要素の背景の描画の範囲を決めることが出来ます。以下の例をご覧下さい。

background-clipの指定なしだと、初期設定のborder-box指定になり、背景はborderの背後にも描画されます。

border:10px dotted red;
background:yellow;
padding:1em;
display:table-cell;
background-clipの指定なしだとborder-box指定になる

background-clipをpadding-boxに指定すると、背景はborderの背後には描画されません。

border:10px dotted red;
background:yellow;
padding:1em;
display:table-cell;
background-clip:padding-box;
background-clipをpadding-boxに指定

background-clipの解説

ということで、今回の方法では、透明のborderで隙間を作る為に、background-clipをpadding-boxに指定する必要がある訳です。そうしないと、透明にしたborderの部分に背景が描画されてしまいます。以下の例をご覧下さい。

sample1
borderが不透明なら、table-cellの間に隙間があるように見えます
sample2
borderを半透明にすると、背景がborderの背後にも描画されているのがわかります。
sample3
borderが透明になると、table-cellの間に隙間は開きません
sample4
borderが透明でも、background-clip:padding-box;を指定すると、隙間に見えます
.samples {
display:table;
margin: 1em 0;
width: 100%;
}
.samples > div {
background:yellow;
padding:0.5em;
display:table-cell;
width:25%;
border:10px solid #000;
}
.samples .sample1 { border-color:rgba(0,0,0,1); }
.samples .sample2 { border-color:rgba(0,0,0,0.5); }
.samples .sample3,
.samples .sample4 { border-color:rgba(0,0,0,0); }
.samples .sample4 { background-clip:padding-box; }

いかがでしょう?background-clipは、存在は知っていましたが、私も、これまで使用した事がありませんでした。IE9+から利用可能です。不明な点があればパソコン倶楽部りんごでも質問を受け付けますよー。

ドラえもん をたった1つのdivとcssで描く

one-div-dora

元ネタはこちらのCSS3 ドラえもんです。2010でしょうか?アイデアが素晴らしいです。

今回は同じく、画像は使わずにcssだけでドラえもんを描きましたが「html要素はdivを1つだけ」という縛りにしてみました。

See the Pen One div DORAEMON by keisuke Takahashi (@ksksoft) on CodePen.

こちらは独立したDEMOです

どうやって描くの?

before と after の疑似要素を、もちろん使います。あとはcontentした文字列、box-shadow、text-shadow を駆使します。詳しくはDEMOのソースやfireBugなどを見て頂くとして、大まかにパーツを分けると以下のようになっています。

div.dora

  • 頭部 border-radius で丸めます。
  • div.dora box-shadow

    影は頭部と相似形の円になります。box-shadowは複数作成でき、位置、大きさ、色を変えられます。

    • 顔の白い部分
    • 首輪、鈴
    • 腕、手、脚、足
    • 全体のアウトラインを描くための複数の黒い円

    div.dora:before

    content で横棒の文字を出して、ひげにしています。

    display : block した上でborder-radiusの値を工夫して半円形を作ります。それ自体の背景を赤にして、舌のピンクはbox-shadowのinsetで、ポケットをbox-shadowで作成します。

    div.dora:after

    content で縦棒の文字を出して、鼻の下の線にしています。長さが足りない分はtext-shadowで文字を複製する感じです。

    display : block した上でborder-radiusで円形を作ります。それ自体の背景は白にして、以下をbox-shadowで作ります。

    • 鼻の赤い部分をbox-shadow の insetでつくり、ハイライトになる広い部分を残します
    • アイライン、白目、黒目、目のハイライトはbox-shadowの色と位置を変えて重ねます。

    作成ツールはFireBugの「ソース編集」

    fireBugでcssタブを表示すると、左上に「ソース編集」か「ライブ編集」があります。プルダウンで選択可能なので、ソース編集にして、そこをクリックします。

    firebug-css

    ソース編集の表示は、cssのプロパティや構文などが色分けされませんが、変更したら即時に描画に反映されるのは、いつものFireBugと同じです。これである程度変更を加えたら、その内部を全選択してコピーし、エディタのcssのソースにペーストします。この方法だと、複数箇所にわたる変更をまとめてコピペできるので楽ちんです。

    対応ブラウザは:before、:after、border-radius、box-shadow、text-shadowをサポートしているブラウザです。ドラちゃんの顔にホバーすると、cssが殆ど解除されるtrantisionを付けておきましたので、transitionに対応しているブラウザならば、その変化を見て頂けます。

    table-cell はmarginが無効。でも隙間を作る方法

    下記よりも簡単な方法を書きましたので、そちらもあわせてお読みください。

    table-cell with gutter

    display : table-cell では margin が無効になってしまう。でも隙間(gutter)をあけたい、というケースに対応する方法を考えました。

    DEMO

    DEMOでは li を table-cell で gutter つきの横並びにしました。ポイントは以下の通り。

    • li の背景色は透明にする
    • 背景色を box-shadow でつける
    • box-shadow を inset にして、x軸を要素の幅と同じ距離だけマイナスする。

    DEMOを見て頂くと、横並びの間の gutter にも、背景画像がきちんと見えているのが確認できると思います。

    table-cell は IE8+ から使えますが、box-shadow が IE9+ なので、IE9+ とモダンブラウザで使えるはず。

    ちなみに、背景との兼ね合いで gutter が不透明で良い場合は、border-right か border-left を gutter の分だけ付けるのが簡単です。

    以上、毎週金曜日にやっている勉強会「パソコン倶楽部りんご 」でに出た質問に答えました。

    最近はそっちでの投稿ばかりだったので、こちらで書いてみましたが、半年以上も新規投稿していなかったとは!

    ドキッ! CSSだらけのスノーウォーカー

    スターウォーズのスノーウォーカーは、正式にはAll Terrain Armored Transport (AT-AT)と言うらしい。

    wikipediaによれば、

    AT-ATは、映画『スター・ウォーズ エピソード5/帝国の逆襲』『スター・ウォーズ エピソード6/ジェダイの帰還』に登場する架空の兵器の名前。

    との事。いわゆる多脚戦車である。攻殻機動隊のフチコマ、タチコマは可愛らしく、アップルシードの多脚砲台も素敵でした。ちょっと微妙ですが1stガンダムのアッザム・リーダーは…移動砲台か?

    ともかく、ドリルメカと並んで多脚戦車は男子の夢。cssで描いて動かすしかないでしょう。

    AT-AT walking by css animation.

    publish

    authorKSK-soft TAKAHASI keisuke
    All Terrain Armored Transport (AT-AT) in Star Wars Episode V: The Empire Strikes Back © Lucasfilm Ltd.

    The many legs tank is a dream of the boys.

    *

    機体をマウスでプレスすると、頭部の兵器が撃てます。マウスが無さそうな小画面のデバイスでは、足下にコントロールボタンをつけておきました。時々、玉が打ちっぱなしで止まらなくなるのはご愛嬌。

    Firefox 16、Google Chrome 22で動作を確認しました。