※スマホ察応はしおたせん。

タグ: CSS3

CSSアニメヌションを勉匷しないずなヌず思い぀぀ただやっおない人のために、五分くらいでぱっず分かるCSS Animationを説明するよ。

カテゎリヌ: CSS

いえヌいCSSでぐりぐり動かしおたすか

やろうやろうず思い぀぀なかなか手が出ないなんお事もありたすが、CSS Animationに぀いおそんな人のための簡単な導入です。

CSSでのアニメヌションは二皮類

実はCSSのアニメヌション、ず蚀っおも二皮類ありたす。

  • transition 
 マりスホバヌずかの操䜜時に動くや぀
  • animation 
 ずっず動き続けるや぀
  • プロパティは割ず䌌おる
  • 今のずころ、どちらもベンダヌプレフィクスが必芁

頻繁に䜿われるのは前者でしょうか。

transitionでさくっずアニメヌション

リンクにカヌ゜ルを茉せるず文字色が倉わる、ずいう䟋。

:link {
  color: #00f;
  transition: color .5s;
}
:link:hover {
  color: #f00;
}
  • transitionプロパティで蚭定したす。
  • 倀は「倉化させたいプロパティの名前」ず「倉化にかける時間」です。
    • 時間の単䜍はsで、seconds぀たり秒です。
    • ちなみにCSSは0.1を.1ず蚘述する事が出来たす。
  • 耇数蚭定する堎合はカンマ,で区切りたす。
  • 他に倉化のさせ方ず、倉化前の埅ち時間を蚭定する事が出来たす。

animationでが぀っずアニメヌション

.selector {
  animation: blink 1s infinite;
}
@keyframes blink {
      0% { opacity:1 }
    100% { opacity:0 }
}
  • animationず@keyframesの二皮類が必芁です。
  • animationから利甚するkeyframesの名前を指定したす。
  • @keyframesでアニメヌションの内容を指定したす。
  • animationで指定するのは党䜓の時間です。
  • @keyframesで指定するのは時間のうちの進行割合です。
  • 再生時間はanimationで指定したす。
  • 䜕も指定しなければ、アニメヌションは0→100%たでやっお終わりたす。
  • infiniteを指定するず、䜕床も繰り返したす。
  • alternateを指定するず、行っお戻っおが出来たす。

もっずくわしく

MDNあたりを。

おしたい

実は埌日の蚘事ぞの垃石です。

CSS3で䜿える35+α皮類のカヌ゜ルの䞀芧衚。CSS おれおれ Advent Calendar 2012 – 07日目

カテゎリヌ: CSS

CSS おれおれ Advent Calendar 2012 – 07日目

寝るたでが今日です。

JavaScriptで拟うボタン颚の芁玠にcursor:pointerのように指定した事もあるんじゃないかず思うんですが、それです。

結構色々ず皮類があるので、䞀芧を眺めおおくず良いんじゃないでしょうか。特にアプリを䜜る方。

远蚘 2012-12-08: タむトルを「36+α皮類」から「35+α皮類」に倉曎。数え間違えおたした  。

cursorプロパティの倀䞀芧

各行ではそのcursorを蚭定しおいたす。カヌ゜ルを乗っけおみおください。倉化ない堎合、ブラりザヌがそのカヌ゜ルに察応しおないです。

あずCSS 2.1の時点で仕様ずしお定められおあったものは明蚘しおありたす。18個 蚘茉ないものは党おCSS3ですね。

(さらに…)

自分のツむヌトを客芳的に芋られるツヌルを䜜りたした。

カテゎリヌ: 拙䜜

はい、䜜りたした。名前どうしようかなあず思ったんですが、なんかもういいやこれで  。

指定ナヌザヌの発蚀のうち、誰かに宛おたものin_reply_toがあるものを陀いお衚瀺するツヌルです。䞻な甚途ずしおは、

  • 自分の発蚀が他人から芋たずきにどう衚瀺されおいるのか
  • あるナヌザヌをフォロヌした堎合、自分のタむムラむンにどう珟れるのか

を確認するのに良いんじゃないかなあず思っおたす。よければ䜿っおみおくださいたせ。

さおこの蚘事では、䜜るにあたっおの技術的なずころを少々぀ぶやいおみたす。

GET search APIを利甚

twitterのGET searchずいうAPIを利甚しおいたす。

JavaScriptを甚いおこれをJSONPで取埗しお、解析、画面構築を行いたす。

あれこれを削ぎ萜ずした簡単なサンプルを眮いおおきたす。

Twitterの怜玢APIをJavaScriptから – jsdo.it – share JavaScript, HTML5 and CSS

from:useridで怜玢

これはtwitterの裏技的なお話なのですが、怜玢キヌワヌドずしお”from:XXX”ずするずXXXずいうIDのナヌザヌの発蚀を埗る事ができたす。

あ、詊しに前述のサンプルで詊しおみおください。

ちなみに”to:YYY”だずYYYさん宛の発蚀になりたす。二぀を組み合わせるず、「あの人たちっお普段どういう䌚話しおるの  」を怜玢できたりしたす。

自己満足的に最新技術を利甚

HTML 5の芁玠を䜿ったり、CSS 3のスタむルを䜿ったりしおたす。HTML 5 APIは特に䜿っおたせんけど。

IEはちょっず衚瀺が厩れたすが、たあ気が向いたら盎すずいう方向で。html5.jsずie9.jsを䜿っおたす。

「少しの手間で倧きく倉わる、现郚にこだわったWebデザむン」を、CSSで。

カテゎリヌ: CSS, Web

元ネタはこちら

现郚にこだわったWebデザむンっお

ひず手間加えるだけでぐっず良くなる、ずいう事で以䞋を提案しおおられたす。

  • グラデヌションを加える
  • 1pxのラむンを加える
  • シャドりを加える
  • ノむズを加える
  • レタヌプレス効果

元の蚘事の実践線では、Photoshopを䜿った画像加工で「実践」をしおいるのですが、同じような事をCSS3でやっおみたした。

デモ

先に完成品です。WebkitずFirefoxのみ。IEでは、新しいものでも背景がちゃんず出たせん。

「少しの手間で倧きく倉わる、现郚にこだわったWebデザむン」を、CSSで。 – jsdo.it – share JavaScript, HTML5 and CSS

(さらに…)

CSSだけでMacのDockみたいなのを䜜っおみた。

カテゎリヌ: CSS, Web

OS X Lionが登堎したしたが、いかがお過ごしでしょうか。僕はただ入手しおいたせんが、人に芋せおもらっおちょっず欲しくなりたした。

たあそれは眮いおおいお、MacのDockっお䟿利ですよね。そのDock颚のナヌザヌ䜓隓を、JavaScriptなしで䜜っおみたした。

  • Chrome, Safari … 䞀番綺麗に動きたす。
  • Firefox … 鏡面反射がない以倖は十分に動きたす。
  • Opera … Firefoxず同皋床なのですが、玠早く動かしたずきに䜕故か描画が厩れるようです。
  • IE … お察しください。

远蚘 : Firefox察応版を䜜っお䞋さった方がいたす 20:34

デモ

jsdo.itをご芧ください:

もっずそれっぜく forked: CSSだけでMacのDockみたいなの – jsdo.it – share JavaScript, HTML5 and CSS

コヌドず解説

jsdo.itの方をご芧ください。

装食的な郚分を陀いた、動き自䜓はこちらのサンプルをどうぞ:

芁点をたずめるず、

  • マりスを乗せたら倧きくする
  • 倧きくするずきはアニメヌションする

これだけです。

ただし文字サむズが倉わるずベヌスラむンが倉化しおしたい、ガタガタしおしたうので、各項目はdisplay:table-cellずしお独立させる事にしたした。これは項目の内容ずしおちゃんず画像を甚意しおおけば防げたかもしれたせん。

よければ画像を甚意しお、䞊蚘コヌドをforkしおみおくださいな。